NumberRangeFilter giving "One or more participants failed to draw() error"

[C Miller]

The API loads in my _Layout.cshtml page for the site.  

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?ext.js"></script>
<script type="text/javascript">
     google.charts.load('current', { 'packages': ['corechart', 'table', 'gauge', 'controls'] });
 </script>

HTML follows:

<div id="div_dashboard_Detail">
     <div id="div_dashboard_Detail_categoryPicker1"></div><br />
     <div id="div_dashboard_Detail_categoryPicker2"></div><br />
     <div id="div_dashboard_Detail_chart"></div>
</div>

Script as follows (I've removed some code which calcluates the variables for simplicity in this post.):

I'm trying to load a NumberRangeFilter (categoryPicker1) but get the error One or more participants failed to draw()×  

function drawChart() {

    var urlString = '../Logs/clnLogsSelectingEvents?grade=All&SC=1&CauseSC=3';

    $.ajax({
        type: 'GET',
        dataType: 'json',
        contentType: "application/json",
        url: urlString,
        success: function (result) {
 
            //Create DataTable
            var data = new google.visualization.DataTable();

            //Add Columns
            data.addColumn('string', 'Review on Week');
            data.addColumn('string', 'Business Division');
            data.addColumn('string', 'Product');
            data.addColumn('string', 'Cause');
            data.addColumn('string', 'Next Step');
            data.addColumn('string', 'Carrier Reference or Responsible');
            data.addColumn('number', 'Cost');
            data.addColumn('number', 'Quantity');
            data.addColumn('number', 'Age (d)');
            data.addColumn('string', 'Delivery Number');
            data.addColumn('string', 'Material Description');
            data.addColumn('string', '');
            data.addColumn('string', 'Actual State');

            //Add Rows
            var dataArray = [];
            $.each(result, function (i, obj) {
 
            dataArray.push([
                    obj.calWeek,
                    gBD,   //this is a calculated variable
                    obj.productLine,
                    obj.cause,
                    obj.nextStep,
                    obj.responsible,
                    obj.cost,
                    obj.quantity,
                    obj.ageCalc,
                    obj.material,
                    obj.materialDesc,
                    color,  //this is a calculated variable
                    gradeD  //this is a calculated variable
                ]);
            });     //END $.each(result, function (i, obj) {
 
            //Create Data View
            var view = new google.visualization.DataView(data);
            view.setColumns([12, 0, 1, 2, 3, 4, 5, 6, 8, 9, 10, 11]);
 
            // Create a dashboard.
            var dashboard = new google.visualization.Dashboard(
                document.getElementById('div_dashboard_Detail'));
 
            var categoryPicker1 = new google.visualization.ControlWrapper({
                'controlType': 'NumberRangeFilter',
                'containerId': 'div_dashboard_Detail_categoryPicker1',
                'options': {
                    'filterColumnLabel': 'Age(d)'                    
                },
            });

            var categoryPicker2 = new google.visualization.ControlWrapper({
                'controlType': 'CategoryFilter',
                'containerId': 'div_dashboard_Detail_categoryPicker2',
                'options': {
                    'filterColumnIndex': 0,     //Column used in control
                    'ui': {
                                             'label': 'Actual State:'
                    }
                }
            });

            var chart = new google.visualization.ChartWrapper({
                'chartType': 'Table',
                'containerId': 'div_dashboard_Detail_chart',
                'options': {
                    showRowNumber: false,
                    width: '100%',
                    height: 'auto',
                    page: 'enable',
                    pageSize: '15',
                    sort: 'enable',
                    allowHtml: true
                }
            });

            //Object Binding
            dashboard.bind([categoryPicker1, categoryPicker2], [chart]);

            // Draw the dashboard.
            dashboard.draw(view);
 
        }   //END  success: function (result) {
    });     //END  $.ajax({
}           //END  function drawChart()

If I remove categoryPicker1 and just go with categoryPicker2 (CategoryFilter), the table renders just fine.  

The number inside Age(d) is a number because I am able to + 1 and get the result (ex. 1+1=2)

What could I be missing?

Thanks for any assistance!!

[Daniel LaLiberte]

I don't see any onload callback, so I presume you are doing that correctly.  You wouldn't be able to call the charts library otherwise.

I see your column label titled 'Age (d)', but your categoryPicker1 has 'filterColumnLabel': 'Age(d)', without the space after 'Age'.  That looks like a possible cause of the failure to draw that control.

--
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 google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/e867fec2-a92a-4308-bfc6-2ec12e85bcbc%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[C Miller]

I put the space to make it 'Age (d)' and still get the message.  

Also tried changing that line to this instead and still get the same error. 

'filterColumnIndex': 8

You are correct...my onload is at the HTML page as follows:

//Renders on page load
        google.charts.setOnLoadCallback(gChart0);
        function gChart0() {
            drawChart();   //I usually call multiple chart functions here as needed with one setOnLoadCallback
        };

On Wednesday, July 19, 2017 at 3:07:22 PM UTC-4, Daniel LaLiberte wrote:

I don't see any onload callback, so I presume you are doing that correctly.  You wouldn't be able to call the charts library otherwise.

I see your column label titled 'Age (d)', but your categoryPicker1 has 'filterColumnLabel': 'Age(d)', without the space after 'Age'.  That looks like a possible cause of the failure to draw that control.

-- 

Daniel LaLiberte

dlali...@Google.com   5CC, Cambridge MA

[Daniel LaLiberte]

There might be multiple problems all resulting in the failure to draw. We could probably display more details about the problem in this display error, but are there any messages in the JavaScript console?  Can you break on errors to see if you can get any clues about what went wrong?  

I don't see anything else obviously wrong with your options.  I would try to substitute in a known static datatable in place of your ajax result, just for testing.

--

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 google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/aa6ce9f0-02b8-43d8-a867-92adb111c0ab%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[C Miller]

I will try a stripped down version of the function since I do have a log going on there.  Test with static datatable as you suggest.

The console is not giving me anything.  Whats odd is that the whole thing works as soon as I take out the categoryPicker1.  

I will come back and let you know once tested as suggested.  Thank you again!

[C Miller]

Hi Daniel LaLiberte, 

I was able to make it work in JSFiddle.  

https://jsfiddle.net/hken6xco/35/

But when I put it back together in my Visual Studio 2015 MVC Core 1.1 project, it still gives me the error. 

I've made a separate post containing all my MVC source code in Stack Overflow.  

https://stackoverflow.com/questions/45198584/numberrangefilter-giving-one-or-more-participants-failed-to-draw-error/45199275?noredirect=1#comment77366200_45199275

 Not sure if you can still help here.  But I wanted to share my results.

[C Miller]

I"m not sure what was going on. Thank you for taking a look all the same. 

My function initially was very complex so I separated it into a simpler version containing only the dashboard. The only thing I found was that one variable was not defined in my more complex version. It started working but I don't really know why. Perhaps it was a compile error in Visual Studio because I really didn't change any of the code.

Thanks for the help as always!!

[Daniel LaLiberte]

Glad you got it working, even without solving all the mysteries.

--

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 google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/a6ef5e51-0c39-414a-b5db-0085a8f7135e%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.