Home › Forums › Chart Support › STATIC TO DYNAMIC CONVERSION

STATIC TO DYNAMIC CONVERSION

Viewing 9 posts - 1 through 9 (of 9 total)
  • July 26, 2018 at 11:14 am #21984

    Hemel619619

    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>
    July 26, 2018 at 6:22 pm #21993

    Priyanka M S

    @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

    July 27, 2018 at 8:56 pm #22018

    Hemel619619

    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

    July 27, 2018 at 9:00 pm #22020

    Hemel619619

    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??

    July 27, 2018 at 9:31 pm #22021

    Hemel619619

    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

    July 28, 2018 at 9:54 am #22024

    Hemel619619

    HOW CAN I WRITE THIS CODE IN NOTEPAD++ by combining all the html,css and javascript?

    July 28, 2018 at 10:22 am #22026

    Hemel619619

    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.

    July 30, 2018 at 11:50 am #22036

    Priyanka M S

    @Hemel619619,

    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.

    I have one more question! could you please explain how did u create this? https://api.myjson.com/bins/a98dm

    You can create JSON data in http://myjson.com/ and get the link that has your JSON data.

    __
    Priyanka M S
    Team CanvasJS

    July 30, 2018 at 3:24 pm #22042

    Hemel619619

    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!!

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

You must be logged in to reply to this topic.