Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: jQuery JSON MVC3
i am working on mvc3 now i need to get data in to x-axis of line-charts from controllers means i need show the x-axis of line chart data from controllers could u plz help me how should i do this work plz help Here
 
this is my models
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;
namespace JqueryCharts.Models
{
    public class PiechartModel:DbContext
    {
    public class Details
        {
            public string Title { get; set; }
            public int counts { get; set; }
        }
}
}
 

this is my controllers
 
  namespace JqueryCharts.Controllers
  {
    public class PiechartsController : Controller
   {
    //
    // GET: /Piecharts/
  public BugtrackerNewEntities1 db = new BugtrackerNewEntities1();
 
    public ActionResult Index()
    {
        return View();
    }
 
    public JsonResult GetData()
    {
        int Param1;
        Param1 = 3;
        var reports = db.ExecuteStoreQuery<JqueryCharts.Models.PiechartModel.Details>("Sp_CountBugs @ProjectId", new SqlParameter("@ProjectId", Param1)).ToList();
        return Json(reports, JsonRequestBehavior.AllowGet);
    }
 

and this is my view
 

<script type="text/javascript">
       $(function () {
           $.getJSON('<%= Url.Action("GetData","Piecharts") %>', {}, function (data) {
               var json = data;
               var jsondata = [];
               for (var i in json) {
                   jsondata.push([json[i].Title], json[i].counts);
 
               }
               var chart;
               $(document).ready(function () {
                   chart = new Highcharts.Chart({
                       chart: {
                           renderTo: 'container',
                           type: 'line',
                           marginRight: 130,
                           marginBottom: 25
                       },
                       title: {
                           text: 'Monthly Average Temperature',
                           x: -20 //center
                       },
                       subtitle: {
                           text: 'Source: WorldClimate.com',
                           x: -20
                       },
                       xAxis: {
                           categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                       },
                       yAxis: {
                           title: {
                               text: 'Days For Display(day)'
                           },
                           plotLines: [{
                               value: 0,
                               width: 1,
                               color: '#808080'
                           }]
                       },
                       tooltip: {
                           shared: true
                       },
                 legend: {
                           layout: 'vertical',
                           align: 'right',
                           verticalAlign: 'top',
                           x: -10,
                           y: 100,
                           borderWidth: 0
                       },
 
                       series: [{
                           type: 'area',
 
                           data: jsondata
                       }]
                   });
               });
           });
       });
        </script>
</head>
<body>
   <div id='container' style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
 

here i need display x axis of line-chart data from controlles plz help how could i do this work i dont have any idea plz help me to do this work thank in advance
Posted 28-Aug-12 4:10am
Edited 28-Aug-12 5:33am
v5

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Your chart is hard coded here. Therefore, you know what the values are. So, I'm not sure I see the issue. The data is not even coming through your AJAX call, it's right there.
 
You should move your script to a js file. Apart from anything else, the browser can then cache it.
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Advertise | Privacy | Mobile
Web01 | 2.8.1411023.1 | Last Updated 28 Aug 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100