Home forums Using CanvasJS I want to make a 100% stacked chart where JSON data can run

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

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

    Hemel619619
    Member

    <!DOCTYPE HTML>
    <html>
    <head>
    <script>

    window.onload = function () {

    var dps1 = [], dps2 = [], dps3 = [];

    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: “%”
    },

    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() {
    $.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
    });
    }
    });
    }

    setInterval(function(){
    getData();
    chart.render();
    }, 5000);

    </script>
    </head>
    <body>
    <div id=”chartContainer” style=”height: 400px; width: 100%;”></div>
    <script src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script>
    </body>
    </html>

    In this code, I want to run JSON data. But for some unknown reason this coding is not working properly. Can anybody help me out by solving this problem of providing the appropriate code? It will be highly appreciated. Also, the chart should in a way that an user can get the proper view so that He or she can have a better understanding.

    THANK YOU :)

    #22028

    Hemel619619
    Member

    HTML:
    <div id=”chartContainer” style=”height: 300px; width: 150%;”></div>

    JAVASCRIPT:
    var dps1 = [], dps2 = [], dps3 = [];
    var chart = new CanvasJS.Chart(“chartContainer”,{
    title:{
    text: “Y Values based on Frequency of Date”
    },
    axisX:{
    title: “Date”
    },
    axisY:{
    title: “Frequecy of dates”
    },
    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() {
    $.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
    });
    }
    });
    }

    setInterval(function(){
    getData();
    chart.render();
    }, 5000);

    I WANT TO COMBINE THIS 2 codes into a simple HTML File. How can I do that? Please write the whole code in the post after edition please. ALso how can i make it dynamic?

    #22038

    Priyanka M S
    Member

    @hemel619619,

    Considering this to be duplicate. Hence closing this thread.

    If you still face any issues, kindly create and share jsfiddle reproducing the issue.

    __
    Priyanka M S
    Team CanvasJS

    #22040

    Hemel619619
    Member

    @priyanka M S

    Thank you so so much for your help.

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

You must be logged in to reply to this topic.