Understanding and Using Highcharts for Data Representation

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:

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.

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:

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:

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