Create Table using Highcharts GWT and DrillUp

[KARTIKEYAN]

I am creating charts using Highcharts GWT APIs.
I would also like to create tables for the corresponding chart data.
When I explored, I found
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/export-data/showtable/
The following java script will enable the table

exporting: {
showTable: true
}

But I am not able to find this API in 'highcharts-1.7.0.jar'

I can implement custom logic for this.But I am using Drill Down APIs hence I want the table also to be loaded according to the Drilled Down Chart.

I am also implementing Drill Down feature from 'highcharts-1.7.0.jar' ,using the java script reference
http://jsfiddle.net/ffc4jhb7/
and
GWT API reference
http://www.moxiegroup.com/moxieapps/gwt-highcharts/apidocs/org/moxieapps/gwt/highcharts/client/Drilldown.html#setDrillUpButtonRelativeTo(org.moxieapps.gwt.highcharts.client.MapNavigation.AlignTo)

I am able to achieve drill down but 'Back To' (Drill Up) option is not working.
I am getting 'Back To ' Button , but when I click on it ,it is clearing the plots in the graph and the graph remains same and not going backward.

I am using the following APIs.
chart.setDrilldown( new Drilldown().setSeries( drillSeries ) );
chart.addSeries( series );
// 'series' variable is loaded with Points[] which has drilldown Id references

Not sure why Drill Up is not working after Drill Down.
Please Help.

[Shawn Quinn]

Regarding the exporting.showTable parameter, you should be able to set that up using the "setOption" method. E.g.

final Chart chart = new Chart()
    .setType(Series.Type.BAR)
    .setExporting(new Exporting()
        .setEnabled(true)
        .setOption("showTable", true)
    );

Regarding the drilldown, there is a sample in the showcase that shows the "Back To" button operating correctly which you may be able to get some pointers from here:

http://www.moxiegroup.com/moxieapps/gwt-highcharts/showcase/#dynamic-column-drilldown

Hope that helps!

[KARTIKEYAN]

Hi Shawn,

Thanks for the beautiful demo.It was help full.
But I am facing problem in my setup with LINE and SPLINE charts.
I used the same code and replced the PIE with 'LINE' and 'SPLINE' chart , I faced the same problem of not going back.
Moreover when I used the same PIE chart ,I didn't face this problem until I click the Pie Chart.
After I click the pie chart it cleared all the points and stopped there .
It threw the following in the console,
NS_ERROR_FAILURE: Failure @ https://code.highcharts.com/highcharts.js:57

This error appears not only with drill down but even when I try to move a fresh page with highchart.

I am using the latest versions of js in my Application,html
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

Firefox version 24, (In order to run in Dev Mode)
GWT 2.5.1

In your showcase tool, it works like a boss.
Not sure what am I missing.

[KARTIKEYAN]

Related to show table I did as per your suggestion
chart.setExporting( new Exporting().setOption( "showTable", true ) );

But table didn't appear below the chart.

[KARTIKEYAN]

Hi Shawn,

When I built as war file, drilll down worked fine .
The problem was with the Dev Mode.
But still the table is not appearing even in war.

Can you please add this as an example to your show case?
It would be helpfull.

Thanks,

[KARTIKEYAN]

Hi Shawn,

I have found the problem,
I have not added
<script src="https://code.highcharts.com/modules/export-data.js"></script>
in Application.html.

Thank you so much for your support.'

[KARTIKEYAN]

Hi Shawn,

I am facing a problem after I do 'Export as pdf' or 'any image' files when 'data table' is present.
The same data table is getting (added) printed on the screen and there after 'Drill Up' and 'Export' is not working.Even If I navigate to someother page ,the data table which got printed(added) remains same unless I reload the entire application.

But this issue is not there when 'data table' is not present.
Please help!

[KARTIKEYAN]

A temporary hack was done using CSS to resolve the data table getting added on top of chart

body > .highcharts-data-table {
display: none !important;
}