Change chart type in google chart example

Hello - very green newbie here.
I have added the Google Charts example and it is working (on my mobile).
Can someone please suggest how to change the chart type? Looking for circle / donut type.

Please advise

Hi Tony_Saad,

Open page logic and you will se JS flow function, then replace contents of the function called chartExecutor() by the code of any example from here: Google Charts - Donut. Copy only javascript code, without html part.

1 Like

Hi Aleksandr_Mushikov,
Thank you.

I will need to learn more basics and how to code in order to move forward

Hello Aleksandr_Mushikov,
I’d like to use the D3 Arc function as I believe it will work better than google charts.
I’ve been trying to find how to do this but have not been able to as yet.

I am trying an animation something like:

Any and all tips greatly appreciated!

Hi Tony_Saad,

Unfortunately I have no experience with D3.js charts.
Maybe someone else knows the solution.

Thank you for your fast reply.

Hi there!

The D3 library is available to the chartExecutor JS function in “d3” namespace, so you can simply use it from there :slight_smile: Do remember to add a body for D3 in the “D3.js chart html body” property.

1 Like

Hello @Akseli_Virtanen,
Thank you.
We have been able to get D3 working but have run into a problem with the background.

While we can set the colour in the body there is a white border we cannot edit. We think it is hard coded in the component. We asked in this thread but no reply as yet:

Do you know how to remove/edit this?

Can this used outside of the chart component?- Could we call D3 in a container / outside of the component?

No, the library is only available in the chart component, also outside the component there wouldn’t be a HTML DOM either, so being able to call D3 in a custom JS block wouldn’t do you much good :slight_smile:

Thanks @Akseli_Virtanen,
Is there any other way to draw circles and arcs in appgyver that we can control with formulas and variables?

It’s possibly a bit of a workaround, but what you can do is pass in data with the “Chart data” parameter, which can be referenced as "$chartData" in the JavaScript you pass to Chart function.

You can bind the Chart data to a variable source and then if you set again Chart function, I believe it should then redraw the chart component :slight_smile:

I don’t have a full example but here’s a piece showing you to get started:

function chartExecutor() {
    let data = "$chartData"; //corresponds to input argument "Chart data"
    let svg ="body").append("svg");
    // do stuff with D3
// The chart component consumes the chart function as a string
const funcAsString = chartExecutor.toString();
return { funcAsString }

I put the chart component on a list we should do better documentation for!

Thank you for the pointer. I appreciate it.
I will explore with a colleague who is better at this than I am!

Hello, please how did you add the charts on Appgyver? I also want to add a chart but I couldn’t do it.

Go into the marketplace and drop this token into the search bar. J0dVK-nLWYnNp-GyHg-CBw
It will add a page that has an example of a Google Chart. Use that as your starting point.

Good luck! I am just learning this stuff.

this is the correct link: HTML renderer (beta) released - #7 by Akseli_Virtanen

Is there any way for me to use Google Chart Table?

I am stuck at the DataTable() or anything related with $chartData. $chartData uses arrayToDataTable while Google Chart Table uses DataTable, addColumn, addRow

I don’t if this is relevant but I spent some moments trying to figure out where to find the content of this JS Flow Function to edit (I was expecting to find it in some field at right side panel) until I realized that double clicking the [ Generate Google Charts function string] green block (PAGE logic) finally opened a window were I can edit/insert the code . I know its a newbie issue but maybe someone else will face this and give up. Best regards