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
PEOPLE ALSO READ
- PotpourriJigsaw Academy is the #1 Analytics Training Institute in India
- Cyber SecurityElliptic Curve Cryptography: An Overview
- Data ScienceHow Is Data Science Changing Web Design?
- Business AnalyticsBusiness Analytics – Way To Your Dream Career!
- Cyber SecurityData Science & Cyber Security: 5 Reasons Why Digital Economy Cannot Do Without Them
