11 Replies Latest reply on Feb 19, 2007 9:16 AM by feef10

    Dynamic Charting

      I need to implement a dynamic chart (column chart, to be exact). By adding series to a chart control, I can achieve the basic requirement. But ...

      We need to display checkboxes so that user can un/check them and show/hide some of the series. Currently I reconstruct the series to achieve this effect, but the legends are different everytime a box is checked or unchecked.

      One step further, if I can display checkboxes within the legend items, that'd provide even better user experience, because the same legend labels are now duplicated (next to the checkboxes).

      Are these possible? Specifically:

      1. Hide and show one or more series without reconstructing all seriese.
      2. Add checkboxes into legend items.

        • 1. Re: Dynamic Charting
          dave cragg
          I was working on something similar, and your idea for displaying checkboxes next to legend items was interesting. I'm not sure if this is what you have in mind, but there is an example here:


          The source is viewable.
          • 2. Re: Dynamic Charting
            feef10 Level 1
            Indeed, this example looks very close to what I want. However, its source doesn't seem available.
            • 3. Re: Dynamic Charting
              dave cragg Level 2
              If you right-click on the window when it displays, there should be a "View Source" option.
              • 4. Re: Dynamic Charting
                That example is one approach to the problem but it's not how I have done it. I extended the LegendItem class to add a remove button next to each item, so obviously you could do the same to add a checkbox. All you have to do then is set your Legend's legendItemClass property to your home-made class.

                As for the dynamic chart type thing, you could do this by adding all the series to the chart and having the checkbox selected property bound to the series visible property. The disadvantage of doing that is that unlike in that example the columns won't resize, they'll stay the same size throughout.
                • 5. Re: Dynamic Charting
                  feef10 Level 1
                  This is precisely what I like to do, thank you so much.

                  I intend to keep the column widths (and positions) the same even when some of them are hidden. I hope the legend items don't disappear when a series is hidden and that's what I need to try and see.
                  • 6. Re: Dynamic Charting
                    feef10 Level 1
                    I see. (Wondering how this is done, though.)

                    • 7. Re: Dynamic Charting
                      Oddsy Level 1
                      Ok, so extend the LegendItem class and override the appropriate functions (probably measure, createChildren and updateDisplayList). In measure, call to super.measure() and then add to the measuredWidth and measuredHeight properties as is necessary for adding your checkbox (or whatever you are using). In the createChildren, again call the super.createChildren() method and then add your checkbox as a child. In the updateDisplayList method call the super and then setActualSize(..) and move(..) on your checkbox to size and position it.

                      At some point you will also have to add an event listener to your checkbox that sets the LegendItem's element's visible property to true/false.

                      That's pretty much given you all the details short of the actual code so I hope that solves it all.
                      • 8. Re: Dynamic Charting
                        feef10 Level 1
                        This works beautifully! In fact, I placed the checkbox on top of the legend icon and it works just fine.

                        Earlier I tried to implement my own legendMarkerRenderer for a series; I managed to draw initially on the legend icon but had trouble redraw it once user clicks on the item. This approach of custom LegendItem is better.

                        • 9. Re: Dynamic Charting
                          feef10 Level 1
                          While the approach works great for non-stacked data (i.e., if the checkbox is unchecked, the data columns disappear as desired), it doesn't work for stacked chart: the unchecked series data become white/blank yet still hold the space. In other words, if there are 3 series stacked up and the middle one is unchecked, the data on top of that series stays where they are; the desired behavior would be having them "fall" down to sit right atop the lowest series.

                          One way is to massage the data source on-the-fly but this doesn't sound clean. What's the best way of achieving this?

                          • 10. Re: Dynamic Charting
                            Oddsy Level 1
                            You could massage the data source, or add and remove series from the series set with a hard-coded legend. Or (I've not tried this, but at a guess) you could re-order the series in the series set so that the "invisible" one sits at the top of the stack. That's maybe a bit nasty conceptually but might work nicely in practice, not sure.
                            • 11. Re: Dynamic Charting
                              feef10 Level 1
                              I've thought about these approaches myself. All of these can control the series data but the legend is also altered, something I don't want. I thought about the last approach as well, i.e., reorder the hidden series to top so the y-axis is not affected; this also changes the legend. There can be even more aggressive workarounds, but that seems too much.

                              Anyhow, appreciate your ideas and thanks for your posting that confirmed my thinking.

                              Thanks a lot,