1- First of all place JS file in JS folder.
jquery-1.11.0.min.js
highcharts.js
exporting.js
2- Create an index.php file in main directory.
3- Place below Javascript code under the head tag.
<script>
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Temperature',
x: -20 //center
},
subtitle: {
//text: 'Source: IndiaClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: 'C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'New Delhi',
data: [18.0, 20.9, 30.5, 34.5, 40.2, 42.5, 44.2, 45.5, 40.3, 35.3, 28.9, 29.6]
}, {
name: 'Mumbai',
data: [29.2, 29.8, 30.7, 32.3, 35.0, 37.0, 39.8, 40.1, 39.1, 35.1, 29.6, 28.5]
}, {
name: 'Kolkata',
data: [27.9, 28.6, 30.5, 32.4, 35.5, 37.0, 38.6, 40.9, 38.3, 36.0, 29.9, 26.0]
}, {
name: 'Chennai',
data: [23.9, 24.2, 29.7, 30.5, 31.9, 35.2, 37.0, 39.6, 38.2, 35.3, 28.6, 24.8]
}]
});
});
</script>
4- Copy and Paste below code inside the body tag.
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
5- index.php would look like below code.
<!DOCTYPE html>
<html>
<head>
<title>Highchart Basic Line</title>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<script>
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Temperature',
x: -20 //center
},
subtitle: {
//text: 'Source: IndiaClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: 'C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'New Delhi',
data: [18.0, 20.9, 30.5, 34.5, 40.2, 42.5, 44.2, 45.5, 40.3, 35.3, 28.9, 29.6]
}, {
name: 'Mumbai',
data: [29.2, 29.8, 30.7, 32.3, 35.0, 37.0, 39.8, 40.1, 39.1, 35.1, 29.6, 28.5]
}, {
name: 'Kolkata',
data: [27.9, 28.6, 30.5, 32.4, 35.5, 37.0, 38.6, 40.9, 38.3, 36.0, 29.9, 26.0]
}, {
name: 'Chennai',
data: [23.9, 24.2, 29.7, 30.5, 31.9, 35.2, 37.0, 39.6, 38.2, 35.3, 28.6, 24.8]
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
6- You can also download complete code from basicline.zip file.
0 Comment(s)