Sparkline (Inline Chart) Plugin With jQuery And SVG - inlineGraph

Sparkline (Inline Chart) Plugin With jQuery And SVG - inlineGraph

inlineGraph is a lightweight and simple-to-use jQuery plugin used for generating SVG based inline graphs and charts (aka. sparklines) to present your data as heatmap, pie, boolean and angle.

1. To get started, insert the JavaScript file inlinegraph.js after jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="inlinegraph.js"></script>

2. Create an element where you want to place the inline graph.

<div class="inlinegraph"></div>

3. The JavaScript to generate an inline graph inside the element.

  • values: numeric value.
  • attr: plugin settings.
$(function(){
  $('.inlinegraph').inlinegraph(values, attr)
});

4. All default attributes (settings).

$('.inlinegraph').inlinegraph(30, {
  // or 'heat', 'bool', 'angle'
  type: 'pie',
  // interception text
  interception: 'warn',
  // interception color
  interceptionColor: 'black',
  // height in pixels
  height: 16,
  // width in pixels
  width: 16,
  // pre-defined colors
  color: ['blue','red','yellow','purple','green','orange'],
  // border color
  borderColor: 'black',
  // border width in pixels
  borderWidth: 0,
  // rotation angle
  rotation: 0
  
})

5. You can also pass the attributes (settings) via data attributes as follows:

<div class="inlinegraph" 
     data-graph="60"
     data-graph-attr='{"color": ["green"], "type": "angle"}'>
</div>
<div class="inlinegraph" 
     data-graph="14"
     data-graph-attr='{"color": ["green"], "fullAngle": "24", "type": "angle"}'>
</div>
...
$('.inlinegraph').each(function() { 
  $(this).inlinegraph($(this).attr('data-graph'), $.parseJSON($(this).attr('data-graph-attr')));
});

This awesome jQuery plugin is developed by tmunz. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 20.01.2018
  • Source