asp.net mvc highchart linegraph json

Question

I'm trying to get the line-example at: http://www.highcharts.com/demo/line-basic/grid working with a jsonresult, but can't figure out how to achieve this.

The controler code:

public JsonResult GetLineData()
    {
        Dictionary<string, double[]> retVal = new Dictionary<string, double[]>();
        double[] Array1 = {7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6};
        retVal.Add("Tokyo", Array1);

        double[] Array2 = { -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5 };
        retVal.Add("New York", Array2);

        return Json(retVal.ToArray(), JsonRequestBehavior.AllowGet);
    }

My jqquery looks like this:

var chart;
    $(document).ready(function () {
        var options = {
            chart: {
                renderTo: 'container',
                defaultSeriesType: '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: 'Temperature (Â°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
           this.x + ': ' + this.y + 'Â°C';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: []
        };

        //Calls the JSON            
        jQuery.getJSON("GetLineData", null, function (items) {
            var series = {
                name: '',
                data: []
            };                
            jQuery.each(items, function (itemNo, item) {
                //Get the items from the JSON and add then
                //to the data array of the series                               
                series.data.push({
                    name: item.Key,
                    data: item.Value
                })                    
            });
            options.series.push(series);

            //Create the chart
            chart = new Highcharts.Chart(options);
            chart.render();
        });


    });

The chart shows up without an error, but also without the two lines. I guess the series are not builded the right way? Thanks in advance for your help.

ShankarSangoli · Accepted Answer · 2011-06-20 13:55:34Z

5

Try this. I am assuming item.Value is an array which can be used as data to be provided to the chart.

//Calls the JSON            
        jQuery.getJSON("GetLineData", null, function (items) {
            var series = [];                
            jQuery.each(items, function (itemNo, item) {
                //Get the items from the JSON and add then
                //to the data array of the series                               
                series.push({
                    name: item.Key,
                    data: item.Value
                })                    
            });
            options.series = series;

            //Create the chart
            chart = new Highcharts.Chart(options);
            chart.render();
        });

answered Jun 20, 2011 at 13:55

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ShankarSangoli Over a year ago

Highcharts series takes an arrary of object which can have name, type of the series and data which is an array of data elements. I corrected that in your code to make it work.

Lourens · Accepted Answer · 2011-06-20 13:41:48Z

2

I think all you need to do is instead of

options.series.push(series);

do

options.series = series;

or else your pushing the entire array as a single item into an array

answered Jun 20, 2011 at 13:41

Lourens

1,5181 gold badge13 silver badges27 bronze badges

Comments

Vangi · Accepted Answer · 2012-01-17 21:51:39Z

With DotNet.Highcharts you don't need to think how to pass data from the action method to the javascript. You can construct and bind everything on the server side. Here is the example for the Basic Line with this library:

public ActionResult BasicLine()
    {
        Highcharts chart = new Highcharts("chart")
            .InitChart(new Chart
                       {
                           DefaultSeriesType = ChartTypes.Line,
                           MarginRight = 130,
                           MarginBottom = 25,
                           ClassName = "chart"
                       })
            .SetTitle(new Title
                      {
                          Text = "Monthly Average Temperature",
                          X = -20
                      })
            .SetSubtitle(new Subtitle
                         {
                             Text = "Source: WorldClimate.com",
                             X = -20
                         })
            .SetXAxis(new XAxis { Categories = ChartsData.Categories })
            .SetYAxis(new YAxis
                      {
                          Title = new XAxisTitle { Text = "Temperature (°C)" },
                          PlotLines = new[]
                                      {
                                          new XAxisPlotLines
                                          {
                                              Value = 0,
                                              Width = 1,
                                              Color = ColorTranslator.FromHtml("#808080")
                                          }
                                      }
                      })
            .SetTooltip(new Tooltip
                        {
                            Formatter = @"function() {
                                    return '<b>'+ this.series.name +'</b><br/>'+
                                this.x +': '+ this.y +'°C';
                            }"
                        })
            .SetLegend(new Legend
                       {
                           Layout = Layouts.Vertical,
                           Align = HorizontalAligns.Right,
                           VerticalAlign = VerticalAligns.Top,
                           X = -10,
                           Y = 100,
                           BorderWidth = 0
                       })
            .SetSeries(new[]
                       {
                           new Series { Name = "Tokyo", Data = new Data(new object[] { 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6 }) },
                           new Series { Name = "New York", Data = new Data(new object[] { -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5 }) },
                           new Series { Name = "Berlin", Data = new Data(new object[] { -0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0 }) },
                           new Series { Name = "London", Data = new Data(new object[] { 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8 }) }
                       }
            );

        return View(chart);
    }

You also can find a lot of MVC samples here: http://dotnethighcharts.codeplex.com/releases/view/80650

Collectives™ on Stack Overflow

asp.net mvc highchart linegraph json

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related