How to include 'options' inside my google visualization chart wrapper?

71 views
Skip to first unread message

MUM

unread,
Aug 1, 2017, 5:50:59 AM8/1/17
to Google Visualization API
Currently i have a code that shows 2 line charts and it works perfectly fine but there is no title for the line charts. I am trying to add like a title for it. Example: "Readings for Smoke". I added the 'options': {'title' : 'Readings for Smoke'} inside my codes but when i deploy as new web version, it doesnt load anything. May i get some advice on where and what i am doing wrong? I highlighted the code where i changed to be in red, so its easier to see which part i am talking about. PS: Ignore the weird name i gave for my variables, i will change it after completing it. 

<!DOCTYPE html>
<html>
<script type="text/javascript"  src="https://www.google.com/jsapi"></script>
  <head>
    <base target="_top">
  </head>
  <body>
   
  </body>
</html>


 <script>

 // Load the Visualization API and desired package(s).
  google.load('visualization', '1.0', {'packages':['controls']});
  /**
   * Run initializations on dialog load.
   */
  $(function() {
    // Set a callback to run when the Google Visualization API is loaded.
    // Note: could also be accomplished via google.load options.
    google.setOnLoadCallback(sendQuery);
    // Assign handler functions to dialog elements here, if needed.
    // Call the server here to retrieve any information needed to build
    // the dialog, if necessary.
  });
  
  
   /**
   * Issue asynchronous request for spreadsheet data.
   */
  function sendQuery() {
    google.script.run
      .withSuccessHandler(drawDashboard)
      .withFailureHandler(function(msg) {
            // Respond to failure conditions here.
            $('#main-heading').text(msg);
            $('#main-heading').addClass("error");
            $('#error-message').show();
          })
      .getSpreadsheetData();
  }
  
  function drawDashboard(response) {
    $('#main-heading').addClass("hidden");
    if (response == null) {
      alert('Error: Invalid source data.')
      return;
    }
    else {
      // Transmogrify spreadsheet contents (array) to a DataTable object
      var data = google.visualization.arrayToDataTable(response,false);
      var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard-div'));
      var pieChart = new google.visualization.ChartWrapper(){
        'chartType': 'LineChart',
        'containerId': 'piechart-div',
        // The pie chart will use the columns 'Timestamp' and 'Smoke'
        // out of all the available ones.
        'view': {'columns': [0, 1]},
          'options': {'title' : 'Readings for Smoke'} // After adding this line, my charts do not show.
         
      };
    
      var table = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'table-div'
      });
      var donutSlider = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
        'containerId': 'slider-div',
        'options': {
          'filterColumnLabel': 'Timestamp'
         }
      });
    
      var genderPicker = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
        'containerId': 'selector-div',
        'options': {
          'filterColumnLabel': 'Temperature value'
        }
      });
      
      var table1 = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'table1-div'
      });
      
      var secondChart = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
        'containerId': 'second-div',
        // The pie chart will use the columns 'Name' and 'Donuts eaten'
        // out of all the available ones.
        'view': {'columns': [0, 2]}
      });
    
      
      var timeSlider = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
        'containerId': 'time-div',
        'options': {
          'filterColumnLabel': 'Timestamp'
         }
      });
    
      var ammoniaPicker = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
        'containerId': 'ammonia-div',
        'options': {
          'filterColumnLabel': 'ammonia'
        }
      });
      
        // Set up dependencies between controls and charts
      dashboard.bind(donutSlider, [pieChart,table]);
      dashboard.bind(genderPicker, [pieChart,table]);
      dashboard.bind(timeSlider, [secondChart,table1]);
      dashboard.bind(ammoniaPicker, [secondChart,table1]);
      // Draw all visualization components of the dashboard
      dashboard.draw(data);
    }
  }  
  }
      
    </script>
Reply all
Reply to author
Forward
0 new messages