Multiple level span chart with categorical data
JavaScript span chart with drill down where columns may have specific start and end points. Each category has two values in 'data' which are stacked. The first series (in this case "offset") is used to create blank space from the Y-Axis zero point (using 'fillColor: "transparent"), and the second series ("value") has a solid 'fillColor', which allows the green columns to start only after "offset".
HTML
HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>
CSS
CSS
//No CSS for this example
JavaScript
JavaScript
chart= new FacetChart({
"series": [
{
"name": "",
"data": {
"field": "offset"
},
"stack": "default",
"style": {
"fillColor": "transparent"
},
"type": "columns"
},
{
"name": "Data",
"data": {
"field": "value"
},
"stack": "default",
"style": {
"fillColor": "#2fc32f"
},
"type": "columns"
}
],
"style": [],
"container": "demo",
"data": [
{
"url": "/dvsl/data/extra/span-categorical-multilevel.json"
}
],
"toolbar": {
"fullscreen": true,
"enabled": true
},
"interaction": {
"resizing": {
"enabled": false
}
}
})
Data
Data
Download Data
{
"id": "",
"subvalues": [
{
"id": "category1",
"name": "Category 1",
"value": 445,
"offset": 30,
"subvalues": [
{
"name": "C1, Level #2 Category 1",
"value": 20,
"offset": 50
},
{
"name": "C1, Level #2 Category 2",
"value": 50,
"offset": 70
},
{
"name": "C1, Level #2 Category 3",
"value": 40,
"offset": 10
}
]
},
{
"id": "category2",
"name": "Category 2",
"value": 210,
"offset": 150,
"subvalues": [
{
"name": "C2, Level #2 Category 1",
"value": 200,
"offset": 150
},
{
"name": "C2, Level #2 Category 2",
"value": 80,
"offset": 120
},
{
"name": "C2, Level #2 Category 3",
"value": 40,
"offset": 70
}
]
},
{
"id": "category3",
"name": "Category 3",
"value": 145,
"offset": 70,
"subvalues": [
{
"name": "C3, Level #2 Category 1",
"value": 40,
"offset": 100
},
{
"name": "C3, Level #2 Category 2",
"value": 150,
"offset": 30
}
]
},
{
"id": "category4",
"name": "Category 4",
"value": 385,
"offset": 220,
"subvalues": [
{
"name": "C4, Level #2 Category 1",
"value": 100,
"offset": 180
},
{
"name": "C4, Level #2 Category 2",
"value": 180,
"offset": 40
},
{
"name": "C4, Level #2 Category 3",
"value": 50,
"offset": 70
}
]
},
{
"id": "category5",
"name": "Category 5",
"value": 150,
"offset": 20,
"subvalues": [
{
"name": "C5, Level #2 Category 1",
"value": 60,
"offset": 60
},
{
"name": "C5, Level #2 Category 2",
"value": 220,
"offset": 100
},
{
"name": "C5, Level #2 Category 3",
"value": 150,
"offset": 40
}
]
},
{
"id": "category6",
"name": "Category 6",
"value": 150,
"offset": 370,
"subvalues": [
{
"name": "C6, Level #2 Category 1",
"value": 20,
"offset": 90
},
{
"name": "C6, Level #2 Category 2",
"value": 80,
"offset": 80
},
{
"name": "C6, Level #2 Category 3",
"value": 70,
"offset": 0
}
]
}
]
}