jQuery - Highcharts basic bar chart
by pythondave
HTML
<script src="http://highcharts.com/js/testing-exporting.js"></script>
<div id="container"></div>
CSS
#container { width: 300px; height: 320px; }
JavaScript
CreateChart('column');
setInterval(function() { //switch the chart type every 5 seconds
var chartType = (chart.series[0].type == 'bar' ? 'column' : 'bar');
chart.destroy();
CreateChart(chartType);
}, 5000);
var chart;
function CreateChart(chartType) {
chart = new Highcharts.Chart({
chart: { renderTo: 'container' },
title: { text: 'House Competition' },
subtitle: { text: 'Bar chart for T3W1' },
credits: { enabled: false },
legend: { enabled:false },
exporting: { enableImages:true },
xAxis: { categories: ['<b>Orange</b>', '<b>Purple</b>', '<b>Red</b>'] },
yAxis: { title: { text: 'House Points' } },
series: [{
type: chartType, //'column' or 'bar' for quick switching
data: [
{y:673, color:'#' + 'FFA500'},
{y:837, color:'purple'},
{y:1134, color:'red'}]
}],
tooltip: {
formatter: function() {
return '<b>' + this.x + ':</b> ' + this.y + ' house points';
}
}
});
}