One or more Participants failed to draw(); Error Message

[Amit Sharma]

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.  

[asgallant]

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.

[Amit]

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???

--
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 google-visualizati...@googlegroups.com.
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.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Amit]

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;

}-*/;

[Amit]

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.

[asgallant]

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.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

[Amit]

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?

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.

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

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[asgallant]

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.  

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.

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.
For more options, visit https://groups.google.com/groups/opt_out.