Tuesday 25 March 2014

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


4 comments :

  1. How is this responsive? Width changes but height never changes. -1

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. Nice! that solved my problem, thanks

    ReplyDelete