Pretty Sparkline Charts with jQuery Sparklines

Image
Liam Relihan

March 9, 2015

Sparklines are the brainchild of Edward Tufte. They are those “intense, simple, wordlike graphics” that you sometimes find embedded in stock listings and such like.

Sparkline Charting Feature

To help our installation team we have created a little application that runs on installer’s smart phones. This application is written in PHP and is designed to show live energy streamed from our Canary embedded data acquisition devices.

Rather than just show constantly changing energy numbers, we added a little sparkline alongside each number to show the history of that number. Anyhow, probably the most trivial way we could find to do this was jQuery Sparklines which was written by Gareth Watts for Splunk Inc and released under the New BSD License

Anyhow to make this work for your first demo, you need to install the sparklines library in your Javascript/ folder and enter just a little code.


<!--
Copyright (c) ResourceKraft Ltd. 2015
-->


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Display Device Stream</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">   </script>
<script type="text/javascript" src="Javascript/jquery.sparkline.min.js"></script>

<script type="text/javascript"><br />
$(function () {<br />
$('.inlinesparkline').sparkline();<br />
});<br />
</script>
<h1>MODBUS Slave Analysis</h1>
Last Update: 3 seconds ago
<h3>MODBUS-34</h3>
<dl>
 	<dt>i1</dt>
 	<dd>9.00 amps<span class="inlinesparkline">30.0,20.0,4.0,5.0,5.0,10.0,11.0,12.0,10.0,20.0,4.0,5.0,5.0,10.0,11.0,12.0,10.0,11.0,12.0,10.0,9.0</span></dd>
 	<dt>i2</dt>
 	<dd>5.00 amps<span class="inlinesparkline">30.0,20.0,4.0,5.0,20.0,4.0,5.0,5.0,10.0,11.0,12.0,10.0,5.0,10.0,11.0,12.0,0.0,0.0,5.0,5.0,5.0</span></dd>
 	<dt>i3</dt>
 	<dd>23.00 amps<span class="inlinesparkline">30.0,20.0,4.0,5.0,5.0,10.0,20.0,4.0,5.0,5.0,10.0,11.0,12.0,10.0,11.0,12.0,0.0,0.0,30.0,24.0,23.0</span></dd>
</dl>
<h3>MODBUS-35</h3>
<dl>
 	<dt>i1</dt>
 	<dd>77.00 amps<span class="inlinesparkline">30.0,20.0,4.0,5.0,5.0,11.0,20.0,4.0,5.0,5.0,10.0,11.0,12.0,10.0,12.0,0.0,0.0,30.0,20.0,90.0,66.0,66.0,77.0</span></dd>
 	<dt>i2</dt>
 	<dd>6.00 amps<span class="inlinesparkline">30.0,20.0,4.0,5.0,20.0,4.0,5.0,5.0,10.0,11.0,12.0,10.0,5.0,11.0,12.0,0.0,0.0,30.0,20.0,4.0,5.0,5.0,6.0</span></dd>
 	<dt>i3</dt>
 	<dd>33.00 amps<span class="inlinesparkline">30.0,20.0,4.0,20.0,4.0,5.0,5.0,10.0,11.0,12.0,10.0,5.0,5.0,30.0,11.0,12.0,0.0,0.0,30.0,25.0,22.0,23.0,33.0</span></dd>
</dl>
News & Updates
Engineering

Contact us

Recommended for you
Get more insights and assorted energy transition and development news.
All Articles