title: Google Charts: Invalid column label | Category Filter as Column Selector
body: <p>I tried to use the fiddle <a href="http://jsfiddle.net/asgallant/WaUu2/" rel="nofollow">Code to use a CategoryFilter as a column selector by Andrew Gallant</a> to create a CategoryFilter in a Google Charts-LineChart.</p>
  
  <p>The error I get is:
  "One or more participants failed to draw()" &amp; 
  "Invalid column label:colLabel"</p>
  
  <p>Other than in the fiddle, I get my Chart-Data from a SQL-Connection in ASP.NET.</p>
  
  <p>What went wrong?</p>
  
  <p>The important javascript-function looks like this:</p>
  
  <pre><code>function drawchart(chartData) {
  
          var data = new google.visualization.DataTable();
          for (var index in chartData.Columns) {
              data.addColumn('number', chartData.Columns[index]);
          }
          data.addRows(chartData.Data);
  
          var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
  
          var chart = new google.visualization.ChartWrapper({
              chartType: 'LineChart',
              containerId: 'chart_div',
              dataTable: data,
          });
  
          var columnsTable = new google.visualization.DataTable();
  
          columnsTable.addColumn('number', 'colIndex');
          columnsTable.addColumn('string', 'colLabel');
  
          var initState = {
              selectedValues: []
          };
  
          for (var i = 1; i &lt; data.getNumberOfColumns() ; i++) {
              columnsTable.addRow([i, data.getColumnLabel(i)]);
  
              initState.selectedValues.push(data.getColumnLabel(i));
          }
  
          var distributors = new google.visualization.ControlWrapper({
              controlType: 'CategoryFilter',
              containerId: 'distributors_div',
              dataTable: columnsTable,
              options: {
                  filterColumnLabel: 'colLabel',
                  ui: {
                      label: 'Columns',
                      allowTyping: false,
                      allowMultiple: true,
                      allowNone: false,
                      selectedValuesLayout: 'belowStacked'
                  }
              },
              state: initState
          });
  
          function setChartView(wrapper) {
  
              wrapper.setOption('height', 720);
              wrapper.setOption('width', 1280);
  
              var state = distributors.getState();
              var row;
              var view = {
                  columns: [0]
              };
              for (var i = 0; i &lt; 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);
              });
              chart.setView(view);
              chart.draw();
          }
  
  
  
          google.visualization.events.addListener(distributors, 'statechange', setChartView);
  
  
          setChartView(chart);
  
          dash.bind(distributors, chart);
          dash.draw(data);
  
      }
  </code></pre>
  
  <p>The C# code that provides the data like this:</p>
  
  <pre><code>[WebMethod]
      public static ChartOutput GetChartData()
      {
  
          using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ToString()))
          {
              SqlCommand cmd = new SqlCommand("Usp_Getdata3", con);
              cmd.CommandType = CommandType.StoredProcedure;
              SqlDataAdapter da = new SqlDataAdapter();
              da.SelectCommand = cmd;
              DataTable dt = new DataTable();
              da.Fill(dt);
              List&lt;ChartDetails&gt; dataList = new List&lt;ChartDetails&gt;();
  
              foreach (DataRow dtrow in dt.Rows)
              {
                  ChartDetails details = new ChartDetails();
  
                  details.WeekNumber = Convert.ToInt16(dtrow[0]);
                  details.DistributorName = dtrow[1].ToString();
                  details.Count = Convert.ToUInt16(dtrow[2]);
  
                  dataList.Add(details);
              }
  
              ChartOutput output = new ChartOutput();
  
              output.Data = new List&lt;int[]&gt;();
              output.Columns = new List&lt;string&gt;();
              var orderedListOfDistributorNames = dataList.Select(x =&gt; x.DistributorName).Distinct().OrderBy(x =&gt; x).ToArray();
  
  
              output.Columns.Add("WeekNumber");
              output.Columns.AddRange(orderedListOfDistributorNames);
  
  
              var weekGrouping = dataList.GroupBy(k =&gt; k.WeekNumber, v =&gt; v);
  
              foreach (var g in weekGrouping)
              {
                  var n = output.Columns.Count;
                  int[] dataRow = new int[n];
                  var currentWeekNumber = g.Key;
  
                  dataRow[0] = currentWeekNumber;
  
                  for (int i = 0; i &lt; orderedListOfDistributorNames.Count(); i++)
                  {
                      var distrtibutorToCheck = orderedListOfDistributorNames[i];
  
                      var distributorFromGrouping = g.FirstOrDefault(x =&gt; x.DistributorName == distrtibutorToCheck);
                      if (distributorFromGrouping != null)
                          dataRow[i + 1] = distributorFromGrouping.Count;
  
                  }
  
                  output.Data.Add(dataRow);
              }
  
              return output;
          }
      }
  
      public class ChartOutput
      {
          public List&lt;string&gt; Columns { get; set; }
          public List&lt;int[]&gt; Data { get; set; }
      }
  
      public class ChartDetails
      {
          public string DistributorName { get; set; }
          public int WeekNumber { get; set; }
          public int Count { get; set; }
      }
  </code></pre>