$(function () { // Data is expected to be in the form of {label: value, label: value, label: value} window.TopLevelChart = { displayChart: function (data, title, yAxisTitle, chartType, options) { var options = options || {}; var chartData = TopLevelChart.formatData(data); $('#container').highcharts({ chart: { type: chartType, backgroundColor: options['chart-backgroundColor'] || 'white' }, title: { text: title }, subtitle: { text: options['subtitle-text'] || '' }, xAxis: { type: options['xAxis-type'] || 'category' }, yAxis: { min: 0, title: { text: yAxisTitle } }, plotOptions: { series: { borderWidth: options['plotOptions-series-borderWidth'] || 0, dataLabels: { enabled: options['plotOptions-series-dataLabel-enabled'] || true, format: options['plotOptions-series-dataLabel-format'] || '{point.y:,.0f}' } } }, legend: { enabled: options['legend-enabled'] || false }, tooltip: { headerFormat: options['tooltip-headerFormat'] || '', pointFormat: options['tooltip-pointFormat'] || '{point.name}: {point.y:,.2f}
' }, series: [{ point: { events: { click: options['series-point-events-click'] || '' } }, colorByPoint: options['series-colorByPoint'] || true, data: chartData }] }); }, formatData: function (data) { var chartData = []; $.each(data, function(key, value){ chartData.push({ name: key, y: value }); }); return chartData; } } });