Quick chart using a JavaScript library called HighChart.
Online demo: http://stevenhollidge.com/blog-source-code/javascriptchart/
Source code
<html>
<head>
<title>JavaScript chart</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<script src='http://code.highcharts.com/highcharts.js'></script>
<script src='http://code.highcharts.com/modules/exporting.js'></script>
<script>
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Crystal Palace vs Millwall',
x: -20 //center
},
subtitle: {
text: 'Source: http://www.crystalpalace-mad.co.uk',
x: -20
},
xAxis: {
categories: ['83', '84', '85', '86', '87', '88', '89', '90', '91', '92', '93', '94', '95', '96', '97', '98', '99', '00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13']
},
yAxis: {
title: {
text: 'League Position'
},
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: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Crystal Palace',
data: [35, 38, 35, 29, 30, 30, 27, 15, 3, 10, 20, 21, 19, 23, 26, 20, 34, 35, 41, 30, 34, 26, 18, 26, 32, 25, 35, 41, 40, 37, 24]
}, {
name: 'Millwall',
data: [61, 53, 46, 39, 40, 25, 10, 20, 29, 39, 27, 23, 32, 42, 58, 62, 54, 49, 45, 24, 29, 30, 30, 43, 54, 61, 49, 47, 29, 36, 40]
}]
});
});
});
</script>
<head>
<body>
<div id='container' style='min-width: 400px; height: 400px; margin: 0 auto'></div>
</body>
</html>
No comments:
Post a Comment