<!DOCTYPE HTML> <html> <head> <script> window.onload = function (){ var dps1 = [], dps2 = [], dps3 = []; var chart = new CanvasJS.Chart("chartContainer",{ title:{ text: "TIME vs. Movement category" }, axisX:{ title: "TIME SLOT" }, axisY:{ title: "% of Movement Category" }, data: [ { type: "stackedArea100", name: "Standstill/Tilting", 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/tw3zs", 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> <script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> </body> </html> In this coding…what I want to make a change is in a particular time slot appropriate datapoints will be displayed with a appropriate time slot! but in this coding, there are few problems. How can I solve this problem? Please run this code and wait after 5 mins, u can see the problem!

Name: Want to change a few things in canvasjs coding!
Channel: Hemel619619
Description: × You must be logged in to post your query. Log In Username: Password: Remember Me Log In Register Lost Password Home &rsaquo; Forums &rsaquo; Chart Support &rsaquo; Want to change a few things in canvasjs coding! Want to change a few things in canvasjs coding! This topic has 8 replies, 3 voices, and was

This is what happened after running your code! I want to get rid of this problem very soon please.

@hemel619619, Please take a look at this jsfiddle. I suggest you to refer MDN Documentation for more info on JavaScript related queries / tutorials. -- Vishwas R Team CanvasJS

Dear Vishwas R, I have seen all these documentation but couldn't apply this shift() method properly for expected results. Could you please place the shift() method in this coding to get the expected results please? PLEASE PLEASE & PLEASE. It's a request.

@hemel619619, Shift is a JavaScript array method that removes the first item of an array. Please refer this link for more info on the same. Please refer our documentation for complete step-by-step tutorial on creating dynamic charts. -- Vishwas R Team CanvasJS

How do I apply this shift() method when there are Multi dps .... Please send the full html file! that would be wonderful. Thank you

Want to change a few things in canvasjs coding!

This topic has 8 replies, 3 voices, and was last updated 5 years, 8 months ago by Hemel619619.

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

Tagged: canvasjs, CSS, html, javascript

August 6, 2018 at 4:11 pm #22140
Hemel619619
```
<!DOCTYPE HTML>
    <html>
    <head>
    <script>
    window.onload = function (){
    var dps1 = [], dps2 = [], dps3 = [];
    var chart = new CanvasJS.Chart("chartContainer",{
      title:{
        text: "TIME vs. Movement category"
      },
      axisX:{
        title: "TIME SLOT"
      },
      axisY:{
        title: "% of Movement Category"
      },
      data: [
        {
          type: "stackedArea100",
          name: "Standstill/Tilting",
          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/tw3zs", 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>
	<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    </body>
    </html>
```
In this coding…what I want to make a change is in a particular time slot appropriate datapoints will be displayed with a appropriate time slot! but in this coding, there are few problems. How can I solve this problem? Please run this code and wait after 5 mins, u can see the problem!
August 9, 2018 at 10:48 am #22171

Vishwas R

@hemel619619,

It seems to be working fine.

It would be helpful for us to understand your scenario better when we look at your code working live in jsfiddle. So I request you to create jsfiddle and share it with us and brief the problem you are facing?

—
Vishwas R
Team CanvasJS

August 9, 2018 at 11:01 am #22172

Hemel619619

actually when I run this code, after a while you can see the graph gets squeezed so no can understand what is going on? How can I solve this problem and the json data will be provided from the server. Please help me out here.

Also how can I create jsfiddle and share it live so it will be helpful for you.

THank you

August 9, 2018 at 12:55 pm #22175

Priyanka M S

@Hemel619619,

Please take a look at this example in our documentation on shifting dataPoints in dynamic charts, which makes the charts readable.

Refer to this youtube tutorial on creating a jsfiddle.

__
Priyanka M S
Team CanvasJS

August 9, 2018 at 6:14 pm #22178

Hemel619619

How do I apply this shift() method when there are Multi dps …. Please send the full html file! that would be wonderful. Thank you

August 10, 2018 at 9:56 am #22186

Vishwas R

@hemel619619,

Shift is a JavaScript array method that removes the first item of an array. Please refer this link for more info on the same. Please refer our documentation for complete step-by-step tutorial on creating dynamic charts.

—
Vishwas R
Team CanvasJS

August 11, 2018 at 10:18 am #22219

Hemel619619

Dear Vishwas R,

I have seen all these documentation but couldn’t apply this shift() method properly for expected results. Could you please place the shift() method in this coding to get the expected results please? PLEASE PLEASE & PLEASE. It’s a request.

August 13, 2018 at 10:00 am #22228

Vishwas R

@hemel619619,

Please take a look at this jsfiddle.

I suggest you to refer MDN Documentation for more info on JavaScript related queries / tutorials.

—
Vishwas R
Team CanvasJS

August 14, 2018 at 3:19 pm #22261

Hemel619619

This is what happened after running your code! I want to get rid of this problem very soon please.