Home forums Using CanvasJS Want to change a few things in canvasjs coding!

This topic contains 8 replies, has 3 voices, and was last updated by  Hemel619619 2 months, 1 week ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #22140

    Hemel619619
    Member

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

    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!

    #22171

    Vishwas R
    Keymaster

    @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

    #22172

    Hemel619619
    Member

    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

    #22175

    Priyanka M S
    Member

    @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

    #22178

    Hemel619619
    Member

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

    #22186

    Vishwas R
    Keymaster

    @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

    #22219

    Hemel619619
    Member

    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.

    #22228

    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

    #22261

    Hemel619619
    Member

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

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

You must be logged in to reply to this topic.