Responsive Highchart

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>

Demo

Play in fiddle

Related Posts

1. Save highchart as binary image

2. Communicate with controllers in angular js

3. Angular routing

4. Rating Stars using angular js Directive concept

5. Loop concept in angular js

6. Filtering concept in angular js