PDA

View Full Version : Drawing _under_ a chart



tmcneer
23 Jul 2012, 10:40 AM
Hi,

What I'm trying to produce is this: imagine a simple line chart, with both axes running from 1 to 10. A single line represents a set of values.

I need to also represent a filled rectangle, say, filling the space within the chart area that would be bounded by 3 on both axes. None of the values on the line are necessarily related to this rectangle; in essence, it serves as a sort of baseline reference.

I know that a chart can only have a single store, so I don't believe there's a way to create the rectangle within the chart. If I create it as a Draw component, how can I position it so that it is positioned correctly relative to the chart, with the chart on a higher z-index so the line is above the rectangle?

Or is there a simpler/better way to achieve this?

Thanks,

Tom Mc

scottmartin
27 Jul 2012, 10:26 AM
You can create another series using another array of data to display the rectangle?
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/charts/Mixed.html

see generateData function to see how each series uses different data in store.

Scott.

scottmartin
27 Jul 2012, 10:27 AM
You can also use a background as shown:
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/charts/Column2.html

Scott.

tmcneer
27 Jul 2012, 11:49 AM
Hi Scott,

Thanks for the reply.

[QUOTE=scottmartin;862379]You can create another series using another array of data to display the rectangle?

I'm afraid that won't do what I need. In the Mixed example, there's still a value for each Month, regardless of which property of the data object is being used for the series.

But in what I need to do, for example, the data objects in the array have 'year', 'mileage' and 'coveredMileage' properties for years 1-3, but not for years 4-10. When I create a line chart with the 'year' and 'mileage' properties (where there are values for all 10 years), everything's fine.

But when I add a second, area series which uses 'year' and 'coveredMileage', the code creates a four-sided polygon with the top of the shape angling from the 'coveredMileage' figure for year 3 back to the left axis at year 4. What I want is a simple rectangle covering years 1-3, since there are no values for subsequent years. But since the array contains objects with 'year' properties up to 10, the code assumes that there are 'coveredMileage' values during the year 3-4 period, and generates an angled line, as in the attached screenshot (although the screenshot actually shows the lines from years 2 to 3).

37568

There's logic to that, but it's based on the nature of the data object. Seems like the code would need to support a store per series, rather than simply a store per chart.

Tom

scottmartin
27 Jul 2012, 12:31 PM
Can you post your small example (with data) we can use and edit the image to show where the rectangle should be so I am sure we are on the same page.

Scott.

tmcneer
30 Jul 2012, 10:36 AM
Hi Scott,

Thanks for pursuing this.


Can you post your small example (with data) we can use and edit the image to show where the rectangle should be so I am sure we are on the same page.

Scott.


Sure. The attached zip has the code sample. In this sample, I have not attempted to draw the second series area chart; but the data ('btobmiles') values are within the store.

The .png should give you an idea of what we're going for.

Thanks for your help,


Tom