Google Line chart zoom and pan

arawat commented on May 26, 2022

Hi,

i tried Google line chart, how can i set zoom and pan.

Sebastian Morales commented on May 27, 2022

With Google Chart's continuous X axis, pls try this option:

LineChart::create(array(
    ...
    "options" => array(    
        "explorer" => array(
            "actions" => ['dragToZoom', 'rightClickToReset'],
            "axis" => 'horizontal',
            "keepInBounds" => true,
            "maxZoomIn" => 4.0
        ),
    ),
));

arawat commented on May 30, 2022

hi, thanks for ur reply, can u share any documentation link regarding this.

Sebastian Morales commented on May 31, 2022

You can look for Google LineChart's full options documented in this link:

https://developers.google.com/chart/interactive/docs/gallery/linechart#configuration-options

arawat commented on Jun 2, 2022

hi thanks for the link, i need one more help, my line chart contains date time in X axis, and number data in Y axis, but horizontal zoom is not working and vertical zoom works

below is my options

"dataSource"=>$this->dataStore('device_data'),
        "columns"=>array(
            //"date",
            "date_time"=>array(
                "label"=>"Date Time"
                ,"type"=>"datetime"
                //, "prefix"=>"$"
            ),
            "mark_1"=>array(
                "label"=>"Temp",
                "type"=>"number"
                //, "prefix"=>"$"
            )
           
            ),
"options" => array(    
                "explorer" => array(
                    "actions" => ['dragToZoom', 'rightClickToReset'],
                    "axis" => 'horizontal',
                    "keepInBounds" => true,
                    //"maxZoomIn" => 10,
                    "maxZoomOut"=>10
                ),
            )

date time column [date_time] => 2022-02-23 18:19:00 .

Sebastian Morales commented on Jun 2, 2022

I've checked this zoom option again and found that in case of Datetime axis Google chart requires the values in javascript's Date type explicitly to be able to zoom. Pls wait for several days for us to find a solution for you. Tks,

arawat commented on Jun 2, 2022

ok, thanks for your quick response, can we do something like hAxis: {

  ticks: [
    {v: 1, f: 'Elephant'},
    {v: 2, f: 'Horse'},
    {v: 3, f: 'Dog'},
    {v: 4, f: 'Cat'}
  ],
  title: 'Animal',
},

from this link https://stackoverflow.com/questions/45834351/google-column-charts-x-axis-label-different-from-value numeric value and string label.

Sebastian Morales commented on Jun 3, 2022

You can set X axis' ticks it manually like this:

LineChart::create(array(
    ...
    "options" => array(
        ...
        "ticks" => array(
            ["v" => 1, "f" => "Elephant"],
            ["v" => 2, "f" => "Horse"],
            ["v" => 3, "f" => "Dog"],
            ["v" => 4, "f" => "Cat"],
        )
    )
));

KoolReport's Forum

Google Line chart zoom and pan #2697

Build Your Excellent Data Report