Here is a sample code: But please update me all different cause of this
error
=========
package com.Syner.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.user.cellview.client.Column;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.visualization.client.VisualizationUtils;
import com.google.gwt.visualization.client.visualizations.MotionChart;
import com.google.gwt.visualization.client.visualizations.Table;
import
com.google.gwt.visualization.client.visualizations.corechart.ColumnChart;
import
com.google.gwt.visualization.client.visualizations.corechart.PieChart;
import com.sencha.gxt.core.client.util.Margins;
import com.sencha.gxt.widget.core.client.ContentPanel;
import com.sencha.gxt.widget.core.client.container.BorderLayoutContainer;
import
com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData;
import com.sencha.gxt.widget.core.client.container.SimpleContainer;
public class PopUpGrid implements EntryPoint {
private ContentPanel chartContainer;
private JavaScriptObject dashboard;
private JavaScriptObject control;
private JavaScriptObject chart;
private JavaScriptObject data;
public void onModuleLoad() {
VisualizationUtils.loadVisualizationApi(new Runnable() {
@Override
public void run() {
chartContainer = new ContentPanel();
chartContainer.setHeaderVisible(false);
chartContainer.setId("dashboard");
BorderLayoutContainer chartBorderPanel = new BorderLayoutContainer();
SimpleContainer chartPortion = new SimpleContainer();
chartPortion.setStyleName("chartBackground");
chartPortion.setId("chart");
SimpleContainer rangeControlPortion = new SimpleContainer();
rangeControlPortion.setId("control");
rangeControlPortion.setStyleName("chartBackground");
BorderLayoutData southData = new BorderLayoutData(50);
southData.setMargins(new Margins(0));
chartBorderPanel.setSouthWidget(rangeControlPortion, southData);
chartBorderPanel.setCenterWidget(chartPortion);
chartContainer.add(chartBorderPanel);
chart = getChart();
data = getData();// DataTable.create(getData());//getJSObject(getData())
if (control == null) {
control = getControl();
}
dashboard = getDashboard(chartContainer.getElement());
bindChartControl(dashboard, control, chart);
drawChart(dashboard, data);
RootPanel.get("charts").add(chartContainer);
}
},PieChart.PACKAGE, Table.PACKAGE,"controls");
}
//----------------------------------
private native JavaScriptObject getDashboard(Element elem)/*-{
var dashboard = new $wnd.google.visualization.Dashboard(elem);
return dashboard;
}-*/;
//----------------------------------
private native void drawChart(JavaScriptObject dashboard,
JavaScriptObject data)/*-{
dashboard.draw(data);
}-*/;
//----------------------------------
private native void bindChartControl(JavaScriptObject dashboard,
JavaScriptObject control, JavaScriptObject chart)/*-{
dashboard.bind(control, chart);
}-*/;
//----------------------------------
private native JavaScriptObject getChart()/*-{
var chart = new $wnd.google.visualization.ChartWrapper({
chartType : 'ComboChart',
containerId : 'chart',
options : {
// Use the same chart area width as the control for axis alignment.
backgroundColor : 'transparent',
seriesType : "bars",
//'chartArea' : {
//'height' : '80%',
//'width' : '90%'
//},
tooltip : {
textStyle : {
fontName : 'Arial',
fontSize : 11,
color : '#909091'
}
},
hAxis : {
slantedText : false,
textStyle : {
fontName : 'Arial',
fontSize : 11
}
},
vAxes : {
textStyle : {
fontName : 'Arial',
fontSize : 11
},
0 : {
title : 'Volume',
textStyle : {
fontName : 'Arial',
fontSize : 11
}
},
1 : {
title : 'Variance',
textStyle : {
fontName : 'Arial',
fontSize : 11,
color : '#D9281E'
}
}
},
series : {
0 : {
type : "bars",
targetAxisIndex : 0,
color : "#33CC66"
},
1 : {
type : "bars",
targetAxisIndex : 0,
color : "#6E4C7A"
},
2 : {
type : "bars",
targetAxisIndex : 0,
color : "#F0D330"
},
3 : {
type : "bars",
targetAxisIndex : 0,
color : "#115FA6"
},
4 : {
type : "line",
targetAxisIndex : 1,
color : "#D9281E"
},
5 : {
type : "line",
targetAxisIndex : 0,
color : "#07ABAD"
}
},
legend : {
position : 'top'
}
},
// Convert the first column from 'date' to 'string'.
'view' : {
'columns' : [ {
'calc' : function(dataTable, rowIndex) {
return dataTable.getFormattedValue(rowIndex, 0);
},
'type' : 'string'
}, 1, 2, 3, 4, 5, 6 ]
}
});
return chart;
}-*/;
//-----------------------------------
private native JavaScriptObject getControl()/*-{
var control = new $wnd.google.visualization.ControlWrapper({
'controlType' : 'ChartRangeFilter',
'containerId' : 'control',
'options' : {
// Filter by the date axis.
'backgroundColor' : 'transparent',
'filterColumnIndex' : 0,
'ui' : {
'chartType' : 'LineChart',
'chartOptions' : {
//'chartArea' : {
//'width' : '90%'
//},
'hAxis' : {
'baselineColor' : 'none'
}
},
// Display a single series that shows the closing value of the stock.
// Thus, this view has two columns: the date (axis) and the stock value
(line series).
'chartView' : {
'columns' : [ 0, 3 ]
},
// 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
'minRangeSize' : 86400000
}
},
// Initial range: 2012-02-09 to 2012-03-20.
// 'state' : {
// 'range' : {
// 'start' : new Date(2012, 1, 9),
// 'end' : new Date(2012, 2, 20)
// }
// }
});
return control;
}-*/;
//-------------------------------------------------------
private native JavaScriptObject getData()/*-{
var geoData = new $wnd.google.visualization.DataTable();
geoData.addColumn("string", "City");
geoData.addColumn("string", "Name");
geoData.addColumn("boolean", "Food");
geoData.addRows(3);
geoData.setCell(0, 0, "London");
geoData.setCell(1, 0, "Paris");
geoData.setCell(2, 0, "Moscow");
geoData.setCell(0, 1, "Cinematics London");
geoData.setCell(1, 1, "Cinematics Paris");
geoData.setCell(2, 1, "Cinematics Moscow");
geoData.setCell(0, 2, true);
geoData.setCell(1, 2, true);
geoData.setCell(2, 2, false);
return geoData;
}-*/;
//--------------------------------------------------------
private native JavaScriptObject getJSObject(String jsonStr)/*-{
var myObject = JSON.parse(jsonStr);
return myObject;
}-*/;
On Wed, May 29, 2013 at 1:12 PM, Amit <[email protected]> wrote:
> Hi ,I cant' provide any link.But can you plz help me to understand the
> error scenario .What are the possible reasons for such errors???
>
>
> On Tue, May 28, 2013 at 7:56 PM, asgallant <[email protected]>wrote:
>
>> If you can post a link to the page so I can test this out, I'll take a
>> look and see what might be the problem.
>>
>>
>> On Tuesday, May 28, 2013 10:10:00 AM UTC-4, Amit Sharma wrote:
>>>
>>> Hi ,
>>> I am creating a chart from Google visualization library. Populating
>>> chart from JSON.
>>> Everything works fine except when I am populating chart data table using
>>> reverse ajax.Its showing updated JSON string to my DataTable but not
>>> refresh the chart and
>>> it shows the error "One or more Participants failed to draw(); " on the
>>> chart. If I manually refresh chart on click of refresh button it update the
>>> chart with no error.How can I dynamically refresh this chart.
>>> 1. I tried refreshing ChartWrapper instead of refreshing Dashboard every
>>> time.
>>> 2. I checked the data type its datetime and number only.
>>>
>>> what could be the possible reason for this error message ?
>>>
>>> Problem for me is I have updated data table after reverse ajax which not
>>> refreshing chart dynamically and I have to do that manually.Quick response
>>> will be helpful.
>>>
>> --
>> You received this message because you are subscribed to a topic in the
>> Google Groups "Google Visualization API" group.
>> To unsubscribe from this topic, visit
>> https://groups.google.com/d/topic/google-visualization-api/g9qmlvBqkIo/unsubscribe?hl=en
>> .
>> To unsubscribe from this group and all its topics, send an email to
>> [email protected].
>> To post to this group, send email to
>> [email protected].
>> Visit this group at
>> http://groups.google.com/group/google-visualization-api?hl=en.
>> For more options, visit https://groups.google.com/groups/opt_out.
>>
>>
>>
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
