Jquery composite sparklines

Question

I am new to sparklines and need help with something. I get data from mysql and populate a span tag with class=sparks. The graph is generated but when I create another span tag with the same class, but different data (composite line), I get the following message:

Attempted to attach a composite sparkline to an element with no existing sparkline.

My JavaScript:

$(".sparks").sparkline( 'html', {
  composite:'true',
  type:'line',
  width:'900px',
  height:'400px',
  disableHiddenCheck:'true'
});

Answer 1

Try to avoid making a selection on the class. It's better to draw one, and then on the next ones you set the flag composite equal to true. And be sure that all the drawings are pointing to the same div.

Following this note, remember to set changeRangeMin and chartRangeMax having the same values.

Note: You'll usually want to lock the axis on both charts using chartRangeMin and chartRangeMax if you want the same value on each chart to occupy the same point.

A working example: https://jsfiddle.net/sLphjqoc/2/

Answer 2

The second sparkline needs to be applied to the same span tag in order to work as a composite.

Sparklines will then draw onto the existing canvas element that it creates within the initial span.