Combo chart with hAxis type bar and vAxes type line?

AchJa Mon

unread,

Oct 11, 2018, 4:40:57 PM10/11/18

to Google Visualization API

Is this even possible? I would like to be able to see one scale in bars hAxis, Target vs Actual ADR and then a line for vAxes, #Guests?

I have been looking around for examples to go off of but no luck. I am trying to incorporate two examples of charts I have seen to do this. Here is my code I'm testing but no matter how I try I am getting "undefined is not an object (evaluating 'b.count')".

Anyone ever done something like this before?

<html>

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

google.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['date', 'Target ADR', 'Actual ADR', '# Guests'],

[ "1 Mar", 289, 94, 0.10], [ "2 Mar", 295, 96, 0.20], [ "3 Mar", 300, 104, 0.30],

[ "4 Mar", 306, 124, 0.40], [ "5 Mar", 311, 142, 0.50], [ "6 Mar", 317, 153, 0.60],

[ "7 Mar", 322, 158, 0.70], [ "8 Mar", 328, 164, 0.80], [ "09Mar", 334, 164, 0.90],

["10 Mar", 339, 168, 0.80], ["11 Mar", 345, 169, 0.70], ["12 Mar", 351, 180, 0.60],

["13 Mar", 357, 190, 0.50], ["14 Mar", 363, 200, 0.40], ["15 Mar", 369, 210, 0.30],

["16 Mar", 375, 220, 0.20], ["17 Mar", 381, 230, 0.10], ["18 Mar", 387, 235, 0.00],

["19 Mar", 393, 240, -0.10], ["20 Mar", 399, 250, -0.20], ["21 Mar", 406, 245, -0.30],

["22 Mar", 412, 235, -0.40], ["23 Mar", 418, 235, -0.50], ["24 Mar", 425, 240, -0.60],

["25 Mar", 431, 245, -0.70], ["26 Mar", 438, 255, -0.80], ["27 Mar", 444, 260, -0.90],

["28 Mar", 451, 276, -0.80], ["29 Mar", 458, 280, -0.70], ["30 Mar", 464, 295, -0.60],

["31 Mar", 471, 310, -0.50],

]);

var options = {

title: 'Previous 12 Months ADR & #Guests',

hAxis: {showTextEvery: 5},

vAxes: {0: {viewWindowMode:'explicit',

viewWindow:{

max:510,

min:82

},

gridlines: {color: 'transparent'},

}, seriesType: 'bars',

1: {gridlines: {color: 'transparent'},

format:"#"}, seriesType: 'line',

},

series: {0: {targetAxisIndex:0},

1:{targetAxisIndex:0},

2:{targetAxisIndex:1},

},

colors: ["red", "green", "orange"],

chartArea:{left:100,top:100, width:500, height:150},

};

var chart = new google.visualization.ComboChart(document.getElementById('chart_id'));

chart.draw(data, options);

}

</script>

</html>

Daniel LaLiberte

unread,

Oct 11, 2018, 5:16:27 PM10/11/18

to Google Visualization API

Try this: http://jsfiddle.net/dlaliberte/1Lrjpk39/6/

Not sure what you had intended, or exactly what went wrong, but your axes structure was a bit messed up.

--
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-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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/e3716d66-a9d0-4c78-858e-b9733b9128df%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com Cambridge MA

AchJa Mon

unread,

Oct 11, 2018, 7:12:55 PM10/11/18

to google-visua...@googlegroups.com

Daniel,

Ah thanks for that. It is one step closer. Sorry about the stupid data. Like I mentioned I was pasting together two examples to try to get this to work so the data has nothing to do with the column titles.

I really appreciate your input!

AJ

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJM1LEYyHd80Qqc8oLvJxV7BdiJ7C8qsSEUUvaKWS0N0RQ%40mail.gmail.com.

Reply all

Reply to author

Forward