Home forums Using CanvasJS CANVASJS graph Issue

This topic contains 3 replies, has 2 voices, and was last updated by  Vishwas R 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #22144

    Hemel619619
    Member

    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://canvasjs.com/assets/script/canvasjs.min.js”></script>
    <script src=”https://canvasjs.com/assets/script/jquery-1.11.1.min.js”></script>
    </body>
    </html>

    THANK YOU!!

    #22170

    Vishwas R
    Keymaster

    @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

    #22218

    Hemel619619
    Member

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

    #22229

    Vishwas R
    Keymaster

    @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)

You must be logged in to reply to this topic.