Home forums Using CanvasJS Chart blank until data is hidden and un-hidden via legend.

This topic contains 2 replies, has 2 voices, and was last updated by  threevaluelogic 2 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #7551

    threevaluelogic
    Participant

    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();
    
                });
    #7564

    Anjali
    Participant

    threevaluelogic,

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

    __
    Anjali

    #7567

    threevaluelogic
    Participant

    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.