Sparklines

This jQuery plugin creates sparklines or mini line charts that gives you a sense of the trend DOWNLOAD

3,5,4,5,19,7,2,1,1

This plugin leverages High Charts to render the data visualization.

JS Fiddle example

The element that will contain the sparkline should have the following values in it:

[y value 1], [y value 2], [y value 3], etc…

The x values are not required.

When to use it

I primarily like to use it in tabular data layouts for showing a trend of a particular measure in a row.

Product Name 12 Mth Sales Trend
Wheel Type A 4,5,6,10,7,4,2,1,1,3
Wheel Type B 4,5,6,10,12,14,12,15,16,18
Wheel Type C 5,5,5,5,6,5,5,5,5,4,4,5

By adding this visualization, I can quickly see that Wheel Type A spikes and then starts to decrease, Wheel Type B’s sales is upwards, and Wheel Type C’s sales doesn’t seem to have any growth.

Example:

The Javascript

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

<script type="text/javascript" src="js/highcharts.js"></script>

<script type="text/javascript" src="js/dv-spark.js"></script>

<script type="text/javascript">

jQuery(document).ready(function ()

{

jQuery('#dv-container').dvSpark({ });

});

</script>

The HTML Markup

<div id="dv-container">145,234,123,123,140,175</div>

 

The Result

145,234,123,123,140,175

Documentation

Options

Option Type Default Value Description
i_height integer 20 The height of the container of the sparkline
i_width integer  90 The width of the container of the sparkline
s_line_color string #808080 The color of the line
b_markers_on bool false Show markers or not
       



Leave a Reply

Your email address will not be published. Required fields are marked *

Current day month ye@r *