Nobody likes a show-off [Today’s DataVisualizationDemos release includes new demos showing off stacked series behavior]


This blog has moved to a new location and comments have been disabled.

All old posts, new posts, and comments can be found on The blog of dlaa.me.

See you there!

Comments (21)

  1. Forgot to sign in last time.

    I was asking about editing data in charts and about source code of toolkit ported to WPF 4.

    thanks

    Boško

  2. Delay says:

    Boško Stupar,

    For the benefit of others, I'm including the more detailed question you emailed me: "Is there any possibility to make charts editable as is by simple data point drag? I implemented something like that with previous version of Data Visualization toolkit, but it was rather awkward, because I had to edit parent types in order to create EditableLineSeries. EditableLineSeries have mouse move and drag handlers and respond accordingly, so the series object itself alters the data source. The second problem I encountered was inability to disable animation. Transition was preventing user to drag points fast enough, so I had to disable it. I could probably solve all of this myself as I did the last time, just, it would save a lot of time for me if I had source code ported to WPF 4."

    The November 2009 release of the Silverlight Toolkit (blogs.msdn.com/…/silverlight-4-beta-is-out-and-the-toolkit-has-it-covered-silverlight-toolkit-november-2009-release-now-available-for-silverlight-3-and-4.aspx) opened up most of the class hierarchy to make subclassing easier and more practical. If you did your work before then, you might have an easier time on more recent releases.

    Performance can be challenging, but I talk about various steps you can take (including disabling transitions) in this post: blogs.msdn.com/…/i-feel-the-need-the-need-for-speed-seven-simple-performance-boosting-tweaks-for-common-silverlight-wpf-charting-scenarios.aspx

    For the latest version of the source code that compiles for Silverlight 3/4, WPF 3.5/4, and works on Windows Phone 7, have a look at my Data Visualization Development Release 4: blogs.msdn.com/…/phone-y-charts-silverlight-wpf-data-visualization-development-release-4-and-windows-phone-7-charting-sample.aspx

    And for lots more helpful links, please look here: http://cesso.org/r/DVLinks

    Hope this helps!

  3. Thank you David! I played with chart and created Editable line series. Hope that it will be useful to someone else too:

    docs.google.com/leaf

    I had to disable built in selection mechanism because it prevented series to handle mouse click event like it should, so I bypassed it. It works now.

    I created attached property to DataPoint in EditableLineSeries class so DataPoint could paint itself when selected.

    Selected point could be deleted by pressing Delete key. Deletion works if ItemsSource implements IList.

    Adding new points has to be done outside from EditableLineSeries because it doesn't know what kind of object to create.

    Cheers!

  4. Delay says:

    Boško Stupar,

    Cool!! What you've done sounds really neat – if you blog about it somewhere, please let me know and I'll add a link to my DataVis link collection. :)

  5. Grant Peckham says:

    Hi David,

    I'm pretty new to using charts and I have pretty much learned everything I know from your blog.  I'm trying to make a stacked bar chart in a WPF app, but it seems that capability is only for the new silverlight release.  Is there any way I can use some of the new series in WPF without using Silverlight?

    Thanks,

    Grant

  6. Delay says:

    Grant Peckham,

    Thanks! :)

    So I think my Data Visualization Development Release 4 does exactly what you want by bringing the latest Silverlight code to the WPF platform:

    blogs.msdn.com/…/phone-y-charts-silverlight-wpf-data-visualization-development-release-4-and-windows-phone-7-charting-sample.aspx

    Hope this helps!

  7. can i show the Column of "ColumnSeries" in different color?

    like i have 3 options as 3 column of a column series.

    yes:-5

    no:-2

    don't know:8

    can i show:  'yes' column in "Green' color

    'no' column in "red' color

    'don't know' column in "Amber' color

    Thanks in Advance!!

  8. Delay says:

    kamlendra,

    I think the following post shows how to do what you want using an MVVM approach: blogs.msdn.com/…/columns-of-a-different-color-customizing-the-appearance-of-silverlight-charts-with-re-templating-and-mvvm.aspx

    FYI that you can find more helpful posts about Data Visualization here: http://cesso.org/r/DVLinks

    Hope this helps!

  9. John says:

    Hey David,

    Your development release 4 was released over 2 years ago, I know some of the WPF Toolkit controls got rolled into WPF 4.0. Is there a stable release somewhere of the rest, such as these stacked bar charts, or is your development release pretty much it?

    Thanks!

  10. Delay says:

    John,

    I was reassigned soon after posting Development Release 4 and I don't know of any work since then for either the Silverlight or WPF Toolkits. :(

  11. John says:

    David,

    Ahh, okay. These Charting controls seem to fit our requirements for a client project, but I'm wary of using them if they're no longer supported, at least not without a copy of their souce.

    Thanks!

  12. Delay says:

    John,

    To be clear, the complete source code IS available as part of the Development Release package (as well as on CodePlex).

  13. John says:

    Oh, excellent, thanks!

  14. Tabor25 says:

    Hi David,

    thank you very much for enabling the use of the stackedcolumnseries within the charting control!

    I think that there is a bug when using two stackedcolumnseries in one chart: the stacked columns are drawn correctly but only for the stacked columns of the last stackedcolumnseries a tooltip is shown when mocing the mouse over it. Do you have hint how to fix this issue?

    Best regards,

    Tabor25

  15. Delay says:

    Tabor25,

    Offhand, I'm not sure why that would be. :( Does anything in my demo project demonstrate this problem?

  16. Tabor25 says:

    Hi David,

    i created a simple demo project showing the bug:

    MainWindow-XAML:

    <Window x:Class="ChartTest.MainWindow"

           xmlns="schemas.microsoft.com/…/presentation"

           xmlns:x="schemas.microsoft.com/…/xaml"

           xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"

     Title="MainWindow" Height="350" Width="525">

       <Grid>

       <charting:Chart

                   x:Name="StackedColumnChart"

                   Title="Stacked Column"

                   Margin="5">

         <charting:StackedColumnSeries>

           <charting:SeriesDefinition

                           ItemsSource="{Binding}"

                           IndependentValuePath="Key"

                           DependentValuePath="Value"/>

         </charting:StackedColumnSeries>

         <charting:StackedColumnSeries>

           <charting:SeriesDefinition

                           ItemsSource="{Binding}"

                           IndependentValuePath="Key"

                           DependentValuePath="Value"/>

         </charting:StackedColumnSeries>

       </charting:Chart>

     </Grid>

    </Window>

    MainWindow-Implementation:

    namespace ChartTest

    {

     /// <summary>

     /// Interaction logic for MainWindow.xaml

     /// </summary>

     public partial class MainWindow : Window

     {

       public MainWindow()

       {

         InitializeComponent();

         Dictionary<double, double> dict1 = new Dictionary<double, double>();

         for (var i = 1; i < 10; i++) dict1[i] = i;

         ((StackedColumnSeries)StackedColumnChart.Series[0]).DataContext = dict1;

         Dictionary<double, double> dict2 = new Dictionary<double, double>();

         for (var i = 1; i < 10; i++) dict2[i] = -i / 2.0;

         ((StackedColumnSeries)StackedColumnChart.Series[1]).DataContext = dict2;

       }

     }

    }

    Only the last stackedcolumnseries (with the negative values) show a tooltip when the mouse moves over. If you need the project, i can send it to an email address of your choice.

    Best regards,

    Tabor25

  17. Delay says:

    Tabor25,

    Thanks for the sample – I see the same thing and I can't explain it offhand. :(

    However, the way you're using StackedSeries is a little weird – I'd expect to see both SeriesDefinitions in the same StackedColumnSeries. When I change your sample to do that, tooltips for both series work as expected. Here's what that looks like:

    <charting:StackedColumnSeries>

       <charting:SeriesDefinition

              ItemsSource="{Binding}"

              IndependentValuePath="Key"

              DependentValuePath="Value"/>

       <charting:SeriesDefinition

              ItemsSource="{Binding}"

              IndependentValuePath="Key"

              DependentValuePath="Value"/>

    </charting:StackedColumnSeries>

    StackedColumnSeries scs = ((StackedColumnSeries)StackedColumnChart.Series[0]);

    Dictionary<double, double> dict1 = new Dictionary<double, double>();

    for (var i = 1; i < 10; i++) dict1[i] = i;

    scs.SeriesDefinitions[0].DataContext = dict1;

    Dictionary<double, double> dict2 = new Dictionary<double, double>();

    for (var i = 1; i < 10; i++) dict2[i] = -i / 2.0;

    scs.SeriesDefinitions[1].DataContext = dict2;

    I hope this is helpful!

  18. Tabor25 says:

    Hi David,

    i need more than one StackedColumnSeries because i want to group them as described under http://www.codeproject.com/…/Grouping-with-StackedColumnSeries-Charts . Using the authors class derived from StackedColumnSeries shows the desired results. Only the tooltip is shown for the last series. It seems to be an issue in the base class. So i created a simple project showing the bug. Maybe you have an idea how to solve this.

    Best regards,

    Tabor25

  19. Delay says:

    Tabor25,

    I don't have a solution, but I think I know what's going on: the ScrollViewer for the second (red) StackedColumnSeries (remember this is based on ListBox) is intercepting mouse hover events and blocking them from getting to the ScrollViewer for the first StackedColumnSeries (blue) which is "below" it. I can't tell just now if this is due to one of the Background=Transparents in the relevant templates or whether this is part of how ScrollViewer works in code.

    PS – When only one StackedColumnSeries is present, this is not a problem because there is no stacking.

  20. Tabor25 says:

    Hi David,

    thank you for spending your time with analysing the bug. As a workaround i will use two charts for displaying the data.

    Best regards,,

    Tabor25

  21. Jonathan says:

    David,

    Thank you for showing off.  I have been looking all over for a clue on how to make a stacked bar chart.    Now I can dig in and take a look at your creativity and then see if I can adapt it to what I am trying to do.  Super!