Setting background image in canvas on sparkline jquery

Question

i am working in a web application using java language.i have a requirement to display composite sparkline graph, hence i am using sparkline jquery on jsp page. i have to set an image in the background on canvas where sparklines are drawn. i am using sparkline jquery from this link.

http://omnipotent.net/jquery.sparkline/

and the code i am writing is

var data1=[-10,10,9,-9,7,-5,9,-8,3,0,3,-8,4,-7]; var data2=[-10,0,6,-9,7,-5,9,-3,7,0,3,-8,4,-2]; $('#id').sparkline(data1, { type:'line', normalRangeMin:0,normalRangeMax:0,spotRadius: '0',width: '630px', height :'100px', composite: true, fillColor: false, lineColor: 'green' }); $('#id').sparkline(data2, { type:'line', normalRangeMin:0,normalRangeMax:0,spotRadius: '0',width: '630px', height :'100px', composite: true, fillColor: false, lineColor: 'red' });

and in body

above jquery allows me to draw a composite line graph but when i set style (background-image) on tag, it doesn't displays it in the background of sparklines canvas because it adds canvas by itself. My problem is to display the background-image exactly behind sparklines canvas.

for solving above issue i tried with many other jqueries like:

http://willarson.com/code/sparklines/sparklines.html

this works fine for setting background-image on canvas but doesn't allows for composite line graph.

and another is

http://benpickles.github.com/peity/

i have same problem with this also. this is also not for composite line graph.

Please give me your valuable suggestions to set the background-image exactly behind sparklines canvas for first jquery link or a way to draw composite line graph using other two links or if there is another jquery available which will allow me to set background-image on sparklines canvas and supports composite line graph.

i thanks to all your valuable suggestions in advance.

Answer 1

Now i got the way to get background-image exactly behind the canvas and drawing composite line graph on it.

I am using sparklines.js from this link. http://willarson.com/code/sparklines/sparklines.html

As per given documentation we have to call new Sparkline('canvas_id','data','opts').draw() ; function which accepts canvas_id as one parameter. i am calling the same function twice with same canvas_id for drawing two different lines (or you can call any other type of graph which this script accepts).

The second call draws another chart over the top of first one.(This is the same way which http://omnipotent.net/jquery.sparkline/ script uses for drawing composite graph). This helps me to draw a composite graph. The function call look like this:

new Sparkline('canvas_id','data1','opts1').draw() ; new Sparkline('canvas_id','data2','opts2').draw() ;

and for setting background-image exactly behind canvas i am setting style in the canvas tag.

above solution is working fine for me to get the appropriate result. if anyone find some better answer. please post it.

Thanks