FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › CANVASJS graph Issue

CANVASJS graph Issue

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

Tagged: , , ,

  • August 7, 2018 at 9:55 am #22144

    Hemel619619

    HELLO EVERYONE, THIS IS ME NAFE ISLAM. How are you doing? In below, it’s a coding of time vs movement category. In here, when you run the code it takes time initially to show up due to rendering. I want to make a change in a way that the first appearance of the graph come faster then it will render. How to do that? I really wanna know this. Anyone kind hearted person help me out that would be wonderful!

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

    THANK YOU!!

    August 9, 2018 at 10:46 am #22170

    Vishwas R

    @hemel619619,

    You seemed to be using chart within getData method but which is undefined as its not passed when the function is called. Passing chart as parameter to getData method should work fine in your case getData(chart);.

    It would be helpful for us to understand your scenario better when we look at your code working live in jsfiddle. So I kindly request you to create jsfiddle and share it with us if you find any issue working in CanvasJS in future.

    —
    Vishwas R
    Team CanvasJS

    August 11, 2018 at 10:16 am #22218

    Hemel619619

    Dear vishwas R, could you please change the necessary edition of the coding for me ? It will be highly appreciated.

    August 13, 2018 at 10:01 am #22229

    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

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

Tagged: , , ,

You must be logged in to reply to this topic.