Sing Documentation

Charts

Flot Charts

Built with Flot JS. Required libs:

<script src="vendor/flot/jquery.flot.js"></script>

Interactive Sparklines

Built with jqeruy.sparkline.

<script src="vendor/jquery.sparkline/index.js"></script>

Rickshaw

Realtime chart is based on Rickshaw realtime example.

Sparkline Pie Charts

Same as interactive sparklines based on jqeruy.sparkline.

<script src="vendor/jquery.sparkline/index.js"></script>

D3 charts

These 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 Sing App 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 Sing.

<script src="vendor/d3/d3.min.js"></script>
<script src="vendor/nvd3/build/nv.d3.min.js"></script>

Morris Charts

Built with Morris JS.

<script src="vendor/raphael/raphael-min.js"></script>
<script src="vendor/morris.js/morris.min.js"></script>

Easy Pie Charts

Built with Easy Pie Chart.

<script src="vendor/jquery.easy-pie-chart/dist/jquery.easypiechart.min.js"></script>

Flot Bars

Same as Flot Charts built with Flot. A bit different dependencies:

<script src="vendor/flot.animator/jquery.flot.animator.min.js"></script>
<script src="vendor/flot/jquery.flot.js"></script>
<script src="vendor/flot-orderBars/js/jquery.flot.orderBars.js"></script>
<script src="vendor/flot/jquery.flot.selection.js"></script>
<script src="vendor/flot/jquery.flot.time.js"></script>