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
ReplyDeleteResponsive web design aims for fluidity and flexibility. One of the techniques used to achieve this is by automatic image adjusting. responsive website designing
ReplyDeleteI like your post very much. It is very much useful for my research. I hope you to share more info about this. Keep posting angular js course
ReplyDelete