Update my function, this way appears in my graph, is not giving the error,
but all in one line
function drawChartPerformanceOperadores() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('chartRangeFilter_dashboard_div')
);
- mostrar texto das mensagens anteriores -
'chartType': 'LineChart',
'containerId': 'chartRangeFilter_chart_div',
// Convert the first column from 'date' to 'string'.
'view': {
'columns': [
{
'calc': function(dataTable, rowIndex) {
return dataTable.getFormattedValue(rowIndex, 1);
}, 'type': 'string'
}, 2]
}
});
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: 'Meal'
},
vAxis: {
title: 'Day'
- Ocultar texto das mensagens anteriores -
}
};
Em segunda-feira, 19 de agosto de 2019 17:05:00 UTC-3, Marcius Leandro
escreveu:
>
> 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/2cdf2fe0-8807-4f3c-b362-85162d5f0110%40googlegroups.com.
