Highcharts is a very good option for creating Interactive javascript charts for your webpage. Highstock is an another advanced option of highstock. Highcharts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types.
HTML
<div id="chartcontainer" width='100%'></div>
Javascript
<script>
var chart1; // globally available
$(document).ready(function () {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'chartcontainer',
type: 'column' // change with your choice
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
// Should be replace with JSON
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{ //Should be replace with JSON
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
Include highchart.js
<script src="http://code.highcharts.com/highcharts.js"></script>
Related Posts
1. Save highchart as binary image
2. Communicate with controllers in angular js
4. Rating Stars using angular js Directive concept
6. Filtering concept in angular js
How is this responsive? Width changes but height never changes. -1
ReplyDeletenice, thank you!
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteNice! that solved my problem, thanks
ReplyDelete