Multidimensional Pivot Chart with ZingChart
I am trying to create a multidimensional glass bar chart using ZingChart. This is until I got:
For some reason, the image is not displayed. Link to it ( https://drive.google.com/file/d/0B14IyWv9zwZ9a0hWR0lXTDZQXzQ/view ).
In this example, each bar represents a Product (there are 3 products) and for each bar I want to show a breakdown by Region (there are 4 regions). Therefore, there should be up to 3 product bars for each year (for 3 products), then for each product bar up to 4 colors (for 4 regions).
While the bars themselves are correct, there are a few things the chart doesn't do as it should:
- As the legend shows, each region gets a different color for each product. There should only be 4 region colors that are reused from product to product, but in this case there are 12 color regions (3 products x 4 regions).
- I want to tag each bar to indicate which product each belongs to. This can be an extra label above the year label on the x-axis, or labels above each bar showing a product.
I searched for similar examples on the ZingChart website, but the stacked histograms were all "one". In Tableau, something like this would be very easy to do.
source to share
This can be done using ZingChart. I have included a live graph below that correctly configured your regions and your products. I've also included a legend that shows your 4 regions. Note that interactivity is disabled for the legend.
The key is using the "stack" attribute on the row. This way you can specify which stack you want the series to continue on.
var myChart = {
"graphset":
[
{
"type":"bar",
"title":{
"text":"Acme Product Sales"
},
"plotarea":{
},
"scaleX":{
"values":["2000","2001","2002","2003","2004"]
},
"scaleY":{
},
"plot":{
"stacked":true,
"adjust-layout":true
},
"legend":{
"toggle-action":"none",
"adjust-layout":true
},
"series":[
{
"values":[10,20,30,40,50],
"legend-text":"North 1",
"stack":1,
"background-color":"red"
},
{
"values":[10,20,30,40,50],
"legend-text":"South 1",
"stack":1,
"background-color":"blue"
},
{
"values":[10,20,30,40,50],
"legend-text":"East 1",
"stack":1,
"background-color":"green"
},
{
"values":[10,20,30,40,50],
"legend-text":"West 1",
"stack":1,
"background-color":"yellow",
"value-box":{
"text":"P 1",
"color":"black"
}
},
{
"values":[10,15,20,25,30],
"legend-text":"North 2",
"stack":2,
"background-color":"red",
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
},
{
"values":[10,15,20,25,30],
"legend-text":"South 2",
"stack":2,
"background-color":"blue",
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
},
{
"values":[10,15,20,25,30],
"legend-text":"East 2",
"stack":2,
"background-color":"green",
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
},
{
"values":[10,15,20,25,30],
"legend-text":"West 2",
"stack":2,
"background-color":"yellow",
"value-box":{
"text":"P 2",
"color":"black"
},
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
},
{
"values":[15,30,45,60,75],
"legend-text":"North 3",
"stack":3,
"background-color":"red",
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
},
{
"values":[15,30,45,60,75],
"legend-text":"South 3",
"stack":3,
"background-color":"blue",
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
},
{
"values":[15,30,45,60,75],
"legend-text":"East 3",
"stack":3,
"background-color":"green",
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
},
{
"values":[15,30,45,60,75],
"legend-text":"West 3",
"stack":3,
"background-color":"yellow",
"value-box":{
"text":"P 3",
"color":"black"
},
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
}
]
}
]
};
zingchart.render({
id: "myChart",
height: "300px",
width: "100%",
data: myChart
});
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChart"></div>
I'm on the ZingChart team, so please don't hesitate and contact support@zingchart.com and we can help you use our API to get the legend to properly enable and disable your series as needed.
source to share