Highcharts

This is a sample pie chart as deployed with Highcharts

Layouts:

• Pie Chart
• Line Chart

Include the Highcharts JavaScript file to the page

<script type="text/javascript" src="assets/plugins/highcharts/js/highcharts.js"></script>

Pie Chart

HTML

<div id="pie-chart"></div>

JavaScript

$('#pie-chart').highcharts({
        chart: {
        type: 'pie'

        },
        colors: ['#082f4d', '#009d96', '#ef4923', '#F7961D'],

        title: {
        text: 'Browser Usage'
        },
        series: [{
        name: 'Brands',
        colorByPoint: true,
        data: [{
        name: 'MS IE',
        y: 46.33
        }, {
        name: 'Safari',
        y: 20.09
        }, {
        name: 'Opera',
        y: 18.58
        } , {
        name: 'Chrome',
        y: 15
        }]
        }]
        });

Line Chart

HTML

<div id="line-chart"></div>

JavaScript

$('#line-chart').highcharts({
        chart: {
        type: 'line'
        },
        title: {
        text: 'Fruit Consumption'
        },
        colors: ['#009D96', '#F7961D'],
        xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
        title: {
        text: 'Fruit eaten'
        }
        },
        series: [{
        name: 'Jane',
        data: [1, 0, 4]
        }, {
        name: 'John',
        data: [5, 7, 3]
        }]
        });