Factmint Charts
Factmint Charts allows you to create interactive data visualizations, which can be rendered from an HTML table or directly from JSON. For more information and live examples, see http://factmint.com/charts-overview/. This repo includes the charts as well as the API that you can use to create your own (see the /api directory).
Getting started
-
Download:
bower install factmint-chartsor manually download raw CSS and JS from the dist folder -
Create a table with a classname of
fm-[visualisation name]and include the CSS and JS in your document.
e.g.
<table class="fm-pie">
<thead>
<tr>
<th>Product</th>
<th>Units sold</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ice cream</td>
<td>1500</td>
</tr>
<tr>
<td>Umbrellas</td>
<td>6500</td>
</tr>
<tr>
<td>Horse shoes</td>
<td>4200</td>
</tr>
</tbody>
</table>
<link rel="stylesheet" href="pie.min.css">
<script async src="pie.min.js"></script>
For the two choropleths and the pie chart, you also have the option of using a Javascript object/JSON rather than an HTML table:
index.html
<html>
<head>
<title>Pie chart</title>
<link rel="stylesheet" href="../../../../dist/choropleth-uk-constituencies.min.css">
<script defer src="../../../../dist/choropleth-uk-constituencies.min.js"></script>
<script defer src="main.js"></script>
</head>
main.js
var data = [
{
"title": "Rowing",
"value": 27
},
{
"title": "Kayaking",
"value": 18
},
{
"title": "Cycling",
"details": "Lorem ipsum",
"value": 50
}
];
window.factmint.pie(data);
Building a chart
First, clone this repository with git clone https://github.com/factmint/Charts.git. Then run npm install from the project root.
To see running examples, navigate to the directory of a given chart in the terminal and (if it's the first time) npm install and grunt install. Finally, run grunt serve from the project root (not the chart directory).
e.g.
cd choropleth-uk-constituencies
npm install && grunt install
cd ../../
grunt serve
This will start a web server. You should see a message telling you which port it is running on (e.g. "Started connect web server on http://0.0.0.0:15002"). You can now navigate to http://locahost:15002 (the port number will be different if 15002 was not open when you ran grunt serve, so be sure to check), where you will see a directory listing. If you look in the examples/unbuilt/ directory, you will find example use cases.
If you run grunt build from the chart's root directory, it will create or update three files in the /dist/ directory: a minified standalone script, a minified CSS file, and a text file containing all of the available options for the given chart. You can see examples using the built script under examples/built/ in the chart's directory.
Tests
To see unit tests for the API, navigate to api/test in your browser.
Charts
Bubble Chart
(See http://factmint.com/documentation/bubble-chart/)
Candlestick Chart
(See http://factmint.com/documentation/candlestick-chart/)
Choropleth (UK constituencies)
(See http://factmint.com/documentation/choropleth/)
Choropleth (world continents)
(See http://factmint.com/documentation/world-countries-choropleth/)
Column/Bar Chart
(See http://factmint.com/documentation/column-bar-chart/)
Doughnut Chart
(See http://factmint.com/documentation/doughnut-chart/)
Line Chart
(See http://factmint.com/documentation/line-chart/)
Line Over Bar Chart
(See http://factmint.com/documentation/line-over-column-chart/)
Pictorial Bar Chart
(See http://factmint.com/documentation/pictorial-bar-chart/)
Pie Chart
(See http://factmint.com/documentation/pie-chart/)
Scatter Graph
(See http://factmint.com/documentation/scatter-graph/)
Stacked Area Chart
(See http://factmint.com/documentation/stacked-area-chart/)
Stacked Column Bar Chart
(See http://factmint.com/documentation/stacked-column-bar-chart/)
API
The /api directory contains the API, which can be used to build your own chart. See https://github.com/factmint/Charts/blob/master/api/README.md for more information.