Home forums Using CanvasJS STATIC TO DYNAMIC CONVERSION

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

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

    Hemel619619
    Member

    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

    Priyanka M S
    Member

    @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

    Hemel619619
    Member

    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

    Hemel619619
    Member

    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

    Hemel619619
    Member

    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

    Hemel619619
    Member

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

    #22026

    Hemel619619
    Member

    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

    Priyanka M S
    Member

    @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

    Hemel619619
    Member

    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.