When you get the message "One or more participants failed to draw" it is usually because a chart was expecting to receive data in a particular format, but the data doesn't match that format. I assume that you are using a Dashboard here; try removing the dashboard and control(s) so that you have just the chart, then run it in Chrome or Firefox and check the developer's console for error messages.
On Wednesday, May 29, 2013 11:33:37 AM UTC-4, Amit Sharma wrote: > > Hi , > Sorry for the lack of information and thanks for your quick response. > 1. Is there any way I can directly discuss this issue with asgallants,as > it might be a long conversation. > 2. First could you please tell me the possible reason for this error? > [image: Inline image 1] > 3. It seems to be problem in either data table or control wrapper.Is there > any other thing that can cause this issue? > 4. I am using a large app with GXT 3.0. So my source code (for chart) is > too large to show it to you .Actually What I sent previously is snapshot > or a demo that giving me error. But i will try to send as much as I can. > > 5. Steps to reproduce this issue: > There is a container for a chart at one screen of app. From other screen > I am uploading excel which update database and in turn send me reverse ajax > JSON form data. Which update my chart. > a) If I open that chart ,(working fine). Go to other screen and import > file (without closing chart screen). > b) Revrese ajax respond a JSON. When I go to the chart screen It shows me > the error.[image: Inline image 2] > c) In case I use a separate button , which again call my draw() method and > it refresh my chart without any error.(With same JSON string) > > Thanks again > > > On Wed, May 29, 2013 at 2:19 PM, asgallant > <[email protected]<javascript:> > > wrote: > >> I can't use the Java code to replicate your chart, I need to see what the >> javascript looks like when sent to the browser (open the page in a browser, >> view source, and paste the javascript here). >> >> As far as the JSON goes, is that the whole string? If so, you are >> missing quite a lot of information that needs to be present for the JSON to >> work. >> >> >> On Wednesday, May 29, 2013 5:43:29 AM UTC-4, Amit Sharma wrote: >> >>> One more thing: I think my JSON string from Ajax response is not >>> supported to the chart. Here is my response Json String >>> : >>> {"c":[{"v":"Date(2013,3,27,5,**38)","f":"Sat 04/27/2013 >>> 00:38"},{"v":1200.0},{"v":**1001.0},{"v":0.0},{"v":0.0},{"** >>> v":-199.0},{"v":0.0}]}, >>> {"c":[{"v":"Date(2013,3,28,5,**38)","f":"Sun 04/28/2013 >>> 00:38"},{"v":1001.0},{"v":**1100.0},{"v":0.0},{"v":0.0},{"** >>> v":99.0},{"v":0.0}]}, >>> {"c":[{"v":"Date(2013,3,29,5,**38)","f":"Mon 04/29/2013 >>> 00:38"},{"v":1100.0},{"v":**1700.0},{"v":0.0},{"v":0.0},{"** >>> v":600.0},{"v":0.0}]}, >>> {"c":[{"v":"Date(2013,3,30,5,**38)","f":"Tue 04/30/2013 >>> 00:38"},{"v":1700.0},{"v":**1500.0},{"v":0.0},{"v":0.0},{"** >>> v":-200.0},{"v":0.0}]}]} >>> >>> >>> Where first column is of *dataTime *and rest *number *type format. >>> >>> >>> On Wed, May 29, 2013 at 1:25 PM, Amit <[email protected]> wrote: >>> >>>> 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<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 >>>>>> google-visualization-api+**[email protected]. >>>>>> To post to this group, send email to google-visua...@** >>>>>> googlegroups.com. >>>>>> >>>>>> Visit this group at http://groups.google.com/** >>>>>> group/google-visualization-**api?hl=en<http://groups.google.com/group/google-visualization-api?hl=en> >>>>>> . >>>>>> For more options, visit >>>>>> https://groups.google.com/**groups/opt_out<https://groups.google.com/groups/opt_out> >>>>>> . >>>>>> >>>>>> >>>>>> >>>>> >>>>> >>>> >>> -- >> 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] <javascript:>. >> To post to this group, send email to >> [email protected]<javascript:> >> . >> 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.
