Adding an on/off time % graph to a Cree Bulb device handler display

I was trying to figure out how much time a few lights were spending on, so for the fun of it, I added a graph to the standard Cree Bulb device handler.

It uses the Google API for Image Charts. Sure they have new version that requires html5, but this older version sends a picture file like a png or gif, which I believe is more workable inside the smartthings app. It produces all kinds of nifty line, bar, pie, etc. charts. Send a query with data points…get a gif file back.

There doesn’t seem to be any signup or authorization with google required to make this work. (the links work fine from “incognito” browsing). I do use a poller to make the time based on/off collections…you can attach the “pollster” smartapp to this cree handler and tell it how often you want it to check on the light.


All the commands to do the various graph types and pass the data for this line can be found at: https://developers.google.com/chart/image/docs/gallery/chart_gall

Basically it makes a graph when you get smartthings to send a httpGet query for a Pie Chart like this:

query: [cht: “p3”, chd: “t:{onp},{offp}”, chs: “400x150”, chl: “On {onp}%|Off {offp}%”, chof: “gif”]

–and the equivalent https address query link you are producing–

https://chart.googleapis.com/chart?cht=p3&chd=t:75,25&chs=400x150&chl=On-75%|Off-25%&chof=gif




If you build up more data (and code…which I have not done yet) and want a line graph, you just tweak a few codes in the query: I added some dummy data instead of variables this time.

query:[cht: “lc”, chd: “t:-5,30,-30,50,80,200,50”, chds: “a”, chco: “0000ff”, chxt: “x,y”, chs: “320x240”, chxl:“0:|N|M|T|W|R|F|S”, chof: “gif”, ],

–and the equivalent https address query link you are producing–

https://chart.googleapis.com/chart?cht=lc&chd=t:-5,30,-30,50,80,200,50&chds=a&chco=0000ff&chxt=x,y&chs=320x240&chxl=0:|N|M|T|W|R|F|S&chof=gif


If you've got a cree bulb, try the driver for the fun of it. If not...play with the graph links and look through the code.
10 Likes

Very unique way to use the carouselTile. Nicely done!

1 Like

This is great!

Unfortunately, I’m not a programmer, but I’m going to play with this.

I really want something like this for my thermostats, which are Zwave.

Is this possible for those?
Is it possible to create a cumulative report of 30 days?

1 Like

This is very cool. I haven’t played with the charts API in a while (I used it in a prototype years ago but eventually went with local generation of charts in my finished webapp). This opens lots of possibilities!

1 Like

Very clever. I got it to look good in a 6x3 tile using chs: "300x125". Using less than the 2.5:1 ratio recommended by Google also works, but the radius is not as smooth.

The next thing I’m going to try is replicating the image creation using ImageMagick, as Google has a track record of unceremoniously killing off apps/services (e.g., Latitude, third-party access to Google Voice, and My Tracks goes away at the end of this month).

73, N6HB

1 Like

Sounds like an awesome plan Bob, I’m eager to see what you come up with!

@N8XD , @Mr_Lucky - are you still using the google chart, did you ever add a line chart? I am wanting to figure this out and add to my HEM.