composite line

2,533 views
Skip to first unread message

tommy xri

unread,
May 13, 2012, 3:19:23 AM5/13/12
to jquery-s...@googlegroups.com
Hi i am new to sparklines and i need your help with something :

i have the code below witch populates my span tag with data :

echo "<p><span class='sparks'>";
while($row_pop=mysql_fetch_array($result_pop))
{

extract($row_pop);
$formed_population=round($population,0);
echo "$formed_population,";
}

echo "</span></p>\n";

the graph is generated but when i create another span tag with the same class but different data (composite line) i get the message : Attempted to attach a composite sparkline to an element with no existing sparkline.

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


Paul Rabinowitz

unread,
Jun 30, 2012, 7:06:42 PM6/30/12
to jquery-s...@googlegroups.com
Im getting similar results,

 and there is no tutorial or examples anywhere on creating composite line graphs..

can someone explain how to do this?

Paul Rabinowitz

unread,
Jun 30, 2012, 7:15:14 PM6/30/12
to jquery-s...@googlegroups.com
peeking at his own javascript i fount this syntax:



   // Composite line charts, the second using values supplied via javascript
    $('#compositeline').sparkline('html', { fillColor: false });
    $('#compositeline').sparkline([4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7], 
        { composite: true, fillColor: false, lineColor: 'red' });

Gareth

unread,
Jun 30, 2012, 7:30:08 PM6/30/12
to jquery-s...@googlegroups.com
The idea with composite sparklines is that you only have one span and draw multiple sparklines onto it.  Only the second (and later) calls to the .sparkline() method may set composite=true.

So, for example your span may look like:

<span id="mysparkline">4,3,3,1,4,3,2,2,1</span>

To use the values in the sparkline for a line chart and then draw a bar chart over the top:

$('#mysparkline').sparkline('html', {type: 'line', width: '50px'});
$('#mysparkline').sparkline([1,2,3,4,3,2,4,1,3], {type: 'bar', composite: true});


Or you can pass in both sets of values via sparkline():

<span id="mysparkline">Loading..</span>

$('#mysparkline').sparkline([4,3,3,1,4,3,2,2,1], {type: 'line', width: '50px'});
$('#mysparkline').sparkline([1,2,3,4,3,2,4,1,3], {type: 'bar', composite: true});


Or you can put both sets of values directly on the span tag:

<span id="mysparkline"barvalues="1,2,3,4,3,2,4,1,3" linevalues="4,3,3,1,4,3,2,2,1">Loading..</span>

$('#mysparkline').sparkline('html', {type: 'line', tagValuesAttribute: 'linevalues', width: '50px'});
$('#mysparkline').sparkline('html', {type: 'bar', tagValuesAttribute: 'barvalues', composite: true});



On Sunday, May 13, 2012 12:19:23 AM UTC-7, tommy xri wrote:

Paul Rabinowitz

unread,
Jun 30, 2012, 8:13:20 PM6/30/12
to jquery-s...@googlegroups.com
wow, that helped out  a lot!

now is there any way for the composite bar to inherit the Low/ high range of the parent line?

Gareth

unread,
Jun 30, 2012, 8:26:08 PM6/30/12
to jquery-s...@googlegroups.com
No, not directly.  However you can pass in the sameChartRangeMin and ChartRangeMax options to both charts to get a consistant scale.

Paul Rabinowitz

unread,
Jun 30, 2012, 8:41:30 PM6/30/12
to jquery-s...@googlegroups.com
forgive me for so many questions!

So I generate these ranges via php,  and then I can pass them through the span tag?

(im using using the 'html' method)

Gareth

unread,
Jun 30, 2012, 8:51:13 PM6/30/12
to jquery-s...@googlegroups.com
Normally you'd pass them via the sparkline() calls - If you want to pass the options on the tag then you'll need to set enableTagOptions and use attributes of sparkChartRangeMin and sparkChartRangeMax.  See the syntax section of the docs for details.

Paul Rabinowitz

unread,
Jun 30, 2012, 8:59:11 PM6/30/12
to jquery-s...@googlegroups.com
Gracias!

 have a great weekend sir.
Message has been deleted

Francis Mariani

unread,
Mar 18, 2014, 5:50:41 PM3/18/14
to jquery-s...@googlegroups.com
Gareth, your response here was a great help to me, thanks very much.

This is an example of a composite sparkline. I would like to disable interaction, but when I change disableInteraction: false to disableInteraction: true, the sparkline only shows the third measure - the line (the first two bars do not appear).

Any ideas?

Thanks,

Francis.

<!DOCTYPE html>
<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.js"></script>

<script type="text/javascript">

$(document).ready(function()
{
    // Apply Sparklines
    makeSparkline();
});



// Convert the span of measures into the sparkline
function makeSparkline()
{
    $('.sparkline').sparkline('html',
    {
        enableTagOptions: true,

        type: 'bar',
        tagValuesAttribute: 'valuesMeasure1',
        chartRangeMin: 'sparkChartRangeMin',
        chartRangeMax: 'sparkChartRangeMax',
        height: '45px',
        barColor: '#C8C8C8',
        barWidth: 10,
        barSpacing: 0,
        disableInteraction: false
    }
  );

    $('.sparkline').sparkline('html',
    {
        composite: true,

        enableTagOptions: true,

        type: 'bar',
        tagValuesAttribute: 'valuesMeasure2',
        chartRangeMin: 'sparkChartRangeMin',
        chartRangeMax: 'sparkChartRangeMax',
        height: '45px',
        barColor: '#00FF00',
        barWidth: 10,
        barSpacing: 0,
        disableInteraction: false
    }
  );

    $('.sparkline').sparkline('html',
    {
        composite: true,

        enableTagOptions: true,

        type: 'line',
        tagValuesAttribute: 'valuesMeasure3',
        chartRangeMin: 'sparkChartRangeMin',
        chartRangeMax: 'sparkChartRangeMax',
        height: '45px',
        lineWidth: 2,
        lineColor: '#007fc0',
        fillColor: false,
        spotRadius: 2,
        spotColor: false,
        minSpotColor: '#ff0000',
        maxSpotColor: '#0000ff',
        disableInteraction: false
    }
  );

};
</script>

<style type="text/css">
    body { font-family: Arial, sans-serif; font-size: 10pt; }
    table { border-collapse: collapse; border: 1px solid gray; }
    td { border: 1px solid gray; }
</style>

</head>

<body>

<table cellpadding=1 style='margin-left:0pt;margin-right:0pt;margin-top:0pt;margin-bottom:0pt'>

    <tr>
        <td>Canadian Bonds</td>
        <td>
            <span class="sparkline"
                valuesMeasure1='14.17,14.17,14.10,14.01,15.17,13.17,14.17,13.23,12.17,12.17,12.00,12.00,12.00'
                valuesMeasure2='06.00,06.10,06.20,07.00,07.50,07.70,08.00,07.20,07.10,06.50,05.34,05.21,05.20'
                valuesMeasure3='09.60,09.77,09.57,09.67,09.77,09.77,11.77,09.77,09.98,10.20,10.30,10.34,10.45'
                sparkChartRangeMin='05.20' sparkChartRangeMax='15.17' ></span></td>
    </tr>

    <tr>
        <td>Global Bonds</td>
        <td>
            <span class="sparkline"
                valuesMeasure1='57.00,56.10,56.20,56.33,54.00,53.00,52.10,54.23,54.47,56.65,57.00,56.59,52.00'
                valuesMeasure2='51.91,51.10,51.02,51.03,51.04,51.05,51.16,51.05,51.23,52.10,52.30,51.20,51.13'
                valuesMeasure3='55.55,54.41,54.22,53.67,52.19,51.10,53.49,53.49,53.55,54.10,54.11,54.23,54.10'
                sparkChartRangeMin='51.00' sparkChartRangeMax='57.00' ></span></td>
    </tr>

</table>
</body>

</html>
Reply all
Reply to author
Forward
0 new messages