- GWT Highcharts Tutorial
- GWT Highcharts - Home
- GWT Highcharts - Overview
- Environment Setup
- Configuration Syntax
- GWT Highcharts - Line Charts
- GWT Highcharts - Area Charts
- GWT Highcharts - Bar Charts
- GWT Highcharts - Column Charts
- GWT Highcharts - Pie Charts
- GWT Highcharts - Scatter Chart
- GWT Highcharts - Dynamic Charts
- GWT Highcharts - Combinations
- GWT Highcharts - 3D Charts
- GWT Highcharts - Map Charts
- GWT Highcharts Useful Resources
- GWT Highcharts - Quick Guide
- GWT Highcharts - Useful Resources
- GWT Highcharts - Discussion
GWT Highcharts - 3D Pie Chart
Following is an example of a 3D Pie Chart.
We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter.
An example of a 3D Pie Chart is given below.
Configurations
Let us now see the additional configurations/steps taken.
option3D
Configure the pie chart type to be 3D based. Options3D sets the 3D options enabled.
chart.setOptions3D(new Options3D() .setEnabled(true) .setAlpha(45) .setBeta(0) .setDepth(100) )
Example
HelloWorld.java
package com.tutorialspoint.client; import org.moxieapps.gwt.highcharts.client.Chart; import org.moxieapps.gwt.highcharts.client.Legend; import org.moxieapps.gwt.highcharts.client.Options3D; import org.moxieapps.gwt.highcharts.client.Point; import org.moxieapps.gwt.highcharts.client.Series; import org.moxieapps.gwt.highcharts.client.ToolTip; import org.moxieapps.gwt.highcharts.client.ToolTipData; import org.moxieapps.gwt.highcharts.client.ToolTipFormatter; import org.moxieapps.gwt.highcharts.client.labels.DataLabelsData; import org.moxieapps.gwt.highcharts.client.labels.DataLabelsFormatter; import org.moxieapps.gwt.highcharts.client.labels.PieDataLabels; import org.moxieapps.gwt.highcharts.client.plotOptions.PiePlotOptions; import org.moxieapps.gwt.highcharts.client.plotOptions.PlotOptions.Cursor; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.RootPanel; public class HelloWorld implements EntryPoint { public void onModuleLoad() { final Chart chart = new Chart() .setType(Series.Type.PIE) .setChartTitleText("3D Pie Chart Demo") .setPlotBackgroundColor((String) null) .setPlotBorderWidth(null) .setPlotShadow(false) .setPiePlotOptions(new PiePlotOptions() .setAllowPointSelect(true) .setCursor(Cursor.POINTER) .setPieDataLabels(new PieDataLabels() .setConnectorColor("#000000") .setEnabled(true) .setColor("#000000") .setFormatter(new DataLabelsFormatter() { @Override public String format(DataLabelsData dataLabelsData) { return "<b>" + dataLabelsData.getPointName() + "</b>: " + dataLabelsData.getYAsDouble() + " %"; } }) ) .setStartAngle(126) .setDepth(75) ) .setLegend(new Legend() .setLayout(Legend.Layout.VERTICAL) .setAlign(Legend.Align.RIGHT) .setVerticalAlign(Legend.VerticalAlign.TOP) .setX(-100) .setY(100) .setFloating(true) .setBorderWidth(1) .setBackgroundColor("#FFFFFF") .setShadow(true) ) .setToolTip(new ToolTip() .setFormatter(new ToolTipFormatter() { @Override public String format(ToolTipData toolTipData) { return "" + toolTipData.getPointName() + ": " + toolTipData.getYAsDouble() + " %"; } })) .setColors("#EBEE00", "#FF00FF", "#0000FF") .setOptions3D(new Options3D() .setEnabled(true) .setAlpha(45) .setBeta(0) .setDepth(100) ); chart.addSeries(chart.createSeries() .setName("Browser share") .setPoints(new Point[]{ new Point("Dots", 80.0), new Point("Fruit", 10.0), new Point("Ghosts", 10.0) }) ); RootPanel.get().add(chart); } }
Result
Verify the result.
gwt_highcharts_3d_charts.htm
Advertisements