Binding json result in highcharts for asp.net mvc 4

Question

net mvc4 c# razor project i want to implement dotnet highcharts.For that i have created a jsonresult function to get the data from datatable and a cshtml file to render the file.

Here my issue is that 1. i dont how to pass the data from json to view 2. how to display the result for x axis and series in highcharts.

Am beginner in asp.net mvc 4 and Highcharts..

cshtml

enter code here
    <script type="text/javascript">
            $(function () {
                debugger;
                $('#container').highcharts({

                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Audience Live Data'
                    },
                    subtitle: {
                        text: 'Mainadv'
                    },
                    xAxis: {
                        categories: [mySeries]
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Count'
                        }
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        }
                    },
                    series: [{
                        name: 'Home',
                        data: [{ data: data }]

                    }, {
                        name: 'Category',
                        data: [{ data: data }]

                    }, {
                        name: 'Product',
                        data: [{ data: data }]

                    }, {
                        name: 'Basket',
                        data: [{ data: data }]

                    },{
                    name: 'Checkout',
                    data: [{ data: data }]

            }]
                });
            });
</script>

Script file

<script type="text/javascript">
    // the button action
    debugger;
    var url = "/AudienceLive/GetAudLiveChartData/";
    $.ajax({
        url: url,
        cache: false,
        Type: 'POST',
        success: function (myData) {
            var mySeries = [];
            for (var i =0; i < myData.length; i++) {
                mySeries.push([myData[i]]);  
            }
            var chart = $('#container').highcharts();
            chart.series[0].setData(mySeries);
            // chart.series[0].pointStart=;

        }, error: function (response) {
            alert("error : " + response);
        }

    });
</script>

JsonResult Function

   public JsonResult GetAudLiveChartData()
        {
            AudienceLiveRepo objlive=new AudienceLiveRepo ();
            List<string> test=new List<string>();
            DataTable dt = objlive.GetTable();
            if(dt!=null)
            {
                if(dt.Rows.Count>0)
                {
                    for (int i = 0; i < dt.Rows.Count; i++)
                    {
                        test.Add(Convert.ToString(dt.Rows[i][0]));
                        test.Add(Convert.ToString(dt.Rows[i][1]));
                        test.Add(Convert.ToString(dt.Rows[i][2]));
                        test.Add(Convert.ToString(dt.Rows[i][3]));
                        test.Add(Convert.ToString(dt.Rows[i][4]));
                        test.Add(Convert.ToString(dt.Rows[i][5]));
                    }
                }
            }
            objlive = null;
            return Json(test, JsonRequestBehavior.AllowGet);
        }

right · Accepted Answer · 2015-03-25 14:46:22Z

1

View cshtml

$(document).ready(function () {
        $.ajax({
            url: "/home/ChartData",
            type: 'POST',
            dataType: 'json'
        }).success(function (dataChart) {
            var Xaxis = [];//skapa tre olika array
            var dataseries = [];
            for (var i = 0; i < dataChart.length; i++) {
                var items = dataChart[i];
                var XcategoreisItem = items.id;
                var seriesData = items;

                Xaxis.push(XcategoreisItem); 
                dataseries.push(seriesData); 
                console.log(dataseries);
            }
            getchart(Xaxis, dataseries);

        }).error(function (er, xhr, e) {
            console.log("Error: ", er, xhr, e);
        })

});
function getchart(Xaxis, dataseries) {
    $('#container').highcharts({
        chart: {
            type: 'line',
            zoomType: 'xy',
            panning: true,
            panKey: 'shift'
        },

        title: {
            text: 'Zooming and panning'
        },

        subtitle: {
            text: 'Click and drag to zoom in. Hold down shift key to pan.'
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '{y}%', 

                }
            }
        },
        xAxis: {
            categories: Xaxis
        },
        yAxis: {
            title: {
                text: 'Y axis text'
            },

     series: [{
            name: 'Id',
            data: dataseries
        }]
    });
};

HomeController

 public ActionResult ChartData()
    {
           TbChart db = new TbChart();

          var TbChartData = db.getYaxis();

          return this.Json(TbChartData, JsonRequestBehavior.AllowGet);
   }

answered Mar 25, 2015 at 14:46

right

263 bronze badges

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

2 Comments

right Over a year ago

In cshtml view <div id="container"> </div>

Junius Over a year ago

I have followed your answer but I got an exception $(...).highcharts is not a function. How do I instantiate this $('#container').highcharts?

Collectives™ on Stack Overflow

Binding json result in highcharts for asp.net mvc 4

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related