You must be logged in to post your query.
Home › Forums › Chart Support › Chart blank until data is hidden and un-hidden via legend.
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(); });
threevaluelogic,
Can you please post the JSON Response (dummy data) so that we can figure out the issue.
__ Anjali
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.
You must be logged in to reply to this topic. Login/Register