Home » Tutorials

Active charts using Highcharts

Tutorials
Author Reading 11 min Views 72 Published by Modified by

If you are looking how to create active charts (or diagrams) with information – our new article is for you. I have browsed the web, and found one good and serious solution – Highcharts library. This is pure javascript library which offers interactive and intuitive charts. This library supports various of possible charts: area, line, spline, areaspline, pie, column and other. I think that this is the best way to produce information for viewers. In today’s demo I prepared several examples with different charts.

Contents
  1. Step 1. HTML
  2. Step 2. CSS
  3. css/main.css
  4. Step 3. JS
  5. js/main.js
  6. Conclusion
Live Demo

[sociallocker]

download in package

[/sociallocker]

Ok, let’s download the source files and start coding !

Step 1. HTML

In the beginning we have to add all the necessary scripts in the header section:

1 <!-- add scripts -->
2 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
3 <script src="js/highcharts.js"></script>
4 <script src="js/gray.js"></script>
5 <script src="js/main.js"></script>

This are jQuery library, highcharts, gray.js is a way to customize chart design. In our package you can see several more small javascript files: dark-blue.js, dark-green.js, grid.js and skies.js. All of them – different designs of charts. You can link one of them (instead current gray.js) to see different chart designs. The last one javascript file – main.js – our own file with initialize code. In our demonstration I prepared two different charts, plus – I added a possibility to change chart type on-fly for the first one chart, let’s look at the result html code:

01 <!-- Chart type switchers -->
02 <div class="actions">
03     <button class="switcher" id="column">column</button>
04     <button class="switcher" id="area">area</button>
05     <button class="switcher" id="line">line</button>
06     <button class="switcher" id="spline">Spine</button>
07     <button class="switcher" id="areaspline">areaspline</button>
08 </div>
09 <!-- two different charts -->
10 <div id="chart_1" class="chart"></div>
11 <div id="chart_2" class="chart"></div>

Step 2. CSS

css/main.css

There are no any special styles for our charts, but anyway, our demo contains a few customizations (certain width for chart plus customized buttons):

01 .actions, .chart {
02     margin: 15px auto;
03     width: 820px;
04 }
05 button {
06     background: none repeat scroll 0 0 #E3E3E3;
07     border: 1px solid #BBBBBB;
08     border-radius: 3px 3px 3px 3px;
09     box-shadow: 0 0 1px 1px #F6F6F6 inset;
10     color: #333333;
11     font: bold 12px;
12     margin: 0 5px;
13     padding: 8px 0 9px;
14     text-align: center;
15     text-shadow: 0 1px 0 #FFFFFF;
16     width: 150px;
17 }
18 button:hover {
19     background: none repeat scroll 0 0 #D9D9D9;
20     box-shadow: 0 0 1px 1px #EAEAEA inset;
21     color: #222222;
22     cursor: pointer;
23 }
24 button:active {
25     background: none repeat scroll 0 0 #D0D0D0;
26     box-shadow: 0 0 1px 1px #E3E3E3 inset;
27     color: #000000;
28 }

Step 3. JS

Finally, let’s check our initialize javascript code:

js/main.js

001 // Change Chart type function
002 function ChangeChartType(chart, series, newType) {
003     newType = newType.toLowerCase();
004     for (var i = 0; i < series.length; i++) {
005         var srs = series[0];
006         try {
007             srs.chart.addSeries({
008                 type: newType,
009                 stack: srs.stack,
010                 yaxis: srs.yaxis,
011                 name: srs.name,
012                 color: srs.color,
013                 data: srs.options.data
014             },
015             false);
016             series[0].remove();
017         } catch (e) {
018         }
019     }
020 }
021 // Two charts definition
022 var chart1, chart2;
023 // Once DOM (document) is finished loading
024 $(document).ready(function() {
025     // First chart initialization
026     chart1 = new Highcharts.Chart({
027      chart: {
028         renderTo: 'chart_1',
029         type: 'column',
030         height: 350,
031      },
032      title: {
033         text: 'Tools developers plans to use to make html5 games (in %)'
034      },
035      xAxis: {
036         categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
037      },
038      yAxis: {
039         title: {
040            text: 'Interviewed'
041         }
042      },
043      series: [{
044         name: 'Dev #1',
045         data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
046      }, {
047         name: 'Dev #2',
048         data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
049      }, {
050         name: 'Dev #3',
051         data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
052      }]
053     });
054     // Second chart initialization (pie chart)
055     chart2 = new Highcharts.Chart({
056         chart: {
057             renderTo: 'chart_2',
058             plotBackgroundColor: null,
059             plotBorderWidth: null,
060             plotShadow: false,
061             height: 350,
062         },
063         title: {
064             text: 'Pie chart diagram for the first developer'
065         },
066         tooltip: {
067             pointFormat: '<b>{point.percentage}%</b>',
068             percentageDecimals: 1
069         },
070         plotOptions: {
071             pie: {
072                 allowPointSelect: true,
073                 cursor: 'pointer',
074                 dataLabels: {
075                     enabled: false
076                 },
077                 showInLegend: true
078             }
079         },
080          series: [{
081          type: 'pie',
082             name: 'Dev #1',
083             data: [
084                 ['Processing.js', 5],
085                 ['Impact.js', 10],
086                 ['Other', 20],
087                 ['Ease.js', 22],
088                 ['Box2D.js', 25],
089                 ['WebGL', 28],
090                 ['DOM', 30],
091                 ['CSS', 40],
092                 ['Canvas', 80],
093                 ['Javascript', 90]
094             ]
095          }]
096     });
097     // Switchers (of the Chart1 type) - onclick handler
098     $('.switcher').click(function () {
099         var newType = $(this).attr('id');
100         ChangeChartType(chart1, chart1.series, newType);
101     });
102 });

In the beginning I prepared a function ‘ChangeChartType’ which will change type of our first chart on-fly. When we click at the buttons – it evokes onClick event, and we call the ‘ChangeChartType’ function and pass the value of ID attribute into this function (as a name of desired chart type). Now, please pay attention how we initialize Highcharts.Chart object. We have to define the object where it should render the chart, type, also we can define xAxis, yAxis and series (this is an array of source data for our chart). You can also follow this link to find official API reference for this library.

Live Demo

Conclusion

That is all for today. We have just developed a few really powerful charts with Highcharts. I’m sure that this material will be very useful for you. Good luck and welcome back.

Rate article
© 2025 Script Tutorials