Question

80

Show/hide lines/data in Google Chart

rated 0 times [ 83] [ 3] / answers: 1 / hits: 43028 / 11 Years ago, wed, july 3, 2013, 12:00:00

I'm trying to make a google line chart with 2 lines in it.

You should be able to turn them on and off(show/hide) by two checkboxes..

Anyone got any idea show to make this, og just give some pointers?

My guess would be some onClick jQuery stuff?

<html>

<head>

    <script type=text/javascript src=https://www.google.com/jsapi></script>

    <script type=text/javascript>

      google.load(visualization, 1, {packages:[corechart]});

      google.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([

          ['Year', 'Sales', 'Expenses'],

          ['2004',  1000,      400],

          ['2005',  1170,      460],

          ['2006',  660,       1120],

          ['2007',  1030,      540]

        ]);

        var options = {

          title: 'Company Performance'

        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        chart.draw(data, options);

      }

    </script>

  </head>

  <body>

    <div id=chart_div style=width: 900px; height: 500px;></div>

  </body>

</html>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaelynncherokeeg

Add To Favorites

Follow

Total Points: 697

Total Questions: 109

Total Answers: 104

Location: France

Member since Thu, Mar 18, 2021

3 Years ago

jaelynncherokeeg questions

1 NextJS load external image Amazon

Thu, May 27, 21, 00:00, 3 Years ago

1 Create an Array of Favorite fruits Object

Fri, Jan 24, 20, 00:00, 4 Years ago

1 React Testing Library - Avoid getBy?

Thu, Nov 14, 19, 00:00, 5 Years ago

1 How do I POST data to a .NET Core Web API using the fetch() javascript method

Thu, Sep 26, 19, 00:00, 5 Years ago

1 Yarn Link All Packages/Workspaces

Wed, Sep 18, 19, 00:00, 5 Years ago

View All

answered 11 Years ago kennedysaraiw · Accepted Answer

try this

Mark up:

 <body>

   <div id=chart_div style=width: 900px; height: 500px;></div>



   <button type=button id=hideSales  >Hide Sales</button>

   <button type=button id=hideExpenses  >Hide Expence</button>



 </body>

Script:

<script type=text/javascript>

  google.load(visualization, 1, {packages:[corechart]});

  google.setOnLoadCallback(drawChart);

  function drawChart() {

    var data = google.visualization.arrayToDataTable([

      ['Year', 'Sales', 'Expenses'],

      ['2004',  1000,      400],

      ['2005',  1170,      460],

      ['2006',  660,       1120],

      ['2007',  1030,      540]

    ]);

    var options = {

      title: 'Company Performance'

    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));



    chart.draw(data, options);





   var hideSal = document.getElementById(hideSales);

   hideSal.onclick = function()

   {

      view = new google.visualization.DataView(data);

      view.hideColumns([1]); 

      chart.draw(view, options);

   }

   var hideExp = document.getElementById(hideExpenses);

   hideExp.onclick = function()

   {

      view = new google.visualization.DataView(data);

      view.hideColumns([2]); 

      chart.draw(view, options);

   }





  }





</script>