Single level gauge chart
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 PieChart({
"pie": {
"startAngle": -3.141592653589793,
"endAngle": 0,
"innerRadius": 0.6
},
"interaction": {
"mode": "select",
"resizing": {
"enabled": false
}
},
"slice": {
"expandableMarkStyle": {
"lineWidth": 0
}
},
"container": "demo",
"data": [
{
"url": "/dvsl/data/extra/gauge.json"
}
],
"toolbar": {
"fullscreen": true,
"enabled": true
}
})
Data
Data
Download Data
{
"subvalues": [
{
"name": "Alpha",
"value": "200",
"subvalues": [
{
"name": "Alpha - 1",
"value": "10"
},
{
"name": "Alpha - 2",
"value": "65"
},
{
"name": "Alpha - 3",
"value": "35"
},
{
"name": "Alpha - 4",
"value": "5"
},
{
"name": "Alpha - 5",
"value": "85"
}
]
},
{
"name": "Beta",
"value": "300",
"subvalues": [
{
"name": "Beta - 1",
"value": "100"
},
{
"name": "Beta - 2",
"value": "30"
},
{
"name": "Beta - 3",
"value": "100"
},
{
"name": "Beta - 4",
"value": "70"
}
]
}
]
}