GSoC 2011: Week 13

This week mostly I worked on fixing bugs, improving some features and documenting my work. The panning feature required much attention as mentioned in my previous report. So I worked around this by changing the equations used for panning. One issue that we faced was that the existing panning feature had a zoom associated with it. On exploring the Highcharts reference manual we found out that Highchart rounds off to nearest tick in the plot. So on disabling that option the panning feature worked fine.

Apart from that I worked on providing a 'Reset zoom' link to get the original display(if zoomed/panned), added a FAQ in the official documentation about 'How to use the zoom search feature?' (FAQ 6.32), added some code documentation, fixed issue with browsing foreign values and handled the notice that used to be displayed in case data label not selected.

GSoC 2011: Week 12

This week I continued my work on the issues of plotting support for date-time fields. After looking around for a suitable distance criteria, I decided upon the timestamp values of each date-time (milliseconds passed since 1970-01-01 00:00:00). Date, time, datetime field values were converted into timestamps and plotted with these values to give a meaningful distance measure. Time fields were measured by considering the time values on the day 1970-01-01. The date library at http://www.mattkruse.com/javascript/date/source.html was helpful in converting values to and from timestamps.

The second issue was implementing zoom and pan based on the code snippet at
http://jsfiddle.net/HXUmK/5/. Although the logic of zoom and pan is right the system response time is not good. Also, the equations used for implementing zoom by readjusting extremes are not correct. The equations used in the snippet were:           
newXMin = xMin + (1 - zoomRatio) * xMax                                                            newXMax =  Max * zoomRatio 
(zoomRatio varying from 1 to .6, xMin and xMax being the datamin and datamax)

I replaced the equation with:                                                                                    newXMin  = xMin + (xMax - xMin) * (1 - zoomRatio) / 2;
newXMax = xMax - (xMax - xMin) * (1 - zoomRatio) / 2;
(zoomRatio varying from 1 to .6, xMin and xMax being the axis-min and axis-max)

This improved the mousewheel zoom to some extent. The panning feature was taken from the snippet but its very difficult to use. The logic seems to be right, readjusting the axis extremes based on the position of mouse drag but it is very sensitive. Even a little drag sometimes shifts the axis to a much larger value. I'll look to improve on this but I still think that using the inbuilt zoom, where we can select an area and zoom into it is much powerful and faster way of implementing the zoom/pan.

GSoC 2011: Week 11

Things worked on this week:

• Using AJAX to get data row on point click. 
• Better support for date/time objects
• Panning feature

Using ajax to get the data row on click reduces the amount of data being passed on to the javascript layer. On data point click the where clause of the point is passed on to the server in request and the data row is returned in response. 

Support for date/time turned out to be rather tricky in Highcharts. The different date/time formats have to be converted into javascript 'date' type to have correct distance between them. Somehow using new Date(dateString) does not produce correct plots. Next I tried code snippet at http://www.mattkruse.com/javascript/date/source.html , which a getDateFromFormat function which return the getTime of the date. So the difference of those getTime() can be a measure of distance between two dates. Will continue on on working on it this week.

Highcharts has an inbuilt zoom feature but not a panning feature. Also, the zoom feature utilizes the mouse click and drag events, so a pan cannot be used with those events. The code snippet at http://jsfiddle.net/HXUmK/4/ provides a method of implementing zoom(mousewheel) and pan(click and drag) manually. Currently I'm trying to integrate it within my code, there are some unresolved issues with use of  setExtremes() functions.