HighCharts Tech Tip

By Milosz Blek - July 05, 2017

So you have a website with tons of data but don’t have a visualization solution. HighCharts is a purely JavaScript based chart solution that may be the answer to your searching. It is compatible with all modern browsers. If you need a solution for school or your non-profit organization HighCharts is free to use. It offers line, spline, area, area spline, column, bar, pie, scatter, angular gauges, area range, area spline range, column range and polar chart types. Many of which can also be combined. It allows for multiple axes, tooltip point labels, export and print, and zooming. HighChart can have data supplied statically or dynamically through ajax. The GSA Carbon Footprint tool uses the Highcharts library to visualize carbon emissions data. The General Services Administration (GSA) developed the GSA Carbon Footprint Tool to help Federal Agencies calculate, report, and reduce their greenhouse gas (GHG) emissions as specified under Executive Order (EO) 13514. https://www.carbonfootprint.gsa.gov

Now that you’re sold let’s see some code. Let’s set up a basic line chart.

STEP 1 - You will need to import the library (or download it and import it from a local source). In this case we will be importing from a remote source.

<script src="https://code.highcharts.com/highcharts.js"></script>

<script src="https://code.highcharts.com/modules/exporting.js"></script>

STEP 2 - You will need a place to render the chart.

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

STEP 3 - The javascript that renders the chart.

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Yearly Salary',
            x: -20 //center
        },
        xAxis: {
            categories: ['2000', '2001', '2002', '2003', '2004', '2005',
                '2006', '2007', '2008', '2009', '2010', '2011']
        },
        yAxis: {
            title: {
                text: 'Dollars ($)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Jack',
            data: [30000, 31000, 32000, 33000, 34000, 35000, 36000, 37000, 38000, 39000, 40000, 41000]
        }, {
            name: 'Milo',
            data: [30250, 31250, 32250, 33250, 34250, 35250, 36250, 37250, 38250, 39250, 40250, 41250]
        }, {
            name: 'Gwen',
            data: [30500, 31500, 32500, 33500, 34500, 35500, 36500, 37500, 38500, 39500, 40500, 41500]
        }, {
            name: 'Brandy',
            data: [30750, 31750, 32750, 33750, 34750, 35750, 36750, 37750, 38750, 39750, 40750, 41750]
        }]
    });
});

You should have a chart like the one below.