Plot a table with more than one row, by date by amount of meals per day.

[Marcius Leandro]

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?

[Marcius Leandro]

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')

    );

    var people_filter = new google.visualization.ControlWrapper({

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

        }

    };