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!!
--
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 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.
