Quite good looking graph derived from d3.js http://c3js.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

169 lines
4.5 KiB

var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
],
selection: {
enabled: true
}
}
});
var defaultMessage = $('#message').html(), currentIndex = 0, timer, duration = 1500, demos = [
function () {
chart.load({
columns: [['data2', 100, 30, 200, 320, 50, 150, 230, 80, 150]]
})
setMessage('Load data2');
},
function () {
chart.load({
columns: [['data3', 70, 90, 170, 220, 100, 110, 130, 40, 50]]
})
setMessage('Load data3');
},
function () {
chart.select(['data1'], [2]);
setMessage('Select point for index 2 of data1');
},
function () {
chart.select(['data1'], [4,6]);
setMessage('Select point for index 4,6 of data1');
},
function () {
chart.unselect();
setMessage('Unselect points');
},
function () {
chart.focus('data2');
setMessage('Focus on data2');
},
function () {
chart.focus('data3');
setMessage('Focus on data3');
},
function () {
chart.revert();
setMessage('Defocus');
},
function () {
chart.load({
columns: [['data1', 300, 230, 400, 520, 230, 250, 330, 280, 250]]
})
setMessage('Update data1');
},
function () {
chart.load({
columns: [['data2', 30, 50, 90, 120, 40, 50, 80, 70, 50]]
})
setMessage('Update data2');
},
function () {
chart.regions([{start:1,end:3}]);
setMessage('Add region from 1 to 3');
},
function () {
chart.regions.add([{start:6}]);
setMessage('Add region from 6 to end');
},
function () {
chart.regions([]);
setMessage('Clear regions');
},
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
setMessage('Add x grid lines for 1, 4');
},
function () {
chart.ygrids.add([{value: 450, text:'Label 450'}]);
setMessage('Add y grid lines for 450');
},
function () {
chart.xgrids.remove({value: 1});
chart.xgrids.remove({value: 4});
setMessage('Remove grid lines for 1, 4');
},
function () {
chart.ygrids.remove({value: 450});
setMessage('Remove grid line for 450');
},
function () {
chart.transform('bar');
setMessage('Show as bar chart');
},
function () {
chart.groups([['data2','data3']]);
setMessage('Grouping data2 and data3');
},
function () {
chart.groups([['data1', 'data2', 'data3']]);
setMessage('Grouping data1, data2 and data3');
},
function () {
chart.groups([['data2', 'data3']]);
chart.transform('line', 'data1');
setMessage('Show data1 as line');
},
function () {
chart.unload({
ids: 'data3'
});
setMessage('Unload data3');
},
function () {
chart.unload({
ids: 'data2'
});
setMessage('Unload data2');
},
function () {
chart.flow({
columns: [
['data1', 390, 400, 200, 500]
],
duration: 1000,
});
setMessage('Flow 4 data');
},
function () {
// wait for end of transition for flow
},
function () {
chart.flow({
columns: [
['data1', 190, 230]
],
});
setMessage('Flow 2 data');
},
function () {
// wait for end of transition for flow
},
function () {
chart.transform('line', ['data1', 'data2', 'data3']);
chart.groups([['data1'], ['data2'], ['data3']]);
chart.load({
columns: [['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]]
})
setMessage('Starting Demo..');
}
];
function setMessage(message) {
document.getElementById('message').innerHTML = '<a id="demoMessage" class="button small secondary" onclick="stopDemo();" title="Stop Demo" onclick="stopDemo();">'+message+'</button>';
// $('#demoMessage').tooltip('toggle');
}
function startDemo() {
setMessage('Starting Demo..');
timer = setInterval(function(){
if (currentIndex == demos.length) currentIndex = 0;
demos[currentIndex++]();
}, duration);
}
function stopDemo() {
clearInterval(timer);
document.getElementById('message').innerHTML = defaultMessage;
}
;