Header Sparkle banner

Pretty Sparkline Charts with jQuery Sparklines

Liam Relihan News & Updates

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.

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.

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

<html>
<head>
<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">
$(function () {
$('.inlinesparkline').sparkline();
});
</script>
</head>
<body>

<h1>MODBUS Slave Analysis</h1>
<P>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>

</body>
</html>