Long story short, I used the “onChange” callback of HandsOnTable to update a hidden form field with a serialized array of the table. Every time the table is edited it updates the hidden input field. When the post is saved, it saves the hidden field as a custom field. Then when the post editor is opened again, the serialized data is
re-objectified parsed using JSON.parse(), and the “data” attribute of handsontable is set.
The front end needs that data massaged a bit, to split it into the x-axis and y-axis. A couple loops later though and we get decent results like on the right.
I’ve implemented a line chart, a bar chart, and a pie chart now, more may follow.
Unfortunately no source code release at this time since it’s a work project. Simple enough concept, just took a few days to learn the libraries and work out the kinks.