How to set Gradient color on SolidGauge ?

[Hong cheong pyo]

I'm fan of highchart!
Highchart is now support solidGauge chart after 1.7 ver.
So, I try to like below code. But I've some problem. JS version has supports color stops pretty easily.
on GWT version, How can I put this on?

     chart.setSolidGaugePlotOptions(new SolidGaugePlotOptions())                                                                            
            .setPane(new Pane()
                        .setCenter("50%","80%")
                        .setSize("140%")
                        .setStartAngle(-90)
                        .setEndAngle(90)
                        .setBackground(new PaneBackground().setBackgroundColor("#EEE")
                                        .setInnerRadius("60%")
                                        .setOuterRadius("100%")
                                        .setShape(Shape.ARC))
                                        )

                .setCredits(new Credits().setEnabled(false))
                .setColors("#DF5353")    <---- color  How to set gradient color ?  How to set stops?

                .setAnimation(true)
                .getYAxis(0)                
                    .setShowFirstLabel(false)
                    .setShowLastLabel(false)
                    .setAxisTitle(new AxisTitle().setText("kW").setY(20))
                    .setMin(0)
                    .setMax(max)
                    .setLineWidth(0)
                    .setMinorTickInterval(null)
                    .setTickPixelInterval(400)
                    .setTickWidth(0);

        Series series = chart.createSeries()
                                .setToolTip(new ToolTip().setValueSuffix(" Watt") )
                                .setPoints( getDataNumbers(max,0) );

Now just colors #DF5353 display as string type not color class. So How to use gradient color?
Please help me!!

[Cory Skowronek]

There is a setColor method which takes an instance of the Color class that you can use to create gradients.

chart.setSolidGaugePlotOptions(new SolidGaugePlotOptions()
    .setColor(new Color()
        .setLinearGradient(0.0, 0.0, 0.0, 1.0)  
        .addColorStop(0, 69, 114, 167)  
        .addColorStop(1, 2, 0, 0, 0) 
    )
);

[Hong cheong pyo]

     It doesn't works. Nothing happened.   Is this a bug?

     chart.setSolidGaugePlotOptions(new SolidGaugePlotOptions()
                                 .setColor(new Color()
                                 .setLinearGradient(0.0, 0.0, 0.0, 1.0)  
                                 .addColorStop(0, 69, 114, 167)  
                                 .addColorStop(1, 2, 0, 0, 0) )

=====================================================
    chart.setSolidGaugePlotOptions(new SolidGaugePlotOptions())                                                                            
            .setPane(new Pane()
                        .setCenter("50%","80%")
                        .setSize("140%")
                        .setStartAngle(-90)
                        .setEndAngle(90)
                        .setBackground(new PaneBackground().setBackgroundColor("#EEE")
                                        .setInnerRadius("60%")
                                        .setOuterRadius("100%")
                                        .setShape(Shape.ARC))
                                        )

                .setCredits(new Credits().setEnabled(false))
                .setColors("#DF5353")    <---- I can change color only this line.

[Shawn Quinn]

If you're asking about the color stops of the gradient that renders from start to finish of the gauge, I believe those colors need to be set on the Y axis (they may work on the plot options as well though, I haven't experimented much with them). Here is a full gauge example that I pulled from another project which utilizes the "setOption()" method to set the "stops" on the Y axis:

private Chart initGaugeChart(String title) {
    Chart chart = new Chart()
        .setType(Series.Type.SOLID_GAUGE)
        .setChartTitleText(null)
        .setPane(new Pane()
            .setCenter("50%", "80%")
            .setStartAngle(-90)
            .setEndAngle(90)
            .setSize("110%")
            .setBackground(new PaneBackground()
                .setBackgroundColor("#EEE")
                .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(title)
            .setStyle(new org.moxieapps.gwt.highcharts.client.Style()
                .setFontSize("13px")
            )
            .setOption("y", -70)
        )
        .setLabels(new YAxisLabels()
            .setOption("y", 16)
        )
        .setMin(0)
        .setMax(MAX_RECORDS_PER_SECOND);

    return chart;
}

private JSONArray addStop(JSONArray stops, int index, double value, String color) {
    JSONArray stop = new JSONArray();
    stop.set(0, new JSONNumber(value));
    stop.set(1, new JSONString(color));
    stops.set(index, stop);
    return stops;
}

Hope that helps!

[Hong cheong pyo]

Thanks a lot!

[GeneticMogambo]

hi I am trying the above example

 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;

As soon as I add the series section i start getting attachDetachException...Here is the exception
com.google.gwt.user.client.ui.AttachDetachException: Exception caught: Exception caught: Exception caught: Exception caught: (String) @org.moxieapps.gwt.highcharts.client.BaseChart::nativeRenderChart(Ljava/lang/String;Lcom/google/gwt/core/client/JavaScriptObject;ZZLcom/google/gwt/core/client/JavaScriptObject;Lcom/google/gwt/core/client/JavaScriptObject;Lcom/google/gwt/core/client/JavaScriptObject;Lcom/google/gwt/core/client/JavaScriptObject;Lcom/google/gwt/core/client/JavaScriptObject;Lcom/google/gwt/core/client/JavaScriptObject;Lcom/google/gwt/core/client/JavaScriptObject;Lcom/google/gwt/core/client/JavaScriptObject;Lcom/google/gwt/core/client/JavaScriptObject;Lcom/google/gwt/core/client/JavaScriptObject;)([string: 'Chart', JavaScript object(69), bool: false, bool: false, JavaScript object(116), JavaScript object(117), JavaScript object(118), JavaScript object(109), JavaScript object(112), JavaScript object(108), JavaScript object(110), JavaScript object(111), JavaScript object(114), JavaScript object(115)]): Highcharts error #17: www.highcharts.com/errors/17

Was wondering if someone could shed a light on why this happens. let me know if more information is needed.

[GeneticMogambo]

Answering my own question. Apparently I had to include the solid-gauge.js file into my base html file.