JavaScript
// Highcharts opened in Highslide
createGraph({
chart: {
renderTo: 'container',
defaultSeriesType: 'line',
margin: [50, 150, 60, 80],
events: {}
},
title: {
text: 'Monthly Average Temperature',
style: {
margin: '10px 100px 0 0' // center it
}
},
subtitle: {
text: 'Click the chart for larger view',
style: {
margin: '0 100px 0 0' // center it
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
title: {
text: 'Month'
}
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + '°C';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100
},
series: [{
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
function createGraph(chartOptions) {
// open the basic chart
$(document).ready(function () {
// set the click event for the parent chart
chartOptions.chart.events.click = function () {
hs.htmlExpand(document.getElementById(chartOptions.chart.renderTo), {
width: 9999,
height: 9999,
allowWidthReduction: false,
preserveContent: false
}, {
chartOptions: chartOptions
});
};
var chart = new Highcharts.Chart(chartOptions);
});
}
// Create a new...