Sanbox code to Google sheets

[lenepienaar]

Hi All, new here and also not very goog with coding!

I have created a chart in the sandbox, I want to copy it over to Google sheets and add data from the sheet into the code but I get lost along the way and my chart doesn’t show up anymore.

Is there any tips/ tutorials/ documents to help with this?

Here is my sandbox link https://quickchart.io/chart?h=150&v=3&c={ %20%20type%3A%20'bar'%2C %20%20data%3A%20{ %20%20%20%20labels%3A%20['Q1']%2C %20%20%20%20datasets%3A%20[ %20%20%20%20%20%20{ %20%20%20%20%20%20%20%20label%3A%20'Users'%2C %20%20%20%20%20%20%20%20data%3A%20[100]%2C %20%20%20%20%20%20%20%20backgroundColor%3A%20getGradientFillHelper('horizontal'%2C%20[ %20%20%20%20%20%20%20%20%20%20'red'%2C %20%20%20%20%20%20%20%20%20%20'yellow'%2C %20%20%20%20%20%20%20%20%20%20'green'%2C %20%20%20%20%20%20%20%20])%2C %20%20%20%20%20%20}%2C %20%20%20%20]%2C %20%20}%2C %20%20options%3A%20{ %20%20%20%20indexAxis%3A%20'y'%2C %20%20%20%20layout%3A%20{ %20%20%20%20%20%20padding%3A%2040%2C %20%20%20%20}%2C %20%20%20%20scales%3A%20{ %20%20%20%20%20%20x%3A%20{ %20%20%20%20%20%20%20%20display%3A%20false%2C %20%20%20%20%20%20}%2C %20%20%20%20%20%20y%3A%20{ %20%20%20%20%20%20%20%20display%3A%20false%2C %20%20%20%20%20%20}%2C %20%20%20%20}%2C %20%20%20%20plugins%3A%20{ %20%20%20%20%20%20legend%3A%20{ %20%20%20%20%20%20%20%20display%3A%20false%2C %20%20%20%20%20%20}%2C %20%20%20%20%20%20annotation%3A%20{ %20%20%20%20%20%20%20%20clip%3A%20false%2C %20%20%20%20%20%20%20%20common%3A%20{ %20%20%20%20%20%20%20%20%20%20drawTime%3A%20'afterDraw'%2C %20%20%20%20%20%20%20%20}%2C %20%20%20%20%20%20%20%20annotations%3A%20{ %20%20%20%20%20%20%20%20%20%20low%3A%20{ %20%20%20%20%20%20%20%20%20%20%20%20type%3A%20'label'%2C %20%20%20%20%20%20%20%20%20%20%20%20xValue%3A%2015%2C %20%20%20%20%20%20%20%20%20%20%20%20content%3A%20['Actively%20Disengaged']%2C %20%20%20%20%20%20%20%20%20%20%20%20font%3A%20{ %20%20%20%20%20%20%20%20%20%20%20%20%20%20size%3A%2012%2C %20%20%20%20%20%20%20%20%20%20%20%20%20%20weight%3A%20'bold'%2C %20%20%20%20%20%20%20%20%20%20%20%20}%2C %20%20%20%20%20%20%20%20%20%20}%2C %20%20%20%20%20%20%20%20%20%20medium%3A%20{ %20%20%20%20%20%20%20%20%20%20%20%20type%3A%20'label'%2C %20%20%20%20%20%20%20%20%20%20%20%20xValue%3A%2040%2C %20%20%20%20%20%20%20%20%20%20%20%20content%3A%20['Disengaged']%2C %20%20%20%20%20%20%20%20%20%20%20%20font%3A%20{ %20%20%20%20%20%20%20%20%20%20%20%20%20%20size%3A%2012%2C %20%20%20%20%20%20%20%20%20%20%20%20%20%20weight%3A%20'bold'%2C %20%20%20%20%20%20%20%20%20%20%20%20}%2C %20%20%20%20%20%20%20%20%20%20}%2C %20%20%20%20%20%20%20%20%20%20high%3A%20{ %20%20%20%20%20%20%20%20%20%20%20%20type%3A%20'label'%2C %20%20%20%20%20%20%20%20%20%20%20%20xValue%3A%2090%2C %20%20%20%20%20%20%20%20%20%20%20%20content%3A%20['Engaged']%2C %20%20%20%20%20%20%20%20%20%20%20%20font%3A%20{ %20%20%20%20%20%20%20%20%20%20%20%20%20%20size%3A%2012%2C %20%20%20%20%20%20%20%20%20%20%20%20%20%20weight%3A%20'bold'%2C %20%20%20%20%20%20%20%20%20%20%20%20}%2C %20%20%20%20%20%20%20%20%20%20}%2C %20%20%20%20%20%20%20%20%20%20label2%3A{ %20%20%20%20%20%20%20%20%20%20%20%20type%3A%20'label'%2C %20%20%20%20%20%20%20%20%20%20%20%20xValue%3A%2065%2C %20%20%20%20%20%20%20%20%20%20%20%20content%3A%20['Somewhat%20Engaged']%2C %20%20%20%20%20%20%20%20%20%20%20%20font%3A%20{ %20%20%20%20%20%20%20%20%20%20%20%20%20%20size%3A%2012%2C %20%20%20%20%20%20%20%20%20%20%20%20%20%20weight%3A%20'bold'%2C %20%20%20%20%20%20%20%20%20%20%20%20}%2C %20%20%20%20%20%20%20%20%20%20}%2C %20%20%20%20%20%20%20%20%20%20arrow%3A%20{ %20%20%20%20%20%20%20%20%20%20%20%20type%3A%20'point'%2C %20%20%20%20%20%20%20%20%20%20%20%20pointStyle%3A%20'triangle'%2C %20%20%20%20%20%20%20%20%20%20%20%20backgroundColor%3A%20'%23000'%2C %20%20%20%20%20%20%20%20%20%20%20%20radius%3A%2015%2C %20%20%20%20%20%20%20%20%20%20%20%20xValue%3A%2075%2C %20%20%20%20%20%20%20%20%20%20%20%20yAdjust%3A%2065%2C %20%20%20%20%20%20%20%20%20%20}%2C %20%20%20%20%20%20%20%20%20%20label1%3A%20{ %20%20%20%20%20%20%20%20%20%20%20%20type%3A%20'label'%2C %20%20%20%20%20%20%20%20%20%20%20%20xValue%3A%2075%2C %20%20%20%20%20%20%20%20%20%20%20%20yAdjust%3A%2095%2C %20%20%20%20%20%20%20%20%20%20%20%20content%3A%20['Your%20score'%2C%20'75%']%2C %20%20%20%20%20%20%20%20%20%20%20%20font%3A%20{ %20%20%20%20%20%20%20%20%20%20%20%20%20%20size%3A%2018%2C %20%20%20%20%20%20%20%20%20%20%20%20%20%20weight%3A%20'bold'%2C %20%20%20%20%20%20%20%20%20%20%20%20}%2C %20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20}%2C %20%20%20%20%20%20%20%20}%2C %20%20%20%20%20%20}%2C %20%20%20%20}%2C %20%20}%2C }

[ian]

Hi @lenepienaar, the way to do this is by substituting the values in the chart config that you provided with values from your spreadsheet.

You can edit the Chart URL produced by the sandbox directly. Bit of a mess but it looks like this:

Here’s an example spreadsheet: Dynamic annotated progress bar with QuickChart - Google Sheets

Hope this helps!

[lenepienaar]

Hi Ian,

Thank you so much, I appreciate it, how do you know where to add in the data, I’m just hoping to get better at this so that you don’t have to do it for me Any tips?

We were actually hoping to show the whole colour range and then its just the arrow that moves, for eg. the 2% it would be amazing to still see the whole gradient from green to red!

Thank you for being so extremely helpful!