Highchart stack column & line Combined using json

<!DOCTYPE html>
<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta charset=”utf-8″ />
<title>Highcharts data from JSON Response</title>
<style>
body{
margin-top: 30px;
margin-left:40px;
}
</style>
http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
http://code.highcharts.com/highcharts.js

$(function () {

$.getJSON(‘http://localhost:8000/Project/jay/chart.php&#8217;, function(data) {
/*
var data2 =
[{“type”:”column”,”name”:”Circuit 1″,”data”:[1,2,3,4]},{“type”:”column”,”name”:”Circuit 2″,”data”:[10,20,30,40]}];
var data3 = [{“type”:”column”,”name”:”Circuit 1″,”data”:[1,2,3,4]}];
console.log(data3);
console.log(data2);
*/

$(‘#container’).highcharts({
title: {
text: ‘Combination chart – stacked BAR and line graphs’
},
xAxis: {
categories: [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’]
},
labels: {
items: [{
html: ‘Energy and Power Consumption’,
style: {
left: ’50px’,
top: ’18px’,
color: (Highcharts.theme && Highcharts.theme.textColor) || ‘black’
}
}]
},
plotOptions: {
column: {
stacking: ‘normal’,
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || ‘white’,
style: {
textShadow: ‘0 0 3px black’
}
}
}
},

series:data

});
});

});

</head>
<body>

Highcharts data load from a JSON using manual JSON Processing

</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s