JavaScript – highcharts.js chart library – part 001.

By | 13/02/2016

This library allow us to make charts for our data and infos. You can download it from code.highcharts.com.
Also you need to use modules if you want to export the chart like image, by using exporting.js from same website.
In this example the source code is very simple just you need to add it into your html5 file and set the data and settings for title, series. As can you see the series and categories has same number of elements. You need to put under xAxis and also to use curly brackets to set the intervals.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Highmaps Example 1</title>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>
<style type=”text/css”>
#container {
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}
</style>
<script src=”https://code.highcharts.com/highcharts.js”></script>
<script src=”https://code.highcharts.com/modules/exporting.js”></script>
<div id=”container”></div>
</head>
<body>
<script type=”text/javascript”>
Highcharts.chart(‘container’, {
title: {
text: ‘2015 – 2016 ‘,
},
//
subtitle: {
text: ‘inflation’
},
xAxis: {
categories: [‘2015 T1’, ‘2015 T2’, ‘2015 T3’, ‘2015 T4’, ‘2016 T1’]
},
series: [{ name:”inflation”,
data: [0.79, -1.55, -1.73, -0.93, -3.0],
type: ‘column’
}]
});</script>
</body>
</html>

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.