0

I'm trying to draw a line chart from a data table. This should be quite simple. The line chart draws just fine until I try to access a column further down the spreadsheet.

When I draw the data table for the second column like this I get an awesome linegraph:

   var costsTable = new google.visualization.DataTable();
          costsTable.addColumn('number', 'colIndex');
          costsTable.addColumn('string', 'colLabel');

             costsTable.addRow([0, data1.getColumnLabel(0)]); //month
             costsTable.addRow([2, data1.getColumnLabel(2)]); //costs

BUT when I replace the second row with the sixth row:

costsTable.addRow([6, data1.getColumnLabel(6)]); //consumption

I get this error:

>  Invalid row index undefined. Should be in the range [0-1].

I don't understand what is causing this error because I put in 2 as the index and it works just fine.

If I replace the second row with

costsColumnsTable.addRow([1, data3.getColumnLabel(2)]); //costs

I get the error:

> Data column(s) for axis #0 cannot be of type string

This doesn't make sense to me how the line graph can be drawn perfectly with an index of 2, but not six.

I've logged the values of the working dataTable, and it is indeed assigning the given indexes and receiving the specified column label.

The dataTable looks like:

0, Month
2, Amount Billed

Which are my chosen indexes and labels. However, I cannot do this with another index.

Here's my entire chart function:

function drawElectricalLine(data3){
     var linechartCost = new google.visualization.ChartWrapper({
          'chartType': 'LineChart',
          'containerId': 'line_chart',
          dataTable: data3,
          options: {
              animation:{
                 duration: 1000,
                 easing: 'out',
              },
              width: 800,
              height: 400,
              title: 'Monthly Electric Costs',
             explorer: {},
              hAxis: {
                  title: 'Date'
               },
               vAxis: {
                  title: 'Amount Billed ($)'
                 //' Consumption (kWh)'
               }
          }
      });


      var initState= {selectedValues: []};

      var costsColumnsTable = new google.visualization.DataTable();
      costsColumnsTable.addColumn('number', 'colIndex');
      costsColumnsTable.addColumn('string', 'colLabel');

          costsColumnsTable.addRow([0, data3.getColumnLabel(0)]); //month
          costsColumnsTable.addRow([2, data3.getColumnLabel(2)]); //costs
          //costsColumnsTable.addRow([6, data3.getColumnLabel(6)]); //costs ---> causes error

       initState.selectedValues.push(data3.getColumnLabel(2));

       var columnFilter = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'electrical_selector',
        dataTable: costsColumnsTable,
        options: {
            filterColumnLabel: 'colLabel',
            ui: {
                label: '',
                caption: 'Consumption',
                allowTyping: false,
                allowMultiple: true,
                allowNone: false
            }
        },
        state: initState
      });     

        setChartView(linechartCost, costsColumnsTable, columnFilter); 

        }//end drawElectricalLine

        function setChartView(linechart, columnsTable, columnFilter) {
        var state = columnFilter.getState();
        var row;
        var view = {
            columns: [0]
        };
        for (var i = 0; i < state.selectedValues.length; i++) {
            row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
            view.columns.push(columnsTable.getValue(row, 0));
        }
        // sort the indices into their original order
        view.columns.sort(function (a, b) {
            return (a - b);
        });

        linechart.setView(view);
        linechart.draw();
      }

All I'm trying to do is draw a basic line chart from my month column data1.getColumnLabel(0) and my consumption column data1.getColumnLabel(6) And I do not see why I cannot assign a different index without getting an error.

UPDATE:

I fixed the first column to be type string. My data1.getColumnLabel(0) is not even in index 1 :( enter image description here

enter image description here

Melody Anoni
  • 223
  • 1
  • 3
  • 16
  • check the [data format](https://developers.google.com/chart/interactive/docs/gallery/linechart#data-format) for LineChart, only the first column (x-axis) is allowed to be of type string, the rest should be number (y-axis), unless used as a role, such as annotation or style... – WhiteHat Dec 12 '18 at 20:43
  • Okay, I see that now, thank you. But how is it able to draw the linechart correctly for an index of 2? That's what had me going in circles. I have the second column set as a string for that. In that case, the first row becomes the y axis and the second row becomes the x axis. – Melody Anoni Dec 12 '18 at 22:07
  • not sure, I've seen charts do funny things. I would start by correcting the data format and go from there. – WhiteHat Dec 13 '18 at 13:24
  • @WhiteHat I tried just that :/ I updated above. This error doesn't make any sense to me. It also shouldn't be an issue to have string as the first column because I've drawn and seen many people draw line graphs like that before. – Melody Anoni Dec 13 '18 at 14:48
  • not sure, maybe try adding a blank row, then using the `setValue` method, to update each column individually...? – WhiteHat Dec 13 '18 at 15:11

0 Answers0