Home > Silverlight > Interacting with Charts

Interacting with Charts

I was working with charts and ended up with something like this. it is not that clear to see the date and value. The data points look crowded. we could obviously increase the width of the chart, provide an useful tooltip so we could get better understanding of the data.

chartzoom1

because of any number of reasons both of the options might not be suitable. more over the chart doesnt have any interactivity. I wanted to add the functionality of user being able to select the range of dates and chart would reflect that. we could easily acheive that using some controls to filter the date ranges etc. but here is what I came up with.

You can see a demo here.

chartzoom22

chartzoom3

you ctrl+click and drag on the chart(Plot Area) to select the range we want to focus on and when the mousebutton is up, the chart is drawn for the range selected. To undo the zoom and go back to original display of the chart, just click on the chart(Plot Area).

you can download the code from here

Categories: Silverlight Tags:
  1. Ashkan
    November 16, 2009 at 6:37 pm | #1

    I’ve seen your post about interactive charts so I thaught may be you can help me with this problem :
    I’m using System.Windows.Controls.DataVisualization.Toolkit for charts in my WPF application. The code for chart is:

    I want the user be able to click line series at any point and drag it to up or down and so the Value will be changed ? This is like a two way data binding but I don’t know how can I do it.

    thanks

    • lee
      November 16, 2009 at 6:39 pm | #2

      Hi,
      One Idea, is to instead of showing an ellipse for the datapoint, use a Thumb, change the template to make it look like ellipse and handle the events that are raised by the thumb

  1. May 27, 2009 at 7:10 pm | #1