Geek Answers Handbook

Google render align axis 0 with two different y-axes

I am creating a combochart with google visualization library. I plan traffic and store revenue for the day. I set the drawing options

var options = {
  seriesType: "bars",
  series:{0:{targetAxisIndex:0},1:{targetAxisIndex:1}},
  vAxes:{0:{title: "Revenue"},1:{title: "Traffic"}},
  hAxis: {title: "Time", showTextEvery: 1},
};

which sets revenue on a different y axis than traffic. Sample data might look like this:

var data = [
  //   Time       Revenue Traffic
  ['10:00-10:30', '132.57', '33'],
  ['10:30-11:00', '249.23', '42'],
  ['11:00-11:30', '376.84', '37'],
  [... etc ..]
];

The problem I am facing is that traffic values ​​will always be positive, while revenue can be a negative number if there were returns. If this happens, my revenue axis will start at a negative value, such as -50, while traffic will start at 0 and the horizontal baselines will not line up. I would like to have it so that even if the income has values ​​less than 0, the 0 axis will line up with the traffic axis 0.

, , . , 0 , -50. , , 0. enter image description here

+4
1

, , 0 ( , 0 , ).

, ( 1 - "", 2 - "" ):

var range1 = data.getColumnRange(1);
var range2 = data.getColumnRange(2);

1, max 0. .

var maxValue1 = (range1.max <= 0) ? 1 : range1.max;
var maxValue2 = (range2.max <= 0) ? 1 : range2.max;

, :

var scalar = maxValue2 / maxValue1;

"", range1.min 0:

var minValue1 = Math.min(range1.min, 0);

, "":

var minValue2 = minValue1 * scalar;

, vAxis minValue/maxValue :

vAxes: {
    0: {
        maxValue: maxValue1,
        minValue: minValue1,
        title: 'Revenue'
    },
    1: {
        maxValue: maxValue2,
        minValue: minValue2,
        title: 'Traffic'
    }
}

, (maxValue1 / (maxValue1 - minValue1 == maxValue2 / (maxValue2 - minValue2 minValue1 / (maxValue1 - minValue1 == minValue2 / (maxValue2 - minValue2), , , 0 .

jsfiddle : http://jsfiddle.net/asgallant/hvJUC/. , . , , .

+3

More articles:


All Articles