Stacked chart with ZingChart
I am making a complex bar chart with the ZingChart library. Here is an example http://jsfiddle.net/api/post/library/pure/ but suppose I need a limit, for example, the color should only change if it is over 15k. Is it possible?
var myConfig =
{
"type": "bar",
"stacked": true,
"stack-type": "normal",
"background-color": "#FFFFFF",
"title": {
"text": "Mobile OS Sales - ",
"font-family": "arial",
"x": "40px",
"y": "5px",
"align": "left",
"bold": false,
"font-size": "16px",
"font-color": "#000000",
"background-color": "none"
},
"subtitle": {
"text": "<i>Since January 14, 2013</i>",
"font-family": "arial",
"x": "175px",
"y": "5px",
"align": "left",
"bold": false,
"font-size": "16px",
"font-color": "#7E7E7E",
"background-color": "none"
},
"plot": {
"bar-width": "25px",
"hover-state": {
"visible": false
}
},
"labels":[
{
"text": "11,245 Android",
"background-color": "#90A23B",
"font-size": "14px",
"font-family": "arial",
"font-weight": "normal",
"font-color": "#FFFFFF",
"padding": "10%",
"border-radius": "3px",
"offset-y":-30,
"shadow": false,
"callout": true,
"callout-height": "10px",
"callout-width": "15px",
"hook":"node:plot=2;index=4"
},
{
"text": "9,750 iOS",
"background-color": "#787878",
"font-size": "14px",
"font-family": "arial",
"font-weight": "normal",
"font-color": "#FFFFFF",
"padding": "10%",
"border-radius": "3px",
"shadow": false,
"callout": true,
"callout-height": "10px",
"callout-width": "15px",
"hook":"node:plot=2;index=5",
"offset-y": -30
},
{
"text": "15,279 Windows",
"thousands-separator": ",",
"background-color": "#FFC700",
"font-size": "14px",
"font-family": "arial",
"font-weight": "normal",
"font-color": "#FFFFFF",
"padding": "10%",
"border-radius": "3px",
"shadow": false,
"callout": true,
"callout-height": "10px",
"callout-width": "15px",
"offset-y": -30,
"hook":"node:plot=2;index=9"
}
],
"scale-x": {
"values": [
"JAN",
"FEB",
"MAR",
"APR",
"MAY",
"JUN",
"JUL",
"AUG",
"SEP",
"OCT",
"NOV",
"DEC"
],
"line-color": "#7E7E7E",
"tick": {
"visible": false
},
"guide": {
"visible": false
},
"item": {
"font-family": "arial",
"font-color": "#8B8B8B"
}
},
"scale-y": {
"values": "0:70000:10000",
"short": true,
"line-color": "#7E7E7E",
"tick": {
"visible": false
},
"guide": {
"line-style": "solid"
},
"item": {
"font-family": "arial",
"font-color": "#8B8B8B"
}
},
"series": [
{
"values": [
15000,
12000,
42000,
13000,
19500,
9750,
11500,
36500,
11750,
16000,
9800,
43279
],
"background-color": "#787878"
},
{
"values": [
13000,
8000,
5000,
20000,
17000,
10000,
34000,
6000,
5500,
15279,
1500,
2250
],
"background-color": "#FFC700"
},
{
"values": [
17000,
9000,
2000,
12500,
11245,
1750,
5500,
3000,
10000,
9750,
1500,
17750
],
"background-color": "#90A23B"
}
],
"tooltip": {
"visible": false
}
}
;
zingchart.render({
id : 'myChart',
data : myConfig,
height: 500,
width: 725
});
<html>
<head>
<script src= 'https://cdn.zingchart.com/2.1.1/zingchart.min.js'></script>
<script> zingchart.MODULESDIR = 'https://cdn.zingchart.com/2.1.1/modules/';
ZC.LICENSE = ['569d52cefae586f634c54f86dc99e6a9','ee6b7db5b51705a13dc2339db3edaf6d'];</script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
+3
source to share
1 answer
I think this might be what you are looking for. Feel free to let me know if not.
This demo assumes that you start with a single array of totals, such as:
var origSeries = [10316,23988,39643,40708,9857,18558,42194,28130,26569,23148,31424,41053,27838,38383,36105,47613,35903,40775,37769,24143];
We will programmatically divide them into two series: one that is below the threshold, and one that is higher. Then we set the desired background color for each series.
Run the snippet to see it in action. Remember that you can do this infinitely many times to create additional stacks using different thresholds.
Again, I am on the ZC team, so feel free to ask for help!
var origSeries = [10316, 23988, 39643, 40708, 9857, 18558, 42194, 28130, 26569, 23148, 31424, 41053, 27838, 38383, 36105, 47613, 35903, 40775, 37769, 24143];
var series1 = [];
var series2 = [];
function calcThreshold(array, threshold) {
var difference;
array.forEach(function(el, index, array) {
difference = el - threshold;
if (difference <= 0) {
series1.push(el);
series2.push(null);
} else {
series1.push(threshold);
series2.push(difference);
}
});
}
calcThreshold(origSeries, 15000);
var myConfig = {
"type": "bar",
"stacked": true,
"stack-type": "normal",
"background-color": "#FFFFFF",
"title": {
"text": "Mobile OS Sales - ",
"font-family": "arial",
"x": "40px",
"y": "5px",
"align": "left",
"bold": false,
"font-size": "16px",
"font-color": "#000000",
"background-color": "none"
},
"subtitle": {
"text": "<i>Since January 14, 2013</i>",
"font-family": "arial",
"x": "175px",
"y": "5px",
"align": "left",
"bold": false,
"font-size": "16px",
"font-color": "#7E7E7E",
"background-color": "none"
},
"plot": {
"bar-width": "25px",
"hover-state": {
"visible": false
}
},
"scale-x": {
"values": [
"JAN",
"FEB",
"MAR",
"APR",
"MAY",
"JUN",
"JUL",
"AUG",
"SEP",
"OCT",
"NOV",
"DEC"
],
"line-color": "#7E7E7E",
"tick": {
"visible": false
},
"guide": {
"visible": false
},
"item": {
"font-family": "arial",
"font-color": "#8B8B8B"
}
},
"scale-y": {
"values": "0:70000:10000",
"short": true,
"line-color": "#7E7E7E",
"tick": {
"visible": false
},
"guide": {
"line-style": "solid"
},
"item": {
"font-family": "arial",
"font-color": "#8B8B8B"
}
},
"series": [{
"values": series1,
"background-color": "#787878"
}, {
"values": series2,
"background-color": "#ff4900"
}],
"tooltip": {
"visible": false
}
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 500,
width: 725
});
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChart"></div>
+6
source to share