I am trying to add series to my chart application using gwt-highchart (using the latest gwt-highchart 1.6.0 and Highstock 2.3.4 versions). Everything seems fine until the third series. When I try to add the third one I got this error:
com.google.gwt.core.client.JavaScriptException: (String)
#org.moxieapps.gwt.highcharts.client.BaseChart::nativeAddSeries(Lcom/google/gwt/core
/client/JavaScriptObject;Lcom/google/gwt/core/client/JavaScriptObject;ZZ)([JavaScript
object(4953), JavaScript object(5135), bool: true, bool: true]): Highcharts error #18:
www.highcharts.com/errors/18
And here is my code (runs within a loop):
// Create a new serie with a new yAxis
Series newSeries = chart.createSeries().setYAxis(index).setPlotOptions(new LinePlotOptions().setColor(tag.getColor()));
// Set new yAxis options
chart.getYAxis(index).setPlotLines(chart.getYAxis(index).createPlotLine().setValue(0).setWidth(1).setColor(tag.getColor())).setLabels(new YAxisLabels().setEnabled(false)).setTickLength(0).setOffset(60).setStartOnTick(false)
.setEndOnTick(false).setGridLineWidth(0).setMaxPadding(DEFAULT_YAXIS_MAX_PADDING).setMinPadding(DEFAULT_YAXIS_MIN_PADDING)
.setAxisTitle(new AxisTitle().setText(null).setStyle(new Style().setColor(tag.getColor())));
// Add the serie to the chart
chart.addSeries(newSeries.setName("Test " + index));
First two series are OK as I said before but third one throws the above exception (when I debug the application, I can see the newly created yAxis references).
Here is the line which throws the exception:
chart.addSeries(newSeries.setName("Test " + index));
Thanks
I've figured it out finally!
GWT-HighCharts seems to be the problem. It does not add the new YAxis to the Chart at all. So you must add YAxis via native calls like this;
private static native void nativeAddAxis(JavaScriptObject chart, JavaScriptObject axisOptions, boolean isX, boolean redraw, boolean animationFlag) /*-{
chart.addAxis(axisOptions, isX, redraw, animationFlag);
}-*/;
Just call this native method before adding the new series.
// Create new series
Series newSeries = chart.createSeries().setYAxis(index);
newSeries.setPlotOptions(new LinePlotOptions().setColor(tag.getColor()));
newSeries.setName(index + 1 + ") ");
// Create a new YAxis
YAxis yAxis = chart.getYAxis(index).setPlotLines(chart.getYAxis(index).createPlotLine().setValue(0).setWidth(1).setColor(tag.getColor())).setLabels(new YAxisLabels().setEnabled(false)).setTickLength(0).setOffset(60)
.setStartOnTick(false).setEndOnTick(false).setGridLineWidth(0).setPlotLines().setMaxPadding(DEFAULT_YAXIS_MAX_PADDING).setMinPadding(DEFAULT_YAXIS_MIN_PADDING)
.setAxisTitle(new AxisTitle().setText(null).setStyle(new Style().setColor(tag.getColor())));
// IMPORTANT!: New YAxis must be added to the chart via native calls since gwt-highcharts wrapper doesn't do that properly!
nativeAddAxis(chart.getNativeChart(), yAxis.getOptions().getJavaScriptObject(), false, false, false);
// Physical attach
chart.addSeries(newSeries);
Here is the cause of this type of errors:
If you are using GWT-HighCharts wrapper, you must make the configuration before adding chart to DOM! It seems that after adding it to the DOM, any configuration changes does not seem to work at all!
Happy coding!
please check the index value.
if index is more than the axis count this error may occur
highcharts error #18 indicates that the axis trying to access does not exist.
here is the link http://www.highcharts.com/errors/18
Hope that will help you
Related
Following the doc and the example provided by cno I tried making a Bar Chart but despite the tries and the tests I always fall on the same result. I am sure I either missed something or I made a mistake somewhere, maybe there is some parameter I didn't understand well like the scale
Current BarChart Code
public Form createBarChartForm()
{
XYMultipleSeriesRenderer rendererTwo
= new XYMultipleSeriesRenderer(300);
rendererTwo.setBarWidth(300);
// rendererTwo.addYTextLabel(1, "ok");
// rendererTwo.addXTextLabel(5, "Ouuhh");
rendererTwo.setXAxisMin(1, 50);
rendererTwo.setXAxisMax(5, 200);
rendererTwo.setGridColor(ColorUtil.GREEN, 10);
// rendererTwo.setDisplayValues(true);
// rendererTwo.setYAxisMin(5);
// rendererTwo.setYAxisMax(5, 10);
com.codename1.charts.models.XYMultipleSeriesDataset dataset
= new XYMultipleSeriesDataset();
XYSeries xYSeries = new XYSeries("Hi", 50);
XYSeries xYSeries2 = new XYSeries("Hello", 150);
XYSeries xYSeries3 = new XYSeries("Hola", 80);
dataset.addSeries(xYSeries);
dataset.addSeries(xYSeries2);
dataset.addSeries(xYSeries3);
com.codename1.charts.views.BarChart chart = new com.codename1.charts.views.BarChart(
dataset, rendererTwo, BarChart.Type.STACKED);
// Wrap the chart in a Component so we can add it to a form
ChartComponent c = new ChartComponent(chart);
// Create a form and show it.
Form f = new Form("Budget", new com.codename1.ui.layouts.BorderLayout());
f.add(com.codename1.ui.layouts.BorderLayout.CENTER, c);
return f;
}
Result (Always The same when no errors)
Result (Stack Overflow upload would show at the bottom right and not entierly)
I found a chart demo on cno's website and it was more than I asked for.
Link To Charts Demo
It contains demo for all charts and it's well made.
I download the git project and tested out the one I need (extracted some methods) and it works. I would say I was 50% in the way of getting there.
I apologize if this was useless as I didn't really think the website would contain demo and I just fell on the site randomly.
I'have the following code which has a problem.
//reset the yAxis with new value
$$("chartStock1").yAxis_setter({ start:lowestValue, step:stepValue, end:highestValue, template:function(value){ return value } });
//clear data
$$("chartStock1").clearAll()
//reload data
$$("chartStock1").parse(jiugangArray);
I'd like to reset the yAxis of the line chart and the values seems OK. Then I reload the data by the 'parse' function and the data in the array is also OK.
The line chart was drawn due to the older yAxis, but not due to the brand-new yAxis value. This is quite confusing.
It is more correct to use define() method instead of setter:
$("chartStock1").define("yAxis",{
start:lowestValue,
step:stepValue,
end:highestValue,
template:function(value){ return value }
});
I'm trying to write a method in GWT to override the series.show function for all Highcharts series, on show I want to essentially copy the series, remove the series from the chart, and readd it so that showing the series will redraw the line (instead of the default behavior where the line appears and the chart redraws). I have this modeled in a Jsfiddle: http://jsfiddle.net/ax3o8uf3/16/
I used Moxie's highcharts wrapper for GWT and used the setSeriesPlotOptions() method to set the series show event handler and call this native method from inside the onShow().
public static native void showSeries(JavaScriptObject series, JavaScriptObject chart) /*-{
var options = series.options;
options.color = series.color;
options.index = series.index;
options.marker.symbol = series.symbol;
series.remove();
options.visible = true;
chart.addSeries(options);
}-*/;
and everything worked fine. Then we updated the project's highcharts and highstock.js files and it broke everything. Now hiding and showing a series in the legend will cause it to redraw fine for the first series you do it for, but as soon as you try and show another series it breaks and goes back to the default functionality for all series. Any ideas on what I'm doing wrong or what might be causing it to not work after showing a second series on the graph?
I'm not sure why but for some reason using the seriesShowEventHandler() caused it to break after trying to show more than one series, the solution I came up with was something like this:
setSeriesPlotOptions(new SeriesPlotOptions().setSeriesLegendItemClickEventHandler(new SeriesLegendItemClickEventHandler() {
#Override
public boolean onClick(SeriesLegendItemClickEvent seriesLegendItemClickEvent) {
Series series = getSeries(seriesLegendItemClickEvent.getSeriesId());
if(seriesLegendItemClickEvent.isVisible()) {
series.hide();
} else if((series.getOptions().get("type").toString()).equals("\"line\"")){
removeAndReAddSeries(getNativeChart(), series.getNativeSeries());
} else {
series.show();
}
return false;
}
}));
I have a great problem with ZK charts!
I have 2 type of chart: a chart with data of the current day (so this chart is generated automatically) and a chart with data of a clicked date.
The first chart works correctely, the second not!
If I have clicked on a date, I build a graph! But it's impossible to modify the label position or name of label! And I need to modify these things. This is my graph:
<charts width="1700" style="height: 400px" type="line" model="#bind(vm.chart2)" title="">
</charts>
When I clicked I call this method:
#Command
#NotifyChange("chart2")
public ChartsModel viewGraph(#BindingParam("self") Group self){
String a = self.getLabel();//this is for passed a parameter
ServiceImpl usr = new ServiceImpl();
chart2 = usr.viewGraph(a);
return chart2;
}
viewGraph is so built:
#Override
public ChartsModel viewGraph(String data) {
//chart2 = new Charts();
chart2.setModel(LineLabelsData.setCategoryModel2(data));
chart2.getXAxis().getLabels().setRotation(180);
chart2.getYAxis().getTitle().setText("TEXT");
chart2.getTooltip().setEnabled(false);
chart2.getXAxis().getLabels().setRotation(180);
LinePlotOptions linePlotOptions =
chart2.getPlotData().getPlotOptions().getLine();
linePlotOptions.setEnableMouseTracking(false);
linePlotOptions.getDataLabels().setEnabled(true);
return chart2.getModel();
}
If I print something in this method my console view it correctely! The problem is that
chart2.getYAxis().getTitle().setText("TEXT");
does not work like
chart2.getXAxis().getLabels().setRotation(180);
How can I change that values?
To change yAxis title, you can simply call chart2.getYAxis().setTitle("title");
You may want to post your questions in ZK Forum rather than stackoverflow as our community users are experienced in ZK, and can help you quicker.
I have whit JavaFX Scene builder made layout for my application. On my linechart I drow some graphs depending on dates. By default JavaFX LineChart doesn't support dates. So I use this librariy http://myjavafx.blogspot.com/2013/09/javafx-charts-display-date-values-on.html and it works fine.
Librray also allows setLowerBound and setUpperBound methods. I havev wrote code bit it doesn't work.
My FXML code (ONLY FOR LINECHART):
<LineChart fx:id="lineChart" animated="false">
<xAxis>
<DateAxis side="BOTTOM" label="Napoved kalibracije" fx:id="dateAxis"/>
</xAxis>
<yAxis >
<NumberAxis label="Odstopanja v %" lowerBound="0" upperBound="95" tickUnit="10"/>
</yAxis>
</LineChart>
As you can see I have set id="dateAxis" so I can refer from main class to layout crate as I mentioned by Scene Builder.
Code in main class(ONLY FOR DATAAXIS) wher I get ID form FXML:
Scene scena = primaryStage.getScene();
DateAxis dA = (DateAxis) scena.lookup("#dateAxis");
dA.setUpperBound(new GregorianCalendar(2016,8,23).getTime());
primaryStage.show();
System.out.println(dA);
returns:
DateAxis[id=dateAxis, styleClass=axis]
what means that is working fine. But my chart on xAxis(DateAxis) doesn't go to 23th of August 2016.
I would be very grateful if we solve this problem.
There are two changes you need to apply, The first is to add the constructor of the date axis, two arguments: lower bound + upper bound,
example:
final DateAxis xAxis = new DateAxis(new Date(2013-1900,1,4),new Date(2013-1900,30,14));
The other change is to change the source code of class DateAxis , look for this part of the code (just search for "true" to find the specific line )
public DateAxis(Date lowerBound, Date upperBound) {
this();
setAutoRanging(true); // change it to "false"
setLowerBound(lowerBound);
setUpperBound(upperBound);
}
and change the "setAutoRanging" argument to "false"