The example shows how the drill down functionality of the chart can be used.
For detailed implementation, please take a look at the HTML code tab.
<!DOCTYPE html>
<html>
<head>
<title>Drill-Down Example - JavaScript Chart by dvxCharts</title>
<link rel="stylesheet" type="text/css" href="../../css/dvxCharts.chart.min.css" />
<link rel="stylesheet" type="text/css" href="../../themes/base/styles.css" />
<script src="../../js/dvxCharts.chart.min.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
.example-container {
width: 100%;
max-width: 500px;
height: 300px;
}
</style>
<style>
.revenuSeries .dvx-chart-series-item {
cursor: pointer;
}
</style>
<script lang="javascript" type="text/javascript">
var data = [['2010', 1530], ['2011', 2280], ['2012', 3030]];
var subData1 = [['Q1', 315], ['Q2', 360], ['Q3', 405], ['Q4', 450]];
var subData2 = [['Q1', 495], ['Q2', 540], ['Q3', 600], ['Q4', 645]];
var subData3 = [['Q1', 690], ['Q2', 735], ['Q3', 780], ['Q4', 825]];
var subData = [subData1, subData2, subData3];
var initialState = {
title: {
text: 'Revenue per Year'
},
animation: {
duration: 1
},
series: [
{
title: 'Revenue',
class: 'revenuSeries',
type: 'column',
data: data
}
]
};
var chart = new dvxCharts.Chart(initialState);
chart.write('container');
chart.addEventListener('dataPointMouseDown', function (event, data) {
if (chart.getState().title.text != 'Revenue per Year') {
return;
}
var newData = subData[data.index];
chart.setState({
title: {
text: 'Revenue per Quarter'
},
animation: {
duration: 1
},
series: [
{
title: 'Revenue',
type: 'column',
data: newData
}
]
});
});
function contextMenu(e) {
if (chart.getState().title.text === 'Revenue per Year') {
return;
}
chart.setState(initialState);
e.preventDefault();
return false;
};
</script>
</head>
<body>
<div id="container" class="example-container" oncontextmenu="contextMenu(event)">
</div>
</body>
</html>