HighCharts and D3 are both data visualization tools that you can add to your website.
Highcharts is an open source Javascript library that provides all kinds of different charts you can use. It is supported by all modern browsers (even IE6+!) and mobile browsers. It does not require client-side plugins like Java or Flash. The HighCharts API allows you to update charts at any time after creation, so they can update as frequently as once per second.
See the demo page here. The demo page includes source code for each of the chart types, which is super useful!
You can install HighCharts directly or use npm. The quickest way is to simply include this code in your page's head:
<script src="http://code.highcharts.com/highcharts.js"></script>
If you are using npm, run:
npm install highcharts --save
and then require HighCharts:
var Highcharts = require('highcharts');
Don't forget to load the module after Highcharts is loaded:
require('highcharts/modules/exporting')(Highcharts);
To create a chart do:
Highcharts.chart('container', { /*Highcharts options*/ });
A chart can be added to any div on your webpage. Here is the code for creating a simple bar chart.
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
The API docs provide the full range of configurations options for each chart type.
HighCharts also has products called HighStock and HighMaps that allow you to create stock price charts and map-based charts. To use either of them, you must do the basic configuration for HighCharts and then add additional configuration for the other products. See the Docs for more detailed info.