How can I render a ColumnChart slider

Question

I'm here because I'm in struggle with some sliders for my dataviz app.

I already did a chart with a slider and it work fine, but now I want to do the same with ColumnChart instead of LineChart... :

Here is the working code :

        width={"100%"}
        chartType="LineChart"
        loader={<div>Loading Chart</div>}
        
        data={[
          ["Date", "Value"],
         
          [new Date(2000, 11, 26), 13],
          [new Date(2000, 11, 27), 50],
          [new Date(2000, 11, 28), 32],
         //there is very much lines here but for simplicity i removed them
        ]}
        options={{
          // Use the same chart area width as the control for axis alignment.
          interpolateNulls: false,
          chartArea: { height: "80%", width: "90%" },
          hAxis: { slantedText: false },
          vAxis: { viewWindow: { min: 0, max: 55 } },
          legend: { position: "none" },
          colors: ['#f6c7b6']
        }}
       
        rootProps={{ "data-testid": "0" }}
        chartPackages={["corechart", "controls"]}
        controls={[
          {
            controlType: "ChartRangeFilter",
            options: {
                
              filterColumnIndex: 0,
              ui: {
                chartType: "LineChart",
                chartOptions: {
                  chartArea: { width: "90%", height: "50%" },
                  hAxis: { baselineColor: "none" },
                  colors: ['green'],
                },
              },
            },
            controlPosition: "bottom",
            controlWrapperParams: {
              state: {
                range: {
                  start: new Date(2000, 1, 1),
                  end: new Date(2000, 4, 6),
                },
              },
            },
          },
        ]}
      />

Here is the result : Here is the result

Now I want the same data but with ColumnChart, I did that :

<Chart
    width={"100%"}
    chartType="ColumnChart"
    loader={<div>Loading Chart</div>}
    data={[
      ["Date", "Value"],

      
      [new Date(2000, 11, 11), 32],
      [new Date(2000, 11, 12), 5],
      [new Date(2000, 11, 13), 46],
      [new Date(2000, 11, 14), 31],
      [new Date(2000, 11, 15), 17],
      [new Date(2000, 11, 16), 17],
      [new Date(2000, 11, 17), 6],
      [new Date(2000, 11, 18), 43],
      [new Date(2000, 11, 19), 11],
      [new Date(2000, 11, 20), 44],
      [new Date(2000, 11, 21), 44],
      [new Date(2000, 11, 22), 37],
      [new Date(2000, 11, 23), 43],
      [new Date(2000, 11, 24), 26],
      [new Date(2000, 11, 25), 13],
      [new Date(2000, 11, 26), 50],
      [new Date(2000, 11, 27), 32],
      [new Date(2000, 11, 28), 25],
    ]}
    options={{
      // Use the same chart area width as the control for axis alignment.
      interpolateNulls: false,
      chartArea: { height: "80%", width: "90%" },
      hAxis: { slantedText: false },
      // vAxis: { viewWindow: { min: 0, max: 55 } },
      legend: { position: "none" },
      is3D: true,
      colors: ['orange'],
      
    }}
    rootProps={{ "data-testid": "1" }}
    chartPackages={["corechart", "controls"]}
    
    /*
    controls={[
      {
        controlType: "ChartRangeFilter",
        options: {
          filterColumnIndex: 0,
          ui: {
            chartType: "ColumnChart",
            chartOptions: {
              chartArea: { width: "90%", height: "50%" },
              hAxis: { baselineColor: "none" },
            },
          },
        },
        controlPosition: "bottom",
        controlWrapperParams: {
          state: {
            range: {
              start: new Date(2000, 11, 1),
              end: new Date(2000, 11, 6),
            },
          },
        },
      },
    ]}
    */
    
  />

And the result

But when I uncomment the code of time slider, i have a weird result :

weirdResult

What I missing ? how can i have the same kind of slider with ColumnChart ?

Thanks for any helps !

I'm working with React and React google Chart which is a wrapper for Google Chart

score 1 · Accepted Answer · answered Mar 10 '21 at 18:32

1

as noted in the reference for the ChartRangeFilter,
ColumnChart is not a valid chart type (see option --> ui.chartType)

try using ComboChart instead,
and set the seriesType chart option to bars

see following snippet...

controls={[
  {
    controlType: "ChartRangeFilter",
    options: {
      filterColumnIndex: 0,
      ui: {
        chartType: "ComboChart",  // <-- use ComboChart
        chartOptions: {
          chartArea: { width: "90%", height: "50%" },
          hAxis: { baselineColor: "none" },
          seriesType: "bars",  // <-- set series type
        },
      },
    },
    controlPosition: "bottom",
    controlWrapperParams: {
      state: {
        range: {
          start: new Date(2000, 11, 1),
          end: new Date(2000, 11, 6),
        },
      },
    },
  },
]}

answered Mar 10 '21 at 18:32

WhiteHat

59,912
7
51
133

Thanks you for your help, it's a little bit better but it doesnt work properly, now I have the bars in the slider but i cant move them and in the main chart i have nothing, just like my initial message – Stour Mar 10 '21 at 18:38
When i refresh the page, the bars in the main chart appear 0.5 sec and disappear – Stour Mar 10 '21 at 18:40
2

I noticed in your data for the chart, none of the dates fall in the date range specified in the filter --> `new Date(2000, 11, 1)` to `new Date(2000, 11, 6)` – WhiteHat Mar 10 '21 at 18:55
Maybe another question, how can I do the same kind og chart without Google chart librairie? With chart.js or other maybe? – Stour Mar 11 '21 at 06:57

How can I render a ColumnChart slider

1 Answers1