sparklineChart

[Sassoum]

Hi everyone,

I'm newby in GWT and GWT highchart, and I'm developing a gwt project in which I have to display some of charts notably the sparkline one. Unfortunatly, I was disapointed not to find for it a template in the gwt highcharts showcase.
If someone could help and show me how could I integrate it within my view, I'll be very grateful.
Thanks in advance.

[Sassoum]

Have someone any ideas how can I draw it with gwt highchart API??

if you need some further information, please feel free to ask??

thanks

[Sassoum]

no one can helps me ???

[Shawn Quinn]

You should be able to hide the labels, axis, etc. and then set the chart to a smaller size in order to get a sparkline-like chart. I don't have a GWT Highcharts example handy, but here's a raw Highcharts example you can refer to:

http://jsfiddle.net/highcharts/FRLrf/

If you have trouble mapping any of those options to the GWT Highcharts API, just let us know.

[Sassoum]

Thank you very much for your reply,
The sparkline sample you provided me, I have already implemented it, but I thought it won't be relevant because when I added the second and the third line, all the sparkline charts are displayed one over the other (please have a look on the attached file), even when I configure the style, so I'm wondering if you have any tips about how can I fix this problem, I'll be grateful.
But if you know that it wouldn't anyway works, can you provide me a well developed sparkline chart designed to fit the UiBinder model of GWT like this one you talked about in a previous discussion
https://sourceforge.net/p/gwt-highcharts/discussion/general/thread/211a167e/

and explain me how can I complete this model in order to integrate it within my project.

Thanks a lot

[Shawn Quinn]

In Highcharts each series you add to a chart gets rendered in the same container. So, in your case, rather than adding multiple series to the same chart, you'll want to create a new "Chart()" instance for each individual spark line that you want to render. The other thread that you refer to there has to do with rendering a series of charts inside of a GWT CellTable, which is a bit more complicated of a case because cells inside of a GWT CellTable don't have access to the full GWT widget lifecycle.

[Sassoum]

Hi shawn!

Thank you a lot for your response. I really apreciate your effort to help me. you're also right, I have created one only chart object that I referenced many time with diffrent data. This really helped me to fix my problem.
I'm very grateful.

But I'm also curious to have more than one solution to create these sparklines, if you could provide me the sample I asked you before with CellTable, I would be very glad.

Thanks

[Sassoum]

Hi shawn !

I didn't receive any response from you since the last time. Actually, I have an other minor problem about sparkline tooltip. These ones are not fully shown, they still just limited to the table cell container and the rest still hidden behind the border.

I tried to add a style to the chart inside like chart.setStyle( new Style().setOption("overflow", "visible")) but it seems useless for this situation. Have you anywhere sone idea to fix this problem?

Thanks a lot

[Shawn Quinn]

You can check out the "ToolTip.setUseHTML()" option to get the tooltip to render as HTML instead of SVG, which may help with getting the overflows to work more the way you like. If you still have trouble, your best bet would probably be to ask a question on the core Highcharts forum (http://forum.highcharts.com/) as I'm sure others there have attempted to get tooltips to render outside of the main chart DOM element.

[Sassoum]

Hi again,

After a long time af tweaking between the UiBinder file and his java code, finally I succeeded to display entirely the tooltip chart and that by discovering that it could work only if we add this attribute (overflow=visible) two times; to the chart code implemented with java and also to the <highchart:chart> tag inserted in the uibinder.

But now I'm working on the synchronized chart which is also not provided in the showcase of gwt Highchart. Actually the three charts are very well displayed within their container, but the only issue I'm facing now it is how to let these three charts be synchronized with their crosshairs when the mouse is anywhere over as in the example below: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/synchronized-charts/

So if you have any possible ideas about how to proceed with this, I'll be very thankful.

[Sassoum]

Any suggestion please ???

[Shawn Quinn]

You can put multiple series in the same chart and then use the "Series.setYAxis()" method and "YAxis.setTop()" method to render one series above the next, and then highcharts will automatically synchronize the crosshairs for you across the different series. Example here:

http://www.moxiegroup.com/moxieapps/gwt-highcharts/showcase/#stockchart-candlestickspline

If you want to keep the charts separate from each other though (similar to the jsfiddle example you showed), you'd need to utilize JSNI to invoke the "drawCrosshair()" method directly on axis object upon mousemove. GWT Highcharts exposes the "Axis.getNativeAxis()" method and "Point.getNativePoint()" method to support these kinds of more advanced scenarios.

[Sassoum]

Thank you so much for your answer, I'll test the first solution you proposed may be it'll fit my needs,
otherwise I'll see with the other one despite it seems more complicated and rough than I expected,
because I thought that the code below could be appropriate in my case especially if we add some of modification.

So, if we consider that we have already implemented three chart: 1 Line chart (chartSyncLine) and 2 Area chart (chartSyncArea1 and chartSyncArea2), what's wrong in this code:

chartSyncLine.setSeriesPlotOptions(new SeriesPlotOptions()
            .setSeriesMouseOverEventHandler(new SeriesMouseOverEventHandler() {
                public boolean onMouseOver(SeriesMouseOverEvent event) {
                    Point points[] = chartSyncArea2.getSeries()[0].getPoints();

                    if (chartSyncLine.getSelectedPoints()[0] != null)
                    {
                        for (int index = 0 ; index < points.length;index++)
                        {
                            Point selectPoint = points[index];
                            if (selectPoint.getX() == chartSyncLine.getSelectedPoints()[0].getX()){ 
                            chartSyncLine.getXAxis(0).update(chartSyncLine.getXAxis().setOption("crosshair", "true"), true);

                            }

                        }
                    }
                   return true;
                }
            }
    ));

thanks a lot.

Sassoum

[Sassoum]

Hi again,

I know I've enough bothered you with my questions, but I'm newby in that domain, and I've very near deadline, but my superior recommand the use of highchart and not the highstock, so if you can take a look to the code I posted above and find what I have missed or how can I improve it to let it work as it is expected, I'll be very grateful.

regards

[Shawn Quinn]

Not sure if you're asking about how to duplicate that jsfiddle example you showed above, but if so I believe you'll need to utilize JSNI to achieve that kind of effect. The key in that example appears to be calling the "drawCrosshair()" method on the XAxis of each chart, as well as the "searchPoint()" method on the Series in order to find the Point that is nearest to the cursor. Those methods (at least currently) are internal/undocumented methods of the Highcharts API, so GWT Highcharts doesn't provide a wrapper for either. Instead, GWT Highcharts provide methods like "Axis.getNativeAxis()" to give you access to the underlying JavascriptObject associated with the Axis/Series/Point/etc. so that you can implement a JSNI method like so:

private static native void nativeDrawCrosshair(JavaScriptObject nativeEvent, JavaScriptObject nativeAxis, JavaScriptObject nativePoint)  /*-{
    nativeAxis.drawCrosshair(nativeEvent, nativePoint);
}-*/;

[Sassoum]

Thank you so much for your response.

So, if I've well understood, I have to implement this method separately and then I call it directly within the onMouseOver() method I posted above ??