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

About these ads
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

  2. Thomas
    August 3, 2010 at 12:49 pm | #3

    Hi

    Is it possible to use it in a WPF project?
    Are there any precautions to take?

    Thanks in advance – Thomas

    • lee
      August 3, 2010 at 2:27 pm | #4

      Hi,
      You should be ok, to do something similar, I dont think there are would be any issues.

  3. Sri
    August 10, 2010 at 6:02 pm | #5

    After implementing the code above the tootip for the chart disappears, any idea?

  4. Max
    June 27, 2013 at 5:07 am | #6

    Hi Lee, please tell me how to do something like that for WPF

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: