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

7 thoughts on “Interacting with Charts

  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

    1. 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

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