6

I want to create a chart that looks as much as possible like Google Realtime Timeline ideally it should support pan & zoom with dynamic labels for axes instead of clicking on links. Is there any way to do it? Thanks.

Alireza Noori
  • 14,961
  • 30
  • 95
  • 179
  • This chart looks similar: http://wpf.amcharts.com/stock. Also Visiblox charts allow zooming. I don't know what the 'pan' is (it seems to me that it is related with camera and actor), but a similar timeline can be created with Toolkit charts, two buttons and mouse click event. – vortexwolf Apr 18 '11 at 11:37
  • Thanks. It's very similar to what I want but it's a commercial charting tool. I wanted to do it with the toolkit if possible. The pan is moving the viewport while you're in the zoom. Thanks again. – Alireza Noori Apr 18 '11 at 16:14
  • @Alireza Noori I have chosen these charts because they have free but restricted versions. All that I can create with toolkit is a chart with 2 buttons (left and right) and vertical line on mouse over. I can't implement zooming and it is hard to move the view to the center if to click on the chart. Could you say where and how this control will be used? – vortexwolf Apr 18 '11 at 17:54
  • And how many points will this chart have? The google timeline has 24*12 (288) points. – vortexwolf Apr 18 '11 at 17:57
  • @vorrtext: I want to implement this chart for something similar to google timeline. So the number of points are large. More than google timeline. But if that's an issue, I can cut the points to some sub-sections and switch between them with 2 buttons (next,prev) the zoom is to eliminate the noise amount to provide user a way to select a point. – Alireza Noori Apr 18 '11 at 19:42
  • I basically want to provide user some points in time/date that map a number to that date/time. For example suppose there's a bot that keeps track of page views in a webpage. It shows the date and time on the X axis and on the Y, it shows the number of page views. The number of these records may be very large so I have to keep performance in mind. I think this example clarifies what I want. Thank you for your time. – Alireza Noori Apr 18 '11 at 19:47
  • Ok, I suggest that you have a record for each minute and you use the DateTime type on the x-axis. Also I will try to implement that line cursor instead of the standard selection. – vortexwolf Apr 18 '11 at 21:32
  • Thanks. I have currently created a List as the ItemsSource which Result has 2 members: DateAndTime, Views. Again, thanks for your efforts and time. – Alireza Noori Apr 19 '11 at 04:55
  • One of the creators of the Silverlight Toolkit has given me [This link](http://blogs.msdn.com/b/delay/archive/2010/08/11/my-new-home-page-rejuvenated-updated-collection-of-great-silverlight-wpf-windows-phone-data-visualization-resources.aspx) that may provide some help. But I didn't find something similar to what I wanted. Although I found a pan/zoom addition. – Alireza Noori Apr 19 '11 at 05:31
  • I have made a quick example which looks closer to the timeline: http://dl.dropbox.com/u/8047386/SL/SilverlightApplication2TestPage.html. It has 2 buttons and it displays the vertical line if you move the mouse over the chart or click it. – vortexwolf Apr 19 '11 at 16:50
  • Thank you very much. It's awesome. I can use it in my app. I just want it to select the nearest point (the code you provided in the previous post) instead of showing the red line when I click on the chart. Also I want it to show a little tooltip if I'm over the point. I think I can do that. So how can I use it? Could you give me the code? Thanks. – Alireza Noori Apr 19 '11 at 16:56
  • One more thing. It would be awesome if in the addition to the black line, it was selecting the point that the user is going to select by clicking. But overall even this is AWESOME. – Alireza Noori Apr 19 '11 at 17:04
  • OK. Sorry to post a lot :D I thought about it a lot and I think we don't need to change the selection at all! Just the current implementation that you have (the black line) is great and by adding the MouseMove event handler that you posted in the previous post, I can get the nearest point and show its date in a a label. Doing these, the only difference between this and Google Realtime would be the series. If its possible, by changing the DataPointStyle of the ColumnSeries and creating a histogram with 1 or 2 pixel width for the columns we could achive the exact clone of the Google Realtime.Thx – Alireza Noori Apr 19 '11 at 17:47
  • @Alireza Noori Yes, it is possible to use ColumnSeries instead of LineSeries. But it will not make sense to select a column, I would better display the selection as a vertical line. After some time I will implement the selection of the nearest point, clean the code and post the solution. – vortexwolf Apr 19 '11 at 17:58
  • Thank you very much. I meant exactly what you said. No selection. Just the vertical line but instead of LineSeries if it is possible use a histogram with thin columns just like Google Realtime Timeline. I have to send it tomorrow. So please if it wansn't finished in the coming 15 hourse, if it's possible, post whatever you have to my mail so I can at least send something. Thank you very very much. I really appreciate your help. – Alireza Noori Apr 19 '11 at 18:06

1 Answers1

4

Sometimes it seems to me that writing blog posts take more time than writing the code.

Here is the link to my implementation of this timeline control: http://vortexwolf.wordpress.com/2011/04/20/silverlight-timeline-chart/

Screenshot:

enter image description here

Download the code at my post and write further comments and suggestions there. If there are mistakes - I will correct them.

vortexwolf
  • 13,967
  • 2
  • 54
  • 72
  • It looks awesome. Not much difference between this and the Google Realtime Timeline. In just one word: PERFECT. Thank you very very much. – Alireza Noori Apr 20 '11 at 11:09