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'. On Thu, Jul 6, 2017 at 3:55 PM, LilyL <[email protected]> wrote: > *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 > <https://docs.google.com/spreadsheets/d/1BHeR6LetK5ztqvgIm53OpbNFjMttRICBBDR8j1yEAjg/edit#gid=0> > 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('ht > tps://docs.google.com/spreadsheets/d/1BHeR6LetK5ztqvgIm53OpbNFjMttR > ICBBDR8j1yEAjg/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(); > > } > > > -- > 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 [email protected]. > 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 > <https://groups.google.com/d/msgid/google-visualization-api/5166eb17-8364-4d92-adf8-8f5ec6678940%40googlegroups.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> [email protected] <[email protected]> 5CC, Cambridge MA -- 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 [email protected]. To post to this group, send email to [email protected]. 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/CAOtcSJOYRgzN37REdBe_YvF4W4H34-Ey-HbnbX5W3mF%2B1FbOCQ%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
