Alex, Sorry, we don't have options for drawing multiple axes with offsets, though we have thought of adding that feature. The only real complication is the contention for limited space with the legend.
Perhaps the simplest thing you could do is draw the chart multiple times, but after the first time, set the chartArea.width to 0 so it only draws the axes, and then vary the options to show the appropriate axes. To get all the charts to display without wrapping, you will probably want to set each of the containers style to use display:inline-block, or wrap a table around them. On Wed, Apr 22, 2015 at 12:38 PM, Alex Monari <[email protected]> wrote: > > <https://lh3.googleusercontent.com/-RbiCj-usYl4/VTfOR6zEkRI/AAAAAAAACfM/gpS-QIvkLjw/s1600/Screen%2BShot%2B2015-04-22%2Bat%2B17.37.12.png> > > Hi all, > I've successfully built a combo chart as seen below. > > > <https://lh3.googleusercontent.com/-dJZv6yZ2o-g/VTfNQgRJdcI/AAAAAAAACfE/K4chTVJDv8g/s1600/Screen%2BShot%2B2015-04-22%2Bat%2B17.32.38.png> > > > For the population of the datatable I'm using ajax for the HTTP request to > my PHP script which is fetching the data I desire from my DB and returning > it as JSON which I then use populate the DB > > I'm having an issue though i.e. I'm trying to achieve what is in the image > below but I would like to space out the multiple y axis on the right hand > side. How do I go about doing this? > > > > <https://lh3.googleusercontent.com/-RbiCj-usYl4/VTfOR6zEkRI/AAAAAAAACfM/gpS-QIvkLjw/s1600/Screen%2BShot%2B2015-04-22%2Bat%2B17.37.12.png> > > > Are there margin or padding parameters amongst the customisation bits of > the vaxes properties? > > Here's my code so far: > > google.load("visualization", "1", {packages:["corechart"]}); > > google.setOnLoadCallback(drawVisualization); > > function drawVisualization() { > > var req = false; > var httpResponseText; > var httpResponseTextAsJSON; > var html = '<p>'; > var browserIncompatible = "Error - Browser incompatible with Graph API"; > > // Create a request sent to server > try { > // XMLHttpRequest applicable to most browsers > req = new XMLHttpRequest(); > > //myLogger("myLogger - XMLHttpRequest() created"); > } catch (e){ > // Specific HTTP request for IE > try { > req = new ActiveXObject("Msxml2.XMLHTTP"); > > // myLogger("myLogger - req = new > ActiveXObject(Msxml2.XMLHTTP);"); > } catch (e) { > // Specific HTTP request for IE older versions > try{ > req = new ActiveXObject("Microsoft.XMLHTTP"); > > myLogger("myLogger - req = new > ActiveXObject(Microsoft.XMLHTTP);"); > } catch (e){ > // > html += browserIncompatible + '</p>'; > > document.getElementById('combochart').innerHTML = html; > } > } > } > > // Use onreadystatechange property > req.onreadystatechange = function() { > > //myLogger("myLogger - req.onreadystatechange = function(){"); > > if(req.readyState == 4) { > > //myLogger("myLogger - req.readyState == 4"); > > if(req.status === 200) { > > //myLogger("myLogger - req.status === 200"); > > > // String which converts JSON object into a regular string > httpResponseText = req.responseText; // This is a string > > myLogger("myLogger - JSON STRING - " + httpResponseText); > > httpResponseTextAsJSON = JSON.parse(httpResponseText); // > Parses a string as JSON. Returns the Object corresponding to the given JSON > text. > > //myLogger(httpResponseTextAsJSON); > > var data = new google.visualization.DataTable(); > > data.addColumn('string', 'setheadings'); > data.addColumn('number', 'distance'); > data.addColumn('number', 'duration'); > data.addColumn('number', 'calories'); > data.addColumn('number', 'laps'); > data.addColumn('number', 'strokes'); > data.addColumn('number', 'speed'); > data.addColumn('number', 'efficiency'); > data.addColumn('number', 'strokerate'); > data.addColumn('number', 'strokelength'); > data.addColumn('number', 'avghr'); > data.addColumn('number', 'maxhr'); > data.addColumn('number', 'minhr'); > > for (var key in httpResponseTextAsJSON.setsJSONArr) { > if > (httpResponseTextAsJSON.setsJSONArr.hasOwnProperty(key)) { > data.addRow(["Set " + > httpResponseTextAsJSON.setsJSONArr[key].setnumber, > > parseInt(httpResponseTextAsJSON.setsJSONArr[key].distance), > > durationinsecs(httpResponseTextAsJSON.setsJSONArr[key].duration), > > parseInt(httpResponseTextAsJSON.setsJSONArr[key].calories), > > parseInt(httpResponseTextAsJSON.setsJSONArr[key].laps), > > parseInt(httpResponseTextAsJSON.setsJSONArr[key].strokes), > > parseInt(httpResponseTextAsJSON.setsJSONArr[key].speed), > > parseInt(httpResponseTextAsJSON.setsJSONArr[key].efficiency), > > parseInt(httpResponseTextAsJSON.setsJSONArr[key].strokerate), > > parseInt(httpResponseTextAsJSON.setsJSONArr[key].strokelength), > > > parseInt(httpResponseTextAsJSON.setsJSONArr[key].avghr), > > parseInt(httpResponseTextAsJSON.setsJSONArr[key].maxhr), > > parseInt(httpResponseTextAsJSON.setsJSONArr[key].minhr)] > > ); > } > } > > var options = { > title : 'Chart title', > height: 500, > > hAxis: { > title: "HAxis title" > }, > > seriesType: "bars", > > series: { > 3: {type: "line", targetAxisIndex: 0}, > 4: {type: "line", targetAxisIndex: 1}, > 5: {type: "line", targetAxisIndex: 2}, > 6: {type: "line", targetAxisIndex: 3}, > 7: {type: "line", targetAxisIndex: 4}, > 8: {type: "line", targetAxisIndex: 5}, > 9: {type: "line", targetAxisIndex: 6}, > 10: {type: "line", targetAxisIndex: 7}, > 11: {type: "line", targetAxisIndex: 8} > }, > > vAxes: { > 0: { > title: 'axis0' > }, > 1: { > title: 'axis1' > }, > 2: { > title: 'axis2' > }, > 3: { > title: 'axis3' > }, > 4: { > title: 'axis4' > }, > 5: { > title: 'axis5' > }, > 6: { > title: 'axis6' > }, > 7: { > title: 'axis7' > }, > 8: { > title: 'axis8' > } > } > }; > > var chart = new > google.visualization.ComboChart(document.getElementById('combochart')); > > chart.draw(data, options); > > } else { > myLogger("myLogger - req.status == " + req.status); > } > > //return req.status === 200 ? success(req.responseText) : > error(req.status) > } else { > myLogger("myLogger - req.readyState != 4 i.e. req.readyState === > " + req.readyState); > } > } > > req.open("GET", 'http://www.qwerty.com/fetchdbdata.php', true); > > req.send(null); > } > > function durationinsecs(durationstr) { > var durationarray = durationstr.split(":"); > > var durationinsecs = (parseInt(durationarray[0]) * 3600) + > (parseInt(durationarray[1]) * 60) + > (parseInt(durationarray[2])); > > return durationinsecs; > } > > function myLogger(content) { > if (window.console && window.console.log) { > console.log("myLogger - " + content); > } > } > > I appreciate any help > > -- > 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 > http://groups.google.com/group/google-visualization-api. > For more options, visit https://groups.google.com/d/optout. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> - 978-394-1058 [email protected] <[email protected]> 5CC, Cambridge MA [email protected] <[email protected]> 9 Juniper Ridge Road, Acton 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 http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
