Skip to content

ascendtech/gwt-highcharts

Repository files navigation

A relatively comprehensive JSInterop wrapping of Highcharts.js.

Getting Started

Gradle

Add AST Maven Repo

  allprojects {
    repositories {
      ...
      maven { url 'https://maven.ascend-tech.us/repo' }
    }
  }

Add Dependency:

  compile 'us.ascendtech:highcharts:1.2.3'
  compile 'us.ascendtech:highcharts:1.2.3:sources'

Gradle Kotlin

Add AST Maven Repo

  allprojects {
    repositories {
        ...
        maven {
            url = uri("https://maven.ascend-tech.us/repo")
        }
    }
  }

Add Dependency:

  compile("us.ascendtech:highcharts:1.2.3")
  compile("us.ascendtech:highcharts:1.2.3:sources")

Maven

Add AST Maven

  <repositories>
    <repository>
      <id>AST Maven</id>
      <url>https://maven.ascend-tech.us/repo</url>
    </repository>
  </repositories>

Add Dependency

  <dependency>
    <groupId>us.ascendtech</groupId>
    <artifactId>highcharts</artifactId>
    <version>1.2.3</version>
</dependency>
  <dependency>
    <groupId>us.ascendtech</groupId>
    <artifactId>highcharts</artifactId>
    <version>1.2.3</version>
    <classifier>sources</classifier>
  </dependency>

Example in Java

Add dependency to gwt.xml:

<inherits name="us.ascendtech.highcharts.Highcharts"/>
// Column chart
JsArray<Object> seriesDataArray = new JsArray<>();
JsArray<String> categories = new JsArray<>();

for (String name : data.keySet()) {

  SeriesData seriesData = new SeriesData();
  seriesData.setName(name);
  seriesData.setY(data.get(name)); //double value
  seriesDataArray.push(seriesData);

  categories.push(name);
}

JsArray<String> colors = new JsArray<>(CUSTOM_COLORS); // array of colors or null to default to highcharts colors

ChartOptions options = new ChartOptions()
                        .setChart(new Chart()
                          .setHeight(320.0))
                          .setExporting(new Exporting().setUrl(customExportUrl))
                          .setTitle(new Title().setText("My Example Chart")));

YAxis yAxis = (YAxis) new YAxis()
                        .setMin(0.0)
                        .setAllowDecimals(false)
                        .setTitle(new AxisTitle()
                        .setText("Counts"));
options.setyAxis(yAxis);

XAxis xAxis = ((XAxis) new XAxis()
                        .setAllowDecimals(false)
                        .setCategories(categories));
options.setxAxis(xAxis);

PlotOptions plotOptions = new PlotOptions();
plotOptions.setColumn(new Column().setColors(colors));
plotOptions.setSeries(new Series().setCursor("pointer").setEvents(seriesEvents));
options.setPlotOptions(plotOptions);

SeriesEvents seriesEvents = new SeriesEvents();
Click click = (event) -> DomGlobal.console.log(event);
seriesEvents.setClick(click);

Series series = new Series()
                  .setType(SeriesTypes.COLUMN.getSeriesType())
                  .setData(seriesDataArray)
                  .setStacking("normal")
                  .setShowInLegend(true);
options.setSeries(new JsArray<>(series));

FlowPanel chartFlowPanel = new FlowPanel();
chartFlowPanel.getElement().setId("myChartId");
chartDiv.addAttachHandler(event -> {
  if (event.isAttached()) {
    Highcharts.chart("myChartId", options);
  }
});