Home Forums Chart Support STATIC TO DYNAMIC CONVERSION

STATIC TO DYNAMIC CONVERSION

Viewing 9 posts - 1 through 9 (of 9 total)
  • #21984

    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://canvasjs.com/assets/script/canvasjs.min.js"></script>
    </body>
    </html>
    #21993

    @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

    #22018

    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

    #22020

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

    #22021

    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

    #22024

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

    #22026

    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.

    #22036

    @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

    #22042

    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://canvasjs.com/assets/script/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.