Google Charts - Multiple Y-Axis (Work in progress)

Hi all,

I´ve decided to start here an example on how to display charts using different y-axis with google API. As I try to make this a more detailed one than my usual inspirations, this post will not yet contain the full example; but the result. I´ll later add step by step on what was required to get there.

The result; a chart with multi x-axis supporting zoom to pre-defined steps:
2017-08-06 02_37_21-Wetter vereinzelte Gewitter möglich (21 °C)


Folder Structure

Create the following sub-folders in your installations html directory:

  • css
  • javascript
  • Visualization

2017-08-06 15_00_02-html - Brackets

Please the following file in the .css folder:

The following files are to be placed in the “javascript” sub-folder:

The following file needs to be placed in the “Visualization” folder:

Note: You´ll need to remove the .xml extension - the file must end .js, or .html respectively (but this file type can not be uploaded here …)



The items to plot are hardcoded in the .html file; search the function “DrawChart” and replace the item list with the your items (you may also, remove or add items):

html (html) - Brackets

As a next step we define how many y-axis we need; search the “chartOptions”. There you can configure the different axis. The example below uses three axis (only two of them visible):

html (html) - Brackets

Every openHAB item you have registered earlier represents a series. For series that do not use the default y-axis you´ll need to add configuration entires too:

html (html) - Brackets


Last but not least add the diagram to the sitemap:

Webview url="/static/Visualization/MultiLineDualYChart.html?days=14&serviceId=rrd4j" height=4

with kind regards,


Hey, that’s very nice. but … where is the scale for rain? :wink:

I could it display on the right side of the diagram; but that uses a lot of space on small screens; thus it only shows the value on touch:

8 °C)

But it could be configured; I´ll start now with more details on the post above; but that´s how it would look like (I do not like it):

Of course that could be fine-tuned.