View Full Version : LineChart Smooth curve?

5 Oct 2009, 7:16 AM
I was wondering if it's possible to draw a smooth curve in a line chart?

I've had a look through the charting docs but I can't find anything... can anyone point me in the right direction please?

Many thanks,

5 Oct 2009, 7:23 AM
Not with the default YUI control, but there is a code fork (http://www.alexandre-gomes.com/opensource/yui.php) that supports it.

5 Oct 2009, 7:35 AM
Thank you - i'll take a look at that :)

5 Oct 2009, 7:44 AM
I like how he uses Ext JS :)

5 Oct 2009, 7:50 AM
Why thank you!

I like how I use Ext JS too! It's amazing! :)

I didn't know *any* Javascript before looking at Ext (about 6 weeks) but Ext is so simple you can pick it up without too much thought!

The charting features are awesome - although I would have to say the docs for charts are quite as comprehensive as other areas of the docs... :( Can still get by though...

5 Oct 2009, 7:53 AM
Yes, the docs need improving. I'm writing a chapter on this very subject this week.

[unedited/raw snapshot below]

5 Oct 2009, 7:58 AM
ooo - when will the book be finished? I hope soon!

Be sure to include a couple of paragraphs on where to look for smooth lines etc...

5 Oct 2009, 8:02 AM
I'm hoping by end of this month, but it's looking like mid/late nov

6 Oct 2009, 12:59 AM
@jgarcia: That should be really cool - looking forward to reading it!


Not with the default YUI control, but there is a code fork that supports it.

I've taken a look at the code fork you suggested but I don't feel like I am getting very far... :(

I've included the yui-adapter and the YUI charts.js that I found in build/charts/charts.js.

And added "lineSmooth: true" into the chart series as follows...:

<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

<script type="text/javascript" src="ext/yui/charts.js"></script>

... start chart stuff....

series: [{
type: 'line',
displayName: 'Before',
yField: 'o1b',
lineSmooth: true,
style: {
displayName: 'After',
yField: 'o1a',
lineSmooth: true,
style: {
color: 0x15428B

.... Finish chart stuff....

I am quite happy that the JS code is fine and feel that my problem is with the way i've included yui charts.js (assuming I am even using the correct file).

Any ideas?

I haven't used Ext with another framework so i'm pretty sure that's where I'm falling over...

Thanks guys!

6 Oct 2009, 6:49 AM
I read the forum post forum/showthread.php?t=72557 (http://www.extjs.com/forum/showthread.php?t=72557) earlier today and managed to get yui charts 2.8.0 working without any problems... so I have a better idea of what I am meant to be doing.

However, I still can't seem to get the code fork that condor suggested to integrate.

When I integrate it - the chart doesn't display anything at all...

How can I go about integrating this so it'll work?