charts - How can I force a dual y axis graph to use the same baseline for each axis? -


I have a Google combination chart where I am using two Y axis.

Currently, the baseline is at a different level for each axis.

I want to make sure the baseline is at the same level for each axis.

I am currently using my graph to display the following:

   gt; & gt; & gt; & gt; & lt; body & gt; & lt; div id = 'Graphdiv' style = 'width: 900px; height: 500px;'> 

I am aware of the following questions which are relevant to this question:

  • / ol>

    It seems that the first of these deals is especially with the situation where the data is already known. It would also be useful to see some of the javascript signals necessary to implement it.

    The second, offers some useful javascript, but it can not seem to deal with the data series where the second series contains negative values, my dataset does.

    I know that the most important component of these answers is using the minimum value of each vAxes and the maximum value properties. These changes can be used to override the method that Google Chart generally decides the baseline for each axis (usually it does this by looking at the minimum and maximum values ​​of data for each individual axis).

    I found the answer to the above question on the Google Visualization API discussion group, see the courtesy of @Sagland.

    I have reproduced the answer given below:

    If the basic base is always at the center of the chart, then it is acceptable (even down to any data Point is not), this is a simple solution to the problem: To get the minimum / maximum for each series and set the minimum value / maximum value option to negate the low value: This will ensure that the chart is determined A true minimum / maximum axis is symmetric of boundary 0, and thus both axes should share a baseline at the center of the chart.

      var axis0Range = data.getColumnRange (1); Var axis1Range = Data. GetColumnRange (2); In the vAxes option   

    :

      vAxes: {0: {title: 'PNL', title text: style: {fontSize: 14}, text style: {Color: 'blue', font size: 15}, format: 'pound ###, ###, ###', // minimum / maximum swap and multiply by -1 min: axis range 0. * -1, MaxValu: axis0Range.min * -1}, 1: {title: 'margin', titleTextStyle: {fontSize: 14}, text style: {color: 'red', fontSize: 15}, format: . ###% ', // Multiply by swap min / max and 1 min: axis1Range.max * -1, maxValue: axis1Range.min * -1}}    

  • Comments

    Popular posts from this blog

    php - PDO bindParam() fatal error -

    logging - How can I log both the Request.InputStream and Response.OutputStream traffic in my ASP.NET MVC3 Application for specific Actions? -

    java - Why my included JSP file won't get processed correctly? -