[ 3 posts ]

Matt Parker

YUI Contributor

  • Username: mattatlamplight
  • Joined: Mon Apr 20, 2009 12:03 pm
  • Posts: 466
  • Location: London UK
  • GitHub: mattparker
  • Gists: mattparker
  • Offline
  • Profile
Tags:

Bubble charts

Post Posted: Fri May 18, 2012 12:23 am
+0-
Hi,

I'd like a bubble chart. I've started tinkering but it's taking me a while to get my head around the structure of charts, and what I need to extend etc to get something working. I'd appreciate some pointers...

At the moment I've extended CartesianSeries to make a Cartesian3DSeries (prob a bad name, but anyway). This adds some 'z' attributes - zDisplayName, zcoords, zKey, zData, zAxis, and my intention is that it'll overwrite or add methods that refer to xAxis and yAxis to also do stuff with zAxis.

Then there's a BubbleSeries which extends Cartesian3DSeries. My thought is that there are various ways to represent the third dimension - bubbles are one; but you might also want colours, shapes, changing widths of bars (ie an area chart). So you could extend Cartesian3DSeries for these different cases (perhaps).

There's also a zAxis that extends NumericAxis, although I realise this is probably not correct in general - you might have categorical data for the z axis. At the moment zAxis just has a _drawAxis function that does nothing, and a 'styleFunction' attribute.

My thought was that in the setAreaData method of Cartesian3DSeries, it sets the x and y co-ords as in CartesianSeries, and then calls styleFunction, passing it the graphic and the z value of the current point. styleFunction would then change the style of the graphic based on the value.

It's not working; I've not got far enough, but I've got sufficiently far to have significant doubts about whether this is a sensible way to proceed - whether it's got any chance of working, basically!

What would be really helpful, and what I might even do if I get time and round to it, is an overview of the charts class structure - there's quite a lot, and I've found it moderately difficult working out what does what, and so what I need to add/change/extend etc.

Thanks,

Matt

Tripp Bridges

YUI Developer

  • Username: tripp
  • Joined: Wed Jan 07, 2009 1:54 pm
  • Posts: 440
  • GitHub: tripp
  • Gists: tripp
  • YUI Developer
  • Offline
  • Profile

Re: Bubble charts

Post Posted: Fri May 18, 2012 10:52 pm
+0-
Hi Matt,

The easiest way to create bubble chart would be to extend the MarkerSeries, add a zAxis and update the drawSeries method to apply a transform based on the z axis values. There really is no need to create a special axis for a bubble series. You can just use a NumericAxis and set the position attribute to none. Below is a gist in which I created a BubbleSeries class and created a chart that uses it. I am not sure of the details of what the api for a bubble chart should be so I am getting the zAxis values from a dataProvider key. You may want to have it based on your yKey values. I am not sure. The class seems to work fine for this basic example.

BubbleChart

I did find a bug in the Chart in which the seriesKeys attribute doesn't work as it should when a seriesCollection is specified. I worked around it in my example by declaring a series for each data key of the dataProvider and setting the visible attribute to true. (I will fix the seriesKeys bug for the next release)

My apologies for any confusion you may encounter extending charts. Documentation is not as good as it should be and I am working on incrementally improving it. Please feel free to contact me with any issues you encounter. I'll be happy to help.

Thanks,
Tripp

Matt Parker

YUI Contributor

  • Username: mattatlamplight
  • Joined: Mon Apr 20, 2009 12:03 pm
  • Posts: 466
  • Location: London UK
  • GitHub: mattparker
  • Gists: mattparker
  • Offline
  • Profile
Tags:

Re: Bubble charts

Post Posted: Sun May 20, 2012 11:27 pm
+0-
Hi Tripp,

That's fantastic, thank you very much. I'll have a play and come back with any comments.

I think I'd missed position: none as a possible value, so the only reason to create a new axis was to stop it rendering!

My feeling is that Charts has a lot more power than it lets on... I'll keep playing, and I watched Luke's video about contributing documentation, so I might have a go at writing some docs or examples...

thanks again

Matt
  [ 3 posts ]
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum