Documentation

Charts

All Light Blue charts are based on amazing D3.js library. Here is what D3 says about itself:

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

So it means that graphs are drawn with standard SVG and styled with CSS. You can customize all you like with techniques you already know.

There are two libraries used in Light Blue which work on top of D3.js:

• nvd3 - which is focused on developing re-usable charts and chart components for d3.js without taking away the power that d3.js gives to developer, and
• Rickshaw - a JavaScript toolkit for creating interactive time series graphs based on d3.js underneath. Rickshaw is used for displaying realtime data in Light Blue.

Top sources

Top sources is a nvd3's pie chart with a little bit of custom code which can be simply reused (stats.js).

It depends on following files:

lib/nvd3/nv.d3.custom.js
lib/nvd3/src/models/pie.js
lib/nvd3/src/models/legend.js
lib/nvd3/src/models/pieChartTotal.js

Bar Chart

Bar Chart is based on nvd3's multi-bar chart.

It depends on following files:

lib/nvd3/nv.d3.custom.js
lib/nvd3/src/models/axis.js
lib/nvd3/src/models/legend.js
lib/nvd3/src/models/multiBar.js
lib/nvd3/src/models/multiBarChart.js

Stacked Chart

Stacked Chart is based on nvd3's stacked area chart.

It depends on following files:

lib/nvd3/nv.d3.custom.js
lib/nvd3/src/models/axis.js
lib/nvd3/src/models/legend.js
lib/nvd3/src/models/stackedArea.js
lib/nvd3/src/models/stackedAreaChart.js

Line Chart

Line Chart is based on nvd3's stacked area chart.

It depends on following files:

lib/nvd3/nv.d3.custom.js
lib/nvd3/src/models/axis.js
lib/nvd3/src/models/legend.js
lib/nvd3/src/models/line.js
lib/nvd3/src/models/lineChart.js