Graph module/library that works in Scriptable?

I made a small Scriptable script that captures some data from (the website for) my solar panels. The script currently shows the current power production, today’s energy production, and the total energy production. That’s nice, but it could be even better.

One of the API calls (also) returns an array of key-value pairs where the key is a timestamp (5 minutes apart) and the value is the power production at that time. It would be nice to use that to produce a graph of the production during the day (the native App for my inverter already does that, but the UI/UX of that App is not very nice).

Which graph module/library works with Scriptable? (If any)

An alternative to a graphing library is to draw the graph yourself using the DrawContext API.

1 Like

That might work, but I was/am hoping there’s a solution that requires less effort… :wink:

1 Like

There is the Google Charts library, but that only works in a browser which is no problem in Scriptable. But it is not native Scriptable and I don’t think that there is a graph library exclusively for Scriptable, but I can be wrong :man_shrugging:

While not perfect I can live with this…

(coded myself using DrawContext)

The graph looks less good when using Siri though, so some additional questions:

  • How can I make the background of the graph transparent instead of white? (Using a clear color for the background of the context did not work)
  • How can I horizontally center the graph in a row of a table?
4 Likes

Amazing! That looks really cool :blush:

In order to render a transparent background, you’ll need to set context.opaque = false.

You should be able to center the image row.centerAligned(). Here’s a small sample script and a screenshot of the result.

let c = new DrawContext()
c.size = new Size(200, 200)
c.opaque = false
c.backgroundColor = Color.clear()
let rect = new Rect(50, 50, 100, 100)
c.fillRect(rect)
let img = c.getImage()
let table = new UITable()
let row = new UITableRow()
row.height = 200
let cell = row.addImage(img)
cell.centerAligned()
table.addRow(row)
await table.present()

1 Like

I guess I got confused because the documentation says “Default is false”.

Is that an error?

Setting it to false does help! :smile: (and the centering also works)

Ugh. That’s a mistake :flushed: Sorry for the inconvenience.

Sorry for the inconvenience.

No need to!

You made an awesome App and are very helpful here, which enables us to create what we imagined :smile:

https://quickchart.io/ works well with Scriptable. I used their charts it in my Scriptable “Pomodoro logger” (that writes completed work sessions into an outlook calendar) to visualise some productivity statistics. Their charts can be combined with UITables, too.

The only drawback is the internet/site dependency. But it’s the best we can do at the moment I guess.

Edit: And the fact that the amount of data / chart style is limited by URL length limits.

1 Like

That data looks interesting @rob. :slight_smile:

(Wonder why it pulses, overlaid with the build up.)

Charty is also pretty nice: