Difficulty creating chart in GWT
Brought to you by:
moxiesquinn
Menu
▾
▴
I've created a sample chart in jsfiddle, but I can't achieve the same results with GWT Highcharts. the first problem I've run into is I can't create a line marker for the bar chart, the only options available in the enumeration is triangle, square and circle. The second issue, which I can't explain, is the graphs don't overlap correctly as they do with the js code.
Any help would be appreciated.
Thanks
http://jsfiddle.net/tM6mS/
public Chart createClosingBalancesChart() { Chart chart = new Chart().setType(Series.Type.BAR) .setMarginRight(10); ChartTitle chartTitle = new ChartTitle(); chartTitle.setOption("align", ChartTitle.Align.LEFT) .setText("Closing Balances") .setX(0) .setOption("/style/fontWeight", "bold") .setOption("/style/fontFamily", "Calibri") .setOption("/style/color", "black") .setOption("/style/fontSize", "18px"); chart.setMarginTop(5) .setMarginBottom(10) .setMarginBottom(10) .setMarginLeft(45) .setBorderWidth(0) .setCredits(new Credits().setEnabled(false)); chart.setSeriesPlotOptions(new SeriesPlotOptions() .setStacking( PlotOptions.Stacking.NORMAL) .setColor(new Color("#000")) .setShadow(false) .setOption("borderWidth", "2") .setOption("borderColor", "#ccc")); chart.getXAxis() .setCategories("") .setTickLength(0) .setLineColor("#999") .setLineWidth(0) .setLabels(new XAxisLabels().setStyle(new Style().setFontWeight("bold"))); chart.getYAxis(0) .setMin(0) .setMax(100) .setTickColor("#ccc") .setTickWidth(0) .setTickLength(0) .setGridLineWidth(0) .setTickInterval(25) .setEndOnTick(true) .setAxisTitle(new AxisTitle().setText("")) .setLabels(new YAxisLabels().setEnabled(false)); chart.getYAxis(1) .setMin(0) .setMax(100) .setTickColor("#ccc") .setTickWidth(0) .setTickLength(0) .setGridLineWidth(0) .setTickInterval(25) .setEndOnTick(true) .setAxisTitle(new AxisTitle().setText("")) .setLabels(new YAxisLabels().setEnabled(false)); chart.setLegend(new Legend().setEnabled(false)) .setToolTip(new ToolTip().setEnabled(false)); Series greyBarLeft = chart.createSeries(); greyBarLeft.setType( Type.BAR) .setName("greyBarLeft") .setPlotOptions(new ColumnPlotOptions() .setPointWidth(10) .setColor(new Color("#ddd"))) .addPoint(15) .setYAxis(0) .setStack(1); Series greyBarRight = chart.createSeries(); greyBarRight.setType( Type.BAR) .setName("greyBarLeft") .setPlotOptions(new ColumnPlotOptions() .setPointWidth(10) .setColor(new Color("#ddd"))) .addPoint(15) .setYAxis(0) .setStack(1); Series centerBar = chart.createSeries(); centerBar.setType( Type.BAR) .setName("centerBar") .setPlotOptions(new ColumnPlotOptions() .setPointWidth(10) .setColor(new Color("#fff"))) .addPoint(70) .setYAxis(0) .setStack(1); Series marker = chart.createSeries(); marker .setType(Type.SCATTER) .setName("Target") .setYAxis(0) .addPoint(51) // Live value goes here 1-100 .setPlotOptions( new ScatterPlotOptions() .setMarker(new Marker().setOption("symbol","line") .setLineWidth(2) .setRadius(8) .setLineColor(new Color("#000")))) .setStack(1); Series colorShade = chart.createSeries(); colorShade .setName("colorShade") .addPoint(50) .setPlotOptions(new ColumnPlotOptions() .setPointWidth(10) .setColor(new Color(51,204,51,0.3)) .setBorderColor("#ccc")); colorShade.setYAxis(1); chart .addSeries(greyBarLeft) .addSeries( centerBar ) .addSeries( greyBarRight ) .addSeries( marker ) .addSeries( colorShade ); chart.setChartTitle(chartTitle); // chart.setWidth("30%"); chart.setWidth("300px"); chart.setHeight("100%"); return chart; }Hi Gary,
In order to add a new symbol type you'd need to add extend Highcharts to support a new symbol renderer function to the Javascript of your page somewhere, like is shown at the top of that jsFiddle you referenced. E.g.
$.extend(Highcharts.Renderer.prototype.symbols, { line: function(x, y, r) { return ['M',x-r,y,'L',x+r,y]; } });The rest of your function looked close, but the YAxis appear to have been set wrong. Here's an updated version of that function that renders identically to the jsFiddle (minus the custom symbol renderer). Note that this code uses the updated "BarPlotOptions" coming in the 1.1.3 release that contains additional properties that weren't there in the 1.1.2 release, as that's the version I had in my development environment to test against. If you're using 1.1.2 you'll need to use the BarPlotOptions.setOption() method to set those properties instead.
public Chart createClosingBalancesChart() { final Chart chart = new Chart() .setType(Series.Type.BAR) .setChartTitle(null) .setMarginTop(5) .setMarginRight(15) .setMarginBottom(10) .setMarginLeft(45) .setBorderWidth(0) .setLegend(new Legend().setEnabled(false)) .setCredits(new Credits().setEnabled(false)) .setExporting(new Exporting().setEnabled(false)); chart.getXAxis(0) .setCategories("") .setTickLength(0) .setLineColor("#999") .setLineWidth(0) .setLabels(new XAxisLabels().setStyle(new Style().setFontWeight("bold"))); chart.getYAxis(0) .setMin(0) .setMax(100) .setTickColor("#ccc") .setTickWidth(0) .setTickLength(0) .setGridLineWidth(0) .setTickInterval(25) .setEndOnTick(true) .setAxisTitle(new AxisTitle().setText("")) .setLabels(new YAxisLabels().setEnabled(false)); chart.getYAxis(1) .setMin(0) .setMax(100) .setTickColor("#ccc") .setTickWidth(0) .setTickLength(0) .setGridLineWidth(0) .setTickInterval(25) .setEndOnTick(true) .setAxisTitle(new AxisTitle().setText("")) .setLabels(new YAxisLabels().setEnabled(false)); chart.setToolTip(new ToolTip() .setEnabled(true) .setBackgroundColor(new Color(255, 255, 255, .85)) .setBorderWidth(0) .setShadow(true) .setStyle(new Style() .setFontSize("10px") .setOption("padding", 2) ) .setFormatter(new ToolTipFormatter() { public String format(ToolTipData toolTipData) { return toolTipData.getSeriesName() + ": <strong>" + NumberFormat.getFormat("#.00").format(toolTipData.getYAsDouble()) + "</strong>"; } }) ); chart.setBarPlotOptions(new BarPlotOptions() .setStacking(PlotOptions.Stacking.NORMAL) .setColor("#000") .setShadow(false) .setBorderWidth(2) .setBorderColor("#ccc") ); Series measure1 = chart.createSeries(); measure1 .setName("Measure") .setPlotOptions(new BarPlotOptions() .setPointWidth(10) .setColor(new Color("#ddd"))) .addPoint(20); Series measure2 = chart.createSeries(); measure2 .setName("Measure2") .setPlotOptions(new BarPlotOptions() .setPointWidth(10) .setColor(new Color("#fff"))) .addPoint(60); Series measure3 = chart.createSeries(); measure3 .setName("Measure3") .setPlotOptions(new BarPlotOptions() .setPointWidth(10) .setColor(new Color("#ddd"))) .addPoint(20); Series target = chart.createSeries(); target.setType(Series.Type.SCATTER) .setName("Target") .setPlotOptions(new ScatterPlotOptions() .setMarker(new Marker() .setLineWidth(2) .setRadius(1) .setLineColor(new Color("#000")) .setSymbol(Marker.Symbol.SQUARE) ) ) .addPoint(51); Series colorShade = chart.createSeries(); colorShade .setName("Measure3") .addPoint(50) .setYAxis(1) .setPlotOptions(new BarPlotOptions() .setPointWidth(10) .setColor(new Color(51, 204, 51, 0.3)) .setBorderColor("#ccc")); chart .addSeries(measure1) .addSeries(measure2) .addSeries(measure3) .addSeries(target) .addSeries(colorShade); chart.setWidth("350px"); chart.setHeight("40px"); return chart; }Can you let me know if you're able to get things working the way you'd like using that example code?
Thanks,