CODEWITHSUNDEEP
javascriptchartsstacked-chartzingchart
quorious
quorious

Reputation: 84

stacked chart with ZingChart

I'm making stacked bar chart with ZingChart library. Here is a sample http://jsfiddle.net/api/post/library/pure/ but suppose i need a limit , e.g the color should only change if it exceeds 15k. Is that 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>
Sample Data : Date Limit Total Normal Excess 14-Jul 200 170 170 0 14-Aug 200 100 100 0 14-Sep 200 200 200 0 14-Oct 200 280 200 80 14-Nov 200 300 200 100 14-Dec 200 310 200 110 15-Jan 200 330 200 130 15-Feb 200 340 200 140 15-Mar 400 380 380 0 15-Apr 400 390 390 0 15-May 400 420 400 20 15-Jun 400 440 400 40 15-Jul 400 460 400 60 15-Aug 400 480 400 80 15-Sep 400 500 400 100 15-Oct 400 520 400 120 15-Nov 400 540 400 140 15-Dec 400 560 400 160 16-Jan 400 580 400 180

Sample data

Upvotes: 3

Views: 642

Answers (1)

Jailbot
Jailbot

Reputation: 2608

I think this might be what you're looking for. Feel free to let me know if not.

This demo assumes that you start with one array of totals like this: 

var origSeries = [10316,23988,39643,40708,9857,18558,42194,28130,26569,23148,31424,41053,27838,38383,36105,47613,35903,40775,37769,24143];

We'll programmatically split these into two series: one that is below threshold and one that is above. Then we set the desired background color on each series.

Run the snippet to see it in action. Remember, you could do this an infinite number of times to create additional stacks using different thresholds.

Again, I'm on the ZC team so don't hesitate to reach out 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>

Upvotes: 6

Related Questions