Programming a Dual Y-axis chart from a spread sheet

26 views
Skip to first unread message

LilyL

unread,
Jul 6, 2017, 3:55:42 PM7/6/17
to Google Visualization API
When using Javascript to code pretty much any chart I've been changing the type of chart within the google.visualization line, and changing axis ranges without any trouble, but when I tried to create a dual y-axis chart from a sample spreadsheet I couldn't adjust to accommodate the series even after taking example code from a dual y-axis where the data is inside the code. When modifying the functioning example below the most I could add were var query and var query string lines. 

HTML:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Javascript: 

google.charts.load('current', {'packages':['line', 'corechart']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var chartDiv = document.getElementById('chart_div');

      var data = new google.visualization.DataTable();
      data.addColumn('date', 'Month');
      data.addColumn('number', "Average Temperature");
      data.addColumn('number', "Average Hours of Daylight");

      data.addRows([
        [new Date(2014, 0),  -.5,  5.7],
        [new Date(2014, 1),   .4,  8.7],
        [new Date(2014, 2),   .5,   12],
      ]);

      var materialOptions = {
        chart: {
          title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
        },
        width: 900,
        height: 500,
        series: {
          0: {axis: 'Temps'},
          1: {axis: 'Daylight'}
        },
        axes: {
          y: {
            Temps: {label: 'Temps (Celsius)'},
            Daylight: {label: 'Daylight'}
          }
        }
      };
      function drawMaterialChart() {
        var materialChart = new google.charts.Line(chartDiv);
        materialChart.draw(data, materialOptions);
      }
      
      drawMaterialChart();

    }

The best version I could come up with to modify it for my example data is below, but it won't generate a chart. What am I doing wrong? Thanks in advance for reading.

      google.charts.load('current', {
        'packages': ['line', 'corechart']
      });
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var chartDiv = document.getElementById('chart_div');
        var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8');
        var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1BHeR6LetK5ztqvgIm53OpbNFjMttRICBBDR8j1yEAjg/edit#gid=0' + queryString);
        query.send(handleSampleDataQueryResponse);
      }

      function handleSampleDataQueryResponse(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }

        var data = response.getDataTable();
      ]);

      var materialOptions = {
        chart: {
          title: 'Example Data'
        },
        width: 900,
        height: 500,
        series: {
          0: {
            axis: 'Miles'
          },
          1: {
            axis: 'Heartrate'
          }
        },
        axes: {
          y: {
            Miles: {
              label: 'Miles Run'
            },
            Heartrate: {
              label: 'Heart rate(BPM)'
            }
          }
        }
      };

      function drawMaterialChart() {
        var materialChart = new google.charts.Line(chartDiv);
        materialChart.draw(data, materialOptions);
      }

      drawMaterialChart();

      }


Daniel LaLiberte

unread,
Jul 6, 2017, 4:51:02 PM7/6/17
to Google Visualization API
There were a few problems in your code that the debugger helped figure out.  Here is your code fixed:  https://jsfiddle.net/dlaliberte/tdts88zr/1/

But the material chart does not offer the viewWindow options necessary to adjust the gridlines for both left and right axes so they align.  If you need that, fortunately, you can use the classic charts to generate dual axes.  And if you want the material fonts and colors, you can use the option theme: 'material'.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/5166eb17-8364-4d92-adf8-8f5ec6678940%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--
Reply all
Reply to author
Forward
0 new messages