Gauge Issue

[Hamza]

Hi,

Im trying to implement gauge using gwt-highcharts, I get this exception: com.google.gwt.core.client.JavaScriptException: (TypeError): undefined is not a function

here is my code :

public Chart createChart ()
{

    final Chart chart = new Chart ()

            .setOption ("chart", getChartType ())
            .setChartTitle (new ChartTitle ()
                    .setText ("speedometre")
            )
            .setOption ("yAxis", getYaxis ())

            .setPane (new Pane ()
                    .setStartAngle (-150)
                    .setEndAngle (150)
                    .setOption ("background", new JSONObject (addBackground ())))

            .setOption ("series",getSerie ());


    System.out.println (chart.getOptions ().toString ());
    return chart;
}

I print chart Options and put it at jsfiddle he is the link : http://jsfiddle.net/SFmft/ It seems working fine.

thx for help

[Shawn Quinn]

That's not quite a complete code example so I can't tell for sure what's going wrong, but one thing that you likely need to do is:

.setOption("type", getChartType())

[Instead of: .setOption("chart", getChartType()) ]

Here's a basic working gauge example for your reference in case it helps:

        Chart chart = new Chart()
            .setAlignTicks(false)
            .setPlotBackgroundColor((String) null)
            .setPlotShadow(false)
            .setToolTip(new ToolTip()
                .setValueSuffix(" km/h")
            )
            .setPane(new Pane()
                .setStartAngle(-150)
                .setEndAngle(150)
            )
            .setSeriesPlotOptions(new SeriesPlotOptions()
                .setDataLabels(new DataLabels()
                    .setOption("backgroundColor", new BackgroundColor()
                        .setOption("linearGradient", new LinearGradient()
                            .setOption("x1", 0)
                            .setOption("y1", 0)
                            .setOption("x2", 0)
                            .setOption("y2", 1)
                        )
                        .setOption("stops", new Object[][]{
                            {0, "#DDD"},
                            {1, "#FFF"}
                        })
                    )
                )
            );

        chart.getYAxis()
            .setMin(0)
            .setMax(200)
            .setOffset(-25)
            .setLineColor("#339")
            .setLineWidth(2)
            .setLabels(new YAxisLabels()
                .setOption("distance", -20)
                .setOption("rotation", "auto")
            );

        chart.addSeries(chart.createSeries()
            .setOption("type", "gauge")
            .setName("Speed")
            .setPoints(new Number[]{80})
        );

Note that you need to make sure you're including the "highcharts-more.js" in your source page if you're going to make use of gauge or polar charts.

Hope that helps,

 -Shawn

[Hamza]

Thanks for the Replay Shawn.
It helps a lot.