Multiple level span chart with categorical data
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
}
]
}
]
}