Creating Your First Pie Chart Using HighCharts

HighCharts is a powerful and robust JavaScript library for creating data visualization on your website. In this article we will learn to create a basic and simple pie chart. HighCharts is free for personal use and can be downloaded here.

The Set Up
Once you’ve download HighCharts, you can add a JavaScript reference to it locally. Or you can add a reference to the hosted script like below. You will need to reference jQuery as well.

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

 

The HTML

On your web page, add a div where you want your chart to go. Here we name it pieChartContainer, and we set the height and width to 500 pixels each.

<div id="pieChartContainer" style="height: 500px; width: 500px;"></div>

 

The JavaScript
Here we will use jQuery to initialize the chart.

$(function () {
    $('#pieChartContainer').highcharts({
        title: {
            text: 'Screen Resolution Percentage'
        },
        series: [{
            type: 'pie',
            data: [
                ['1366×768', 20.24],
                ['1920×1080', 7.85],
                ['1024×768', 6.37],
                ['1280×800', 5.60],
                ['768×1024', 5.29],
                ['1280×1024', 5.12],
                ['360×640', 4.78],
                ['1600×900', 4.69],
                ['1440×900', 4.39],
                ['320×568', 4.06]
            ]
        }]
    });
});

Keep in mind this is a basic chart. HightCharts charts are fully customizatable with options. For more details, you can visit the HighCharts documentation page.

 

The Live Demo

Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Pin on PinterestShare on RedditShare on StumbleUponShare on TumblrDigg this

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *