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

[patrik_gfeller]

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:

Preparations

Folder Structure

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

• css
• javascript
• Visualization

Please the following file in the .css folder:

• visualizationStyle.css (482 Bytes)

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

• openHAB.js.xml (4.0 KB)
• jquery.csv.min.js.xml (8.1 KB)
• date.js.xml (25.2 KB)

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

• MultiLineDualYChart.html.xml (8.0 KB)

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 …)

Configuration

HTML

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):

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):

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:

Sitemap

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,
Patrik

[Udo_Hartmann]

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

[patrik_gfeller]

@Udo_Hartmann

but … where is the scale for rain?

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:

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.