Highcharts Activity Gauge

[jan10101]

Hey Guys,

is there a way to get the Activity Gauge working in GWT? Seems to be not implemented yet by GWT Highcharts.

Is there a way to set the type manually without the enum type or another workaround?

http://www.highcharts.com/demo/gauge-activity

I tried to modify this code for the solid gauge, but did not get it working:

Chart chart = new Chart()
                .setType(Series.Type.SOLID_GAUGE)
                .setChartTitleText(null)
                .setPane(new Pane()
                    .setCenter("50%", "50%")
                    .setStartAngle(-90)
                    .setEndAngle(90)
                    .setSize("100%")
                    .setBackground(new PaneBackground()
                        .setBackgroundColor("red")
                        .setInnerRadius("60%")
                        .setOuterRadius("100%")
                        .setOption("shape", "arc")
                    )
                )
                .setSeriesPlotOptions(new SeriesPlotOptions()
                    .setDataLabels(new DataLabels()
                        .setY(15)
                        .setBorderWidth(0)
                        .setUseHTML(true)
                        .setFormat("<div style=\"text-align:center\"><span style=\"font-size:16px;color:#000\">{y}</span><br/><span style=\"font-size:12px;color:silver\">reads/sec</span></div>")
                    )
                )
                .setMargin(0, 0, 0, 0)
                //.setSize(200, 150)
                .setToolTip(new ToolTip()
                    .setEnabled(false)
                )
                .setCredits(new Credits()
                    .setEnabled(false)
                )
                .setExporting(new Exporting()
                    .setEnabled(false)
                );

            JSONArray stops = new JSONArray();
            addStop(stops, 0, 0.1, "#55BF3B"); // green
            addStop(stops, 1, 0.5, "#DDDF0D"); // yellow
            addStop(stops, 2, 0.9, "#DF5353"); // red

            chart.getYAxis()
                .setOption("stops", stops)
                .setLineWidth(0)
                .setMinorTickInterval(null)
                .setTickPixelInterval(400)
                .setTickWidth(0)
                .setAxisTitle(new AxisTitle()
                    .setText("myGauge")
                    .setStyle(new org.moxieapps.gwt.highcharts.client.Style()
                        .setFontSize("13px")
                    )
                    .setOption("y", -70)
                )
                .setLabels(new YAxisLabels()
                    .setOption("y", 16)
                )
                .setMin(0)
                .setMax(200);

             Series mySeries = chart.createSeries();
             //mySeries.setOption("series/data",80);
             chart.addSeries(mySeries);

            return chart;

Best regards
Jan

[Shawn Quinn]

Am running between things today so I'm not able to debug your example right now, but I'd expect GWT Highcharts could support that chart type since it's just a variant of a "solid gauge" type. Here's a quick working "solid gauge" example chart that I'm copying/pasting from elsewhere in hopes that it's of help to you:

final Chart chart = new Chart()
        .setType(Series.Type.SOLID_GAUGE)
        .setPane(new Pane()
                .setCenter("50%", "50%")
                .setSize("140%")
                .setStartAngle(-90)
                .setEndAngle(90)
                .setBackground(new PaneBackground()
                        .setBackgroundColor("#EEE")
                        .setInnerRadius("60%")
                        .setOuterRadius("100%")
                        .setOption("shape", "arc")
                )
        );

chart.setGaugePlotOptions(new GaugePlotOptions()
        .setDataLabels(new DataLabels()
                .setEnabled(true)
                .setY(30)
                .setFormat("{point.y} km/h")
        )
        .setPivotOptions(
                new Pivot()
                        .setRadius("2%")
        )
        .setDialOptions(
                new Dial()
                        .setRearLength("0%")
                        .setBaseWidth(10)
        )
);

// Primary axis
chart.getYAxis(0)
        .setLineWidth(0)
        .setMinorTickInterval(null)
        .setTickPixelInterval(400)
        .setTickWidth(0)
        .setAxisTitle(new AxisTitle()
            .setY(-70)
        )
        .setLabels(new YAxisLabels()
            .setY(16)
        );

chart.setSolidGaugePlotOptions(new SolidGaugePlotOptions()
    .setDataLabels(new DataLabels()
            .setY(5)
            .setBorderWidth(0)
            .setUseHTML(true)
    )
);

final Series series = chart.createSeries();
chart.addSeries(series
        .setName("Random speed")
        .addPoint(80)
);

final Timer tempTimer = new Timer() {
    @Override
    public void run() {
        long inc = Math.round((Random.nextDouble() - .5) * 20);
        long cur = series.getPoints()[0].getY().longValue();
        series.getPoints()[0]
                .update(cur + inc);

    }
};

[jan10101]

Thanks for reply!

The solid gauge works for me. But I have no idea what I have to change to make it a activity gauge. The activity gauge has the same type "solidgauge", not sure what makes the difference ^^