Understanding and Using Highcharts for Data Representation

Sanchita Lobo


February 13th, 2015

ID-100246034

Thanks to the team at uAutoInsurance.com for this post on High Charts. The uAutoInsurance team analyzes car insurance rates with data at the micro local, demographic & vehicle level to give consumers & the industry insight into key factors driving auto insurance rates.

What are HighCharts?

HighCharts is an open-source js library that allows you to visually represent your data in a more user-readable and interactive fashion for your website or blog. Once you have HighCharts installed in your server, creating different types of graphs is a fairly simple task. The following tutorial should get you started on making these charts quickly.

Understanding Charts:

To get to grasp with how Highcharts works it is important to understand the various parts or concepts of a chart.

Below is an image and a description of the main concepts in a chart:

ac

CHART TYPES

Highcharts support a range of different chart types so data can be displayed in a meaningful way. Highcharts supports line, spline, area, areaspline, column, bar, pie, scatter, gauge, arearange, areasplinerange and columnrange chart types.

To set a default chart type use:

chart: {    type: ‘line’}

Several chart types can also be combined in one chart using the type attribute in series to set different chart types for each series:

series: [{    type: ‘line’
data: []
},{    type: ‘column’    data: []}]

We have given three example charts using HighChart with Car Insurance Data from uAutoInsurance.com

LINE CHART

The line chart is represented by a series of data points connected with a straight line. Line charts are most often used to visualize data that changes over time.

Here is a line chart of Car insurance rates for the Top 10 cities in the US. For example, Los Angeles Car Insurance rates are $2076, followed by 9 cities.

aca

acad

Code:

Import .js files highcharts.js and exporting.js as

<script src=”http://code.highcharts.com/highcharts.js”></script>

<script src=”http://code.highcharts.com/modules/exporting.js”></script>

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

$(function () {

   $(‘#container’).highcharts({

       title: { text: ‘Average Auto Insurance Rates’,  x: -20 //center  },

       subtitle: {text: ‘Source: uautoinsurance.com’, x: -20 },

       xAxis: {  categories: [‘Los Angeles’, ‘Houston’, ‘Phoenix’, ‘Chicago’, ‘Brooklyn’, ‘San Diego’, ‘Las Vegas’,

               ‘San Jose’, ‘Philadelphia’, ‘San Antonio’]  },

       yAxis: { title: { text: ‘Rates ($)’  },

       plotLines: [{ value: 0,  width: 1, color: ‘#808080’ }] },

       tooltip: {valueSuffix: ‘$’  },

       legend: {   layout: ‘vertical’,align: ‘right’,  verticalAlign: ‘middle’,  borderWidth: 0 },

       series: [{ name: ‘Auto Insurance Rate’,  data: [2076, 2076, 1234, 1099, 4133, 1330, 1869, 1377, 2276, 1375]        }]    });

});

COLUMN AND BAR CHART

A column chart displays data as vertical bars.The bar chart is exactly the same as a column chart, but with one difference- the x-axis and y-axis are interchanged.

Here is a bar chart for the insurance rates in Los Angeles City by Segment:

acade

PIE CHART

A pie chart is a circular chart divided into segments which is proportional to the quantity it represents.

Here is a Pie chart which represents all insurance companies market share in  US for the year 2012:

academ

The pie chart would have the same options as a series.

Code:

$(function () {

$(‘#container’).highcharts({

chart: {

plotBackgroundColor: null,

plotBorderWidth: null,

plotShadow: false

},

title: {

text: ‘US Market Share Breakdown (2012)’

},

tooltip: {

pointFormat: ‘{series.name}: <b>{point.percentage:.1f}%</b>’

},

plotOptions: {

pie: {

allowPointSelect: true,

cursor: ‘pointer’,

dataLabels: {

enabled: true,

format: ‘<b>{point.name}</b>: {point.percentage:.1f} %’,

style: {

color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || ‘black’

}

}

}

},

series: [{

type: ‘pie’,

name: ‘Market share’,

data: [

[‘others’,   45.0],

[‘StateFarm’,  18],

{

name: ‘All State’,

y: 10,

sliced: true,

selected: true

},

[‘Progressive’,    8.5],

[‘GEICO’,     10],

[‘NationWide’,   4],

[‘Liberty Mutual’, 5]

]

}]

});

});

 

Conclusion:

The HighCharts library is available for free (for non-commercial purposes only), and is an easy-to-use tool for data representation, as well as making your web space more aesthetically appealing. It is available both in the JavaScript Frameworks and has Browser Versions.

Image attached: credit www.freedigitalphotos.net Image by iosphere

Related Articles:

Data Visualization in Analytics

5 Popular Tools for Data Visualization

Using Google Fusion Tables Maps: Home Insurance Case Study

Interested in learning about other Analytics and Big Data tools and techniques? Click on our course links and explore more.
Jigsaw’s Data Science with SAS Course – click here.
Jigsaw’s Data Science with R Course – click here.
Jigsaw’s Big Data Course – click here.


Share with:

FacebookTwitterGoogleLinkedIn


RECOMMENDED FOR YOU

Don't Forget To Sign Up For Exclusive Updates!

POST COMMENT