Back

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".

Documentation Open in JSFiddle
Start Free Trial Purchase

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 
{
    "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
                }
            ]
        }
    ]
}
Download Data