Chart blank until data is hidden and un-hidden via legend.

[threevaluelogic]

I am trying to create a chart that gets data from SQL Server (via ASP.Net MVC).

It does retrieve the data but it does not display it until the chart is hidden and subsequently un-hidden via the legend.

I cannot create a fiddle as without access to my MVC project it won’t display data.

$(document).ready(function () {

                var twitterDataPoints = [];
                var facebookDataPoints = [];
                var trafficDataPoints = [];

                function GetData()
                {
                    // Get Traffic Data Points
                    $.getJSON("/Home/GetData/", { type: 'Traffic' }, function (data) {
                        // Convert data from String to JSON. We should be getting a JSON object from MVC need to debug later.
                        data = jQuery.parseJSON(data);

                        // Extract data from JSON into array
                        for (var i = 0; i <= data.length - 1; i++) {
                            trafficDataPoints.push({ x: parseInt(data[i].x), y: parseInt(data[i].y) });
                        }
                    });

                    // Get Facebook Data Points
                    $.getJSON("/Home/GetData/", { type: 'Facebook' }, function (data) {
                        // Convert data from String to JSON. We should be getting a JSON object from MVC need to debug later.
                        data = jQuery.parseJSON(data);

                        // Extract data from JSON into array
                        for (var i = 0; i <= data.length - 1; i++) {
                            facebookDataPoints.push({ x: parseInt(data[i].x), y: parseInt(data[i].y) });
                        }
                    });

                    // Get Twitter Data Points
                    $.getJSON("/Home/GetData/", { type: 'Twitter' }, function (data) {
                        // Convert data from String to JSON. We should be getting a JSON object from MVC need to debug later.
                        data = jQuery.parseJSON(data);

                        // Extract data from JSON into array
                        for (var i = 0; i <= data.length - 1; i++) {
                            twitterDataPoints.push({ x: parseInt(data[i].x), y: parseInt(data[i].y) });
                        }
                    });
                }

                // Declare custom colorset
                CanvasJS.addColorSet("greenShades",
                    [//colorSet Array
                    "#2F4F4F",
                    "#008080",
                    "#2E8B57",
                    "#3CB371",
                    "#90EE90"
                    ]);

                // Define Chart
                var chart = new CanvasJS.Chart("chartContainer", {
                    title: {
                        text: "Site Analytics"
                    },
                    colorSet: "greenShades",
                    zoomEnabled: true,
                    legend: {
                        cursor: "pointer",
                        itemclick: function (e) {
                            if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                                e.dataSeries.visible = false;
                            } else {
                                e.dataSeries.visible = true;
                            }

                            chart.render();
                        }
                    },
                    data: [
                    {
                        showInLegend: true,
                        type: "line",
                        name: "Site Traffic",
                        dataPoints: trafficDataPoints
                    },
                    {
                        showInLegend: true,
                        type: "line",
                        name: "Facebook",
                        dataPoints: facebookDataPoints
                    },
                    {
                        showInLegend: true,
                        type: "line",
                        name: "Twitter",
                        dataPoints: twitterDataPoints
                    },
                    ]
                });

                GetData();
                chart.render();

            });

• This topic was modified 9 years, 11 months ago by threevaluelogic.
• This topic was modified 9 years, 11 months ago by threevaluelogic.

[Anjali]

threevaluelogic,

Can you please post the JSON Response (dummy data) so that we can figure out the issue.

__
Anjali

[threevaluelogic]

Sample JSON “[{\”x\”:10,\”y\”:100},{\”x\”:20,\”y\”:110},{\”x\”:30,\”y\”:120},{\”x\”:40,\”y\”:10},{\”x\”:50,\”y\”:450},{\”x\”:60,\”y\”:30},{\”x\”:70,\”y\”:20},{\”x\”:80,\”y\”:10},{\”x\”:90,\”y\”:20}]”

To confirm it does work you just have to hide then unhide the series from the legend.