I have a list of people, days, amount of meals and average weight.
I want to build a visua tabala that will show me the amount of meals over
time, and in each row one person, and when I hover over the average
person's meal weights will appear.
I'm developing in grails, this is my html code:
<div id="chartRangeFilter_dashboard_div" style="border: 1px solid #ccc">
<div class="row datetime-incio">
<div class='col-sm-4'>
<div class="form-group">
<span>Inicio</span>
<g:datePicker name="myDateInit" value=
"${myDomainClass?.myDateField}" precision="hour" default="${new
Date().plus(7)}"/>
</div>
</div>
<div class='col-sm-4'>
<div class="form-group">
<span>Fim</span>
<g:datePicker name="myDateEnd" value=
"${myDomainClass?.myDateField}" precision="hour" default="${new
Date().plus(7)}"/>
</div>
</div>
<div class='col-sm-4'>
<div id="categoryFilter_control_div"></div>
</div>
</div>
<div id="chartRangeFilter_chart_div" style="width: 100%; height:
500px"></div>
<div id="chartRangeFilter_control_div" style="height: 100px;"
></div>
This is my function drawChart:
function drawChartPerformanceOperadores() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('chartRangeFilter_dashboard_div')
);
var range_filter = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'chartRangeFilter_control_div',
'options': {
// Filter by the date axis.
'filterColumnIndex': 1,
'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': [1, 2]
},
// 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)}}
});
var people_filter = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'categoryFilter_control_div',
'options': {
'filterColumnIndex': 0,
'ui': {
'allowTyping': false,
'allowMultiple': true,
'selectedValuesLayout': 'belowStacked'
}
},
'state': {'selectedValues': ['João', 'Junior']}
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'CandlestickChart',
'containerId': 'chartRangeFilter_chart_div',
'options': {
// Use the same chart area width as the control for axis alignment.
'chartArea': {'height': '80%', 'width': '90%'},
'hAxis': {'slantedText': false},
'vAxis': {'viewWindow': {'min': 0, 'max': 2000}},
'legend': {'position': 'none'}
},
// Convert the first column from 'date' to 'string'.
'view': {
'columns': [
1,{
'calc': function(dataTable, rowIndex) {
return dataTable.getFormattedValue(rowIndex, 1);
}, 'type': 'string'
}, 2, 3]
}
});
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('date', 'Date');
data.addColumn('number', 'meals');
data.addColumn('number', 'Weight');
// Create random stock values, just like it works in reality.
var open, close = 6;
var low, high;
for (var day = 1; day < 121; ++day) {
var change = (Math.sin(day / 2.5 + Math.PI) + Math.sin(day / 3) - Math
.cos(day * 0.7)) * 3;
change = change >= 0 ? change + 0.1 : change - 0.1;
open = close;
close = open + change;
var date = new Date(2012, 0 ,day);
data.addRow(['João', date, Math.round(close-10), Math.round(0.6)]);
data.addRow(['Maria', date, Math.round(close+5), Math.round(0.2)]);
data.addRow(['Junior', date, Math.round(close+20), Math.round(0.8)]);
}
var options = {
hAxis: {
title: 'Separações'
},
vAxis: {
title: 'Dia'
}
};
dashboard.bind([range_filter, people_filter], chart);
dashboard.draw(data, options);
}
I have two select that will give me the date start and end of interest, but
I'm not even using the code above, they are fixed in 2012, I put a
controller for me to select my people of interest this is working well.
But on my date range tracker I would like it to show only the average
number of meals per day, and on my chart a line appears for each person
detailing how many meals they have eaten and the average weight.
However in the graph nothing appears of the following error:All data
columns targetting the same axis must be of the same data type. Column #2
is of type number but expected type is string
And I know that in my date range counterpart something totally weird isn't
appearing on one line. Does anyone know how to help me?
--
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 view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/ff4be549-8e41-4c70-a00b-e6c33b880c84%40googlegroups.com.
