FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › I want to make a 100% stacked chart where JSON data can run

I want to make a 100% stacked chart where JSON data can run

Viewing 4 posts - 1 through 4 (of 4 total)
  • July 28, 2018 at 12:27 pm #22027

    Hemel619619     
    <!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://cdn.canvasjs.com/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 :)

    July 28, 2018 at 1:23 pm #22028

    Hemel619619

    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?

    July 30, 2018 at 12:22 pm #22038

    Priyanka M S

    @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

    July 30, 2018 at 2:42 pm #22040

    Hemel619619

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