Search code examples
javascriptarraysstacked-chartzingchart

How to put value from array to Zingchart.js

I want to create stacked bar chart in Zingchart.js and I have data as : 

var data = [{
  month : 1,
  name : 'Alex',
 count : '20'
 },
 {
 month : 2,
  name : 'Alex',
 count : '20'
 } ,
 {
 month : 2,
  name : 'John',
 count : '30'
 } ,
 {
 month : 2,
  name : 'Jane',
 count : '25'
 } ,
 {
 month : 3,
  name : 'Alex',
 count : '15'
 } ,
 {  
 month : 3,
  name : 'John',
 count : '25'
 } ,
 {
 month : 3,
  name : 'Jane',
 count : '23'
 } 
}]

and I converted data as :

var data = {  "Alex" : ["20", " 20", "15"],
              "John" : ["0", "30", "25" ],
              "Jane" : ["0", "25", "23"]
           }

I want to put value in array to Zingchart.js for create stacked bar chart and example to put value in zingchart : 

var myConfig = {
  type: "bar",
  plot:{
    stacked:true,
    stackType:"normal"
  },
  "scale-x": { 
            "labels": ["1","2","3"],
            "label":{"offsetY": 5,
                    "text": "Month",
                    "fontColor": "#777",
                    "fontSize": 14
   }
  },
  series:[
    {
      values: [20, 20, 15]
    },
    {
      values:[0, 30, 25 ] 
    },
    {
      values: [0, 25, 23] 
    }
  ]
};
 
zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: "100%", 
	width: "100%" 
});
      
html, body, #myChart {
  width:100%;
  height:100%;
}
<!DOCTYPE html>
<html>
	<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
		<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
		ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script></head>
	<body>
		<div id='myChart'></div>
	</body>
</html>

How to put value in array to zingchart.js ,who have any ideas for me ? thanks. https://www.zingchart.com/docs/chart-types/bar-charts/#bar__props_stacked

Solution

  • You can do something like this:

    var xLabels = Object.keys(data)

var yValues = xLabels.map(function (key) {
  return {
    values: data[key].map(Number)
  }
})

    Check out this demo:

    var data = {
  "Alex": ["20", " 20", "15"],
  "John": ["0", "30", "25"],
  "Jane": ["0", "25", "23"]
}

var xLabels = Object.keys(data)

var series = xLabels.map(function (key) {
  return {
    values: data[key].map(Number)
  }
})

var myConfig = {
  type: "bar",
  plot: {
    stacked: true,
    stackType: "normal"
  },
  "scale-x": {
    "labels": xLabels,
    "label": {
      "offsetY": 5,
      "text": "Month",
      "fontColor": "#777",
      "fontSize": 14
    }
  },
  series: series
};

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: "100%",
  width: "100%"
});
    html,
body,
#myChart {
  width: 100%;
  height: 100%;
}
    <!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <script>
    zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "ee6b7db5b51705a13dc2339db3edaf6d"];
  </script>
</head>

<body>
  <div id='myChart'></div>
</body>

</html>