View Full Version : line chart with an image

8 Mar 2012, 10:45 PM

I have this line chart, which animates. i.e. the line slides from top to bottom direction. I have used the animate attribute for the same, here is the code

animate: {
duration: 500,
delay: 200,
easing: 'easeIn' ,
smooth: true,
from: {
height: 2000
} ,
to: {
height: 0

Now. I have an image that I want to link with this line chart. so that when the line chart slides the image also slides with it. How do I achieve that?

Any help is appreciated. Thanks

9 Mar 2012, 7:37 AM
You can show it outside of the chart but above it.

12 Mar 2012, 9:12 PM
I think this can be done by adding adding an image and a chart to a 'ext.draw.Component' and animating the component. It works for me when I add an image and a text field...the code is as shown below

var dc = new Ext.draw.Component({
width: 100,
height: 100,
padding: 0,
renderTo: Ext.getBody(),
// cls: 'cursor-dragme',
// constrain: true,
draggable: true,
floating: true,
items: [{
type: 'image',
x: 0,
y: 0,
width: 50,
height: 50,
src: 'https://lh3.googleusercontent.com/-ebWijDUUvbw/T1g2Svf0qFI/AAAAAAAAA-A/8aPzVbKtz40/s44/avgspen'
type: 'text',
text: '$50',
x: 50,
y: 25,
fill: '#000',
font: '18px Arial',
rotate: {
degrees: 45


But I want to add a line chart to the component. Could you please provide me an example of adding a line chart to an 'Ext.draw.Component'?

Thanks in advance.