Dynamic Chart Creation

Hello there,

I’d like to send a personalised chart to a large database of customers and embed the chart image in a Marketo email. Is it possible using your no code chart? At this stage, I am not sure what the data source of truth is. My question is can it be done as per the above use case. Thank you

Yes, this is possible with the no-code chart tool. For example, you can use tokens or variables to customize the chart per customer.

Essentially, the chart maker will give you a base URL that looks something like:

https://quickchart.io/chart/render/zf-abc-123

You can include this in an <img> tag in your email:

<img src="https://quickchart.io/chart/render/zf-abc-123" />

Then you can substitute in labels, data, chart title, etc:

<img src="https://quickchart.io/chart/render/zf-abc-123?title=${customerTitle}&data=${val1},${val2},${val3}" />

More documentation here on how to use the chart maker + no-code API: Automate chart creation with Chart Maker (no code)

Thank you Ian for the quick response

Not sure if this URL variable: ${customerTitel} will work in Marketo. Usually, a when adding a local token to an URL it looks like that {{my.customerTitlle}} or a person token {{lead.Email Address}}.

I might be wrong though.

Hey Ian, I tried in Marketo the following code:

![](upload://u1J1zVxUjmCTKmeVLMOU1LBTtt5.png)

It displays the chart but no data populate the chart. I can confirm data is populated and I send an email to profile who have data against Q1, Q2, Q3 and Q4. See screen shot

Image 1-2-22 at 5.11 pm

Thank you

Hey @floydy, are you able to share the actual <img> tag that is generated and sent in the email? I can help troubleshoot how you’re attaching data to the chart template.

Hey Ian, here is the tag.

![](upload://u1J1zVxUjmCTKmeVLMOU1LBTtt5.png)

![](upload://u1J1zVxUjmCTKmeVLMOU1LBTtt5.png)

Thank you

Hmm, can you try putting that in a code block so the <img> tag renders properly? You can also just paste the URL in the href attribute of the img tag.

What about this. I remove this src="https:// after the <img tag

<img quickchart.io/chart/render/zm-bacd7fef-8151-4794-96d6-122868daf0af?data1=${Q1},${Q2},${Q3},${Q4}&Title=Australian Super Chart" style=“display: block; margin-left: auto; margin-right: auto;” />

Do you know what ${Q1},${Q2} etc are being substituted as? The issue is that numbers are not being substituted. Depending on how you introduce these values (tokens vs variable), the notation can change. So you may have to use {{ ... }} if you’re using tokens, for example.

Side note: make sure you lowercase Titletitle in your URL, otherwise it will not render correctly.

Hey Ian, thank you.

I did used {{lead.Q1}},{{lead.Q2}},{{lead.Q3}},{{lead.Q4}} and I get that error.

Chart Error: unexpected token {in JSON at position 1

Can you provide the full URL string that contains the substitutions from the {{lead.*}} tokens?

This is the URL without the src="https://

<img quickchart.io/chart/render/zm-bacd7fef-8151-4794-96d6-122868daf0af?data1={{lead.Q1}},{{lead.Q2}},{{lead.Q3}},{{lead.Q4}} &title=Australian Super Chart" style=“display: block; margin-left: auto; margin-right: auto;” />

What is {{lead.Q2}} being replaced with in the image tag that is actually sent in the email?

{{lead.Q2}} is a field at the person level that contains data for Q2. Therefore when a token is called it gathers the data. Same goes for Q1, Q3 and Q4.

Just to clarify my source of truth is marketo in this example.

Understood. I’m asking because the only way that you can get the above syntax error is if {{lead.Q2}} or other values are not being replaced by numbers.

For example, the following URL works just fine:
https://quickchart.io/chart/render/zm-bacd7fef-8151-4794-96d6-122868daf0af?data1=1,2,3,4

“Chart Error: unexpected token { in JSON at position 1” implies that the URL being loaded is literally “...data1={{lead.Q2}}...”. In other words, Marketo is not substituting the value.

ok, so would you recommend hosting the data outside Marketo and pulling it via the open API? If this is the case. How secure is the data when moving from excel to quick chart and to Marketo?

Any other solution you can think of?

Thank you

I think this is an issue with Marketo configuration, as the value is not being substituted. Probably the path of least resistance is to figure out how to substitute the value.

If you just print {{lead.Q2}} in the email in plaintext, what do you see? If you right click the image in the email and click “Copy image address”, what does the URL say?

Hi Ian, works when I use the Googlesheet video example #use-the-no-code-chart-api in Marketo. Therefore, I don’t believe the data can be stored in marketo.

If I want to personalise a graph based on the following data. How would you go about it?

The idea is to populate a graph for each name based on their data and send them the correct graph via Marketo.

Are you able to store numeric or string data on the customer directly in Marketo?