Active charts using Highcharts

Active charts using Highcharts

5 88750
Active charts using Highcharts

Active charts using Highcharts

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.

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:

<!-- add scripts -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/gray.js"></script>
<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:

<!-- Chart type switchers -->
<div class="actions">
    <button class="switcher" id="column">column</button>
    <button class="switcher" id="area">area</button>
    <button class="switcher" id="line">line</button>
    <button class="switcher" id="spline">Spine</button>
    <button class="switcher" id="areaspline">areaspline</button>
</div>
<!-- two different charts -->
<div id="chart_1" class="chart"></div>
<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):

.actions, .chart {
    margin: 15px auto;
    width: 820px;
}
button {
    background: none repeat scroll 0 0 #E3E3E3;
    border: 1px solid #BBBBBB;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 1px 1px #F6F6F6 inset;
    color: #333333;
    font: bold 12px;
    margin: 0 5px;
    padding: 8px 0 9px;
    text-align: center;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 150px;
}
button:hover {
    background: none repeat scroll 0 0 #D9D9D9;
    box-shadow: 0 0 1px 1px #EAEAEA inset;
    color: #222222;
    cursor: pointer;
}
button:active {
    background: none repeat scroll 0 0 #D0D0D0;
    box-shadow: 0 0 1px 1px #E3E3E3 inset;
    color: #000000;
}

Step 3. JS

Finally, let’s check our initialize javascript code:

js/main.js

// Change Chart type function
function ChangeChartType(chart, series, newType) {
    newType = newType.toLowerCase();
    for (var i = 0; i < series.length; i++) {
        var srs = series[0];
        try {
            srs.chart.addSeries({
                type: newType,
                stack: srs.stack,
                yaxis: srs.yaxis,
                name: srs.name,
                color: srs.color,
                data: srs.options.data
            },
            false);
            series[0].remove();
        } catch (e) {
        }
    }
}
// Two charts definition
var chart1, chart2;
// Once DOM (document) is finished loading
$(document).ready(function() {
    // First chart initialization
    chart1 = new Highcharts.Chart({
     chart: {
        renderTo: 'chart_1',
        type: 'column',
        height: 350,
     },
     title: {
        text: 'Tools developers plans to use to make html5 games (in %)'
     },
     xAxis: {
        categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
     },
     yAxis: {
        title: {
           text: 'Interviewed'
        }
     },
     series: [{
        name: 'Dev #1',
        data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
     }, {
        name: 'Dev #2',
        data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
     }, {
        name: 'Dev #3',
        data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
     }]
    });
    // Second chart initialization (pie chart)
    chart2 = new Highcharts.Chart({
        chart: {
            renderTo: 'chart_2',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            height: 350,
        },
        title: {
            text: 'Pie chart diagram for the first developer'
        },
        tooltip: {
            pointFormat: '<b>{point.percentage}%</b>',
            percentageDecimals: 1
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
         series: [{
         type: 'pie',
            name: 'Dev #1',
            data: [
                ['Processing.js', 5],
                ['Impact.js', 10],
                ['Other', 20],
                ['Ease.js', 22],
                ['Box2D.js', 25],
                ['WebGL', 28],
                ['DOM', 30],
                ['CSS', 40],
                ['Canvas', 80],
                ['Javascript', 90]
            ]
         }]
    });
    // Switchers (of the Chart1 type) - onclick handler
    $('.switcher').click(function () {
        var newType = $(this).attr('id');
        ChangeChartType(chart1, chart1.series, newType);
    });
});

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

SIMILAR ARTICLES

Understanding Closures

0 22905

5 COMMENTS

  1. Is it possible just to use a spine chart without the buttons and with 1 line, i was searching for a solution but i could not find it
    Thank you for a quick reply

    • Hi ElfenLied,
      Of course this is possible, you always can hide legend (showInLegend: false), and you always can not to draw these buttons (mainly – this is part of our page layout).

Leave a Reply