You must be logged in to post your query.
Home › Forums › Chart Support › STATIC TO DYNAMIC CONVERSION
Tagged: canvasjs, chartjs, CSS, html, javascript
Hello everyone,
I am having a trouble of converting static to dynamic. Would you please help me out here. For you convenience, let me post the coding here.
CODING:
<!DOCTYPE HTML> <html> <head> <script> window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, theme: "dark2", title:{ text: "MOVEMENT CATEGORY" }, subtitles:[ { text: "(STANDSTILL, ON FOOT or ON VEHICLE)", },], axisX:{ title: "TIME SLOT" }, axisY:{ title:"Number of users(%)", suffix: "%" }, toolTip: { shared: true }, data: [{ type: "stackedArea100", name: "STANDSTILL", showInLegend: "true", yValueFormatString: "#,##0.##\"%\"", dataPoints: [ { y: 83, label: "6am - 10am" }, { y: 51, label: "10am - 4pm" }, { y: 64, label: "4pm - 8pm" }, { y: 71, label: "8pm - 12am" }, { y: 45, label: "12am - 6am" } ] }, { type: "stackedArea100", name: "ON FOOT", showInLegend: "true", yValueFormatString: "#,##0.##\"%\"", dataPoints: [ { y: 20 , label: "6am - 10am" }, { y: 30, label: "10am - 4pm" }, { y: 24, label: "4pm - 8pm" }, { y: 38, label: "8pm - 12am" }, { y: 51, label: "12am - 6am" } ] }, { type: "stackedArea100", name: "ON VEHICLE", showInLegend: "true", yValueFormatString: "#,##0.##\"%\"", dataPoints: [ { y: 11, label: "6am - 10am" }, { y: 61, label: "10am - 4pm" }, { y: 50, label: "4pm - 8pm" }, { y: 23, label: "8pm - 12am" }, { y: 31, label: "12am - 6am" } ] }] }); chart.render(); } </script> </head> <body> <div id="chartContainer" style="height: 600px; width: 100%;"></div> <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script> </body> </html>
@Hemel619619,
You need to have data-source that updates dynamically like JSON or CSV which you can read, parse it to the format accepted by CanvasJS and pass it to the chart. Please take a look into this jsfiddle. In the jsfiddle, chart gets updated every second with the dataPoints from an external JSON.
__ Priyanka M S Team CanvasJS
So in this code…what are the changes I should make so that JSON data can pass through it & represent it on a graph?? Let me know please
THANK YOU SO MUCH PRIYANKA MS! I saw ur coding. But it this case…chart looking so clumsy in here. How can I reduce it??
Also please let me know how can I code the same code that you did in jsfiddle? ALso wanna know in the coding where did u make the changes so the time slots are visible in x-axis?? Please let me know
HOW CAN I WRITE THIS CODE IN NOTEPAD++ by combining all the html,css and javascript?
I have one more question! could you please explain how did u create this? https://api.myjson.com/bins/a98dm
Please let me know. It’s really urgent.
chart looking so clumsy in here. How can I reduce it?
You can shift the dataPoints. If you need only the current dataPoints, use shift() method. Please take a look at this example in our documentation.
ALso wanna know in the coding where did u make the changes so the time slots are visible in x-axis?
You should assign the labels along x-axis with values obtained from JSON.
You can create JSON data in http://myjson.com/ and get the link that has your JSON data.
if (dps.length > 10 ) { dps.shift(); }
One more question, Where do I need to put these above code in the coding?? For your convenience I am posting this code for you. Also, Make the whole coding in one single HTML file please.
CODING
<!DOCTYPE HTML> <html> <head> <script> window.onload = function () { var dps1 = [], dps2 = [], dps3 = []; var chart = new CanvasJS.Chart("chartContainer",{ title:{ text: "TIME SLOT vs. MOVEMENT CATEGORY" }, axisX:{ title: "TIME SLOT" }, axisY:{ title: "Percentage of movement category" }, data: [ { type: "stackedArea100", name: "STANDSTILL", showInLegend: "true", yValueFormatString: "#,##0.##\"%\"", dataPoints: dps1 }, { type: "stackedArea100", name: "ON FOOT", showInLegend: "true", yValueFormatString: "#,##0.##\"%\"", dataPoints: dps2 }, { type: "stackedArea100", name: "ON VEHICLE", showInLegend: "true", yValueFormatString: "#,##0.##\"%\"", dataPoints: dps3 } ] }); getData(); chart.render(); function getData(chart) { $.when($.getJSON("https://api.myjson.com/bins/a98dm", function(data) { for(var i = 0; i < data.length; i++) { dps1.push({ label: data[i].label, y: data[i].y1 }); dps2.push({ label: data[i].label, y: data[i].y2 }); dps3.push({ label: data[i].label, y: data[i].y3 }); } })).done(function(){ chart.render(); }); } setInterval(function(){ getData(); chart.render(); }, 100000); </script> </head> <body> <div id="chartContainer" style="height: 600px; width: 100%;"></div> <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script> </body> </html>
THANK YOU!!
You must be logged in to reply to this topic. Login/Register