If you need a way to insert a chart in your documents, we've built a way for you to dynamically generate a chart image that can be embedded in your doc.
We have a Chart URL builder here: https://www.webmerge.me/images/chart
The settings are based off the popular HighCharts tool - visit their documentation for customization options.
For this example, we're going to show you how to customize the Chart URL to insert your chart data.
First, we're going to open up the chart builder and grab our Chart URL:
Next, we're going to take this URL and we're going to add our merge fields so that the chart is generated dynamically. In our merge data, we have an array/list of values for the chart inside $ChartData merge field. So our Chart URL now looks like this:
https://www.webmerge.me/images/chart?options[chart][width]=900&options[chart][height]=600&options[title][text]=Monthly+Average+Temperature&options[xAxis][categories][]=Jan&options[xAxis][categories][]=Feb&options[xAxis][categories][]=Mar&options[xAxis][categories][]=Apr&options[xAxis][categories][]=May&options[xAxis][categories][]=Jun&options[xAxis][categories][]=Jul&options[xAxis][categories][]=Aug&options[xAxis][categories][]=Sep&options[xAxis][categories][]=Oct&options[xAxis][categories][]=Nov&options[xAxis][categories][]=Dec&options[yAxis][title][text]=Temperature&options[legend][enabled]=true&options[series][0][name]=Tokyo&options[series][0][data][]={$ChartData[0]}&options[series][0][data][]={$ChartData[1]}&options[series][0][data][]={$ChartData[2]}&options[series][0][data][]={$ChartData[3]}&options[series][0][data][]={$ChartData[4]}&options[series][0][data][]={$ChartData[5]}&options[series][0][data][]={$ChartData[6]}&options[series][0][data][]={$ChartData[7]}&options[series][0][data][]={$ChartData[8]}&options[series][0][data][]={$ChartData[9]}&options[series][0][data][]={$ChartData[10]}&options[series][0][data][]={$ChartData[11]}
Once we have our URL built, we're going to setup our template to accept the image, and then use the Field Map to add the URL for the merge field we used in our image settings. In our template, we used an image tag like {$chart_image|insert_image:600:400}.
Once you have your Chart URL setup in the Field Map for your document, you're done with the setup process and you're ready to run a test!
18 Comments
Hi! Do you have a chart url builder for a column bar graph please? :)
Hi Dina,
Inside the "chart" definition in the JSON, you need to set - type: 'column'
Here's an example URL: https://www.webmerge.me/images/chart?options[chart][width]=900&options[chart][height]=600&options[chart][type]=column&options[title][text]=Monthly+Average+Temperature&options[subtitle][text]=Source%3A+WorldClimate.com&options[xAxis][categories][]=Jan&options[xAxis][categories][]=Feb&options[xAxis][categories][]=Mar&options[xAxis][categories][]=Apr&options[xAxis][categories][]=May&options[xAxis][categories][]=Jun&options[xAxis][categories][]=Jul&options[xAxis][categories][]=Aug&options[xAxis][categories][]=Sep&options[xAxis][categories][]=Oct&options[xAxis][categories][]=Nov&options[xAxis][categories][]=Dec&options[yAxis][title][text]=Temperature&options[yAxis][plotLines][0][value]=0&options[yAxis][plotLines][0][width]=1&options[yAxis][plotLines][0][color]=%23808080&options[tooltip][valueSuffix]=C&options[legend][enabled]=true&options[series][0][name]=Tokyo&options[series][0][data][]=7&options[series][0][data][]=6.9&options[series][0][data][]=9.5&options[series][0][data][]=14.5&options[series][0][data][]=18.2&options[series][0][data][]=21.5&options[series][0][data][]=25.2&options[series][0][data][]=26.5&options[series][0][data][]=23.3&options[series][0][data][]=18.3&options[series][0][data][]=13.9&options[series][0][data][]=9.6
Pasting the previous URL in a browser returns an Error message and no chart is generated. Shouldn't it work? I've also tried it in a FieldMap and it is not working either.
Thank you in advance :)
Oscar - try now for me! We fixed an issue on our end :)
Solved. Thank you!
Is it true that the chart URLs are bound to HTTP URL character limit of 2048 characters?
Hi Rakesh,
If you try to view the chart in your browser, you might hit that limit, but when it's used in your document, that limit does not cause an issue.
Thanks!
This is exactly what I was hoping to add into my document, but is it possible to do for a "gauge" type chart that Highchart uses? I was able to customize the JS on their site to get it looking how I wanted, but they don't have a URL generator there. I'm just looking to take a single variable (a score) and plot it on a gauge.
Hi Martin,
If you take the JSON settings from your setup on their website and use our URL generator (https://www.webmerge.me/images/chart), that should work. Have you tried that?
It did, thanks! I've got it all hooked up and it's looking great.
Can you show me the code for a pie chart. copying the JSON into your URL generator does not seem to work for me. I am specifically interested in creating a pie chart with a legend like this one: https://www.highcharts.com/demo/pie-legend.
Can you please help!
Hi Ulrik,
It doesn't look like the legend is on by default in a pie chart, you need to add "legend":{enabled: true} to the JSON. Here's a working example:
{
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
legend: {
enabled: true
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Other',
y: 7.05
}]
}]
}
Hi Jeremy, Is there a way to add series data from an array? I want to show a bar chart with monthly usage history.
"UsageHistory": [
{
"Month": "Jan",
"Year": "2018",
"Quantity": 31250
},
{
"Month": "Feb",
"Year": "2018",
"Quantity": 28040
}
]
Hi Sarah,
Yes, in your URL it would look something like this:
&options[series][0][data][]={$UsageHistory.0.Quantity}&options[series][0][data][]={$UsageHistory.1.Quantity}&options[series][0][data][]={$UsageHistory.2.Quantity}
To create this URL dynamically, we suggest using the Field Map and a loop like this in the Field Map:
https://www.webmerge.me/chart/rest-of-url&{foreach from=$UsageHistory item=_row}&options[series][0][data][]={$_row.Quantity}{/foreach}
I'm trying to generate fields that are not stored in an array and come from various merge variables. What is wrong with my syntax here:
https://www.webmerge.me/images/chart?options[chart][plotBackgroundColor]=&options[chart][plotBorderWidth]=&options[chart][plotShadow]=false&options[chart][type]=pie&options[legend][enabled]=true&options[title][text]=&options[tooltip][pointFormat]=%7Bseries.name%7D%3A%20%3Cb%3E%7Bpoint.percentage%3A.1f%7D%25%3C%2Fb%3E&options[plotOptions][pie][allowPointSelect]=true&options[plotOptions][pie][cursor]=pointer&options[plotOptions][pie][dataLabels][enabled]=true&options[plotOptions][pie][showInLegend]=true&options[series][0][name]=Brands&options[series][0][colorByPoint]=true&options[series][0][data][0][name]={$task1}&options[series][0][data][0][y]={$taskp1}&options[series][0][data][1][name]={$task2}&options[series][0][data][1][y]={taskp2}&options[series][0][data][2][name]={$task3}&options[series][0][data][2][y]={$taskp3}&options[series][0][data][3][name]={$task4}&options[series][0][data][3][y]={$taskp4}&options[series][0][data][4][name]={$task5}&options[series][0][data][4][y]={$taskp5}
Hi Darren,
Your syntax looks correct and when I replace your merge fields with actual values, it creates the chart correctly. Can you verify that we're receiving values for those merge fields (you can turn on Debug Mode to see the merge data we're receiving)
Thanks for the fast response - the document is presenting the variables in other parts of the document. I'm using the Test variable section and have the full link placed in there. The image is rendering just not the variables? Something wrong in my configuration? Thanks
All good - got it fixed! :-) Thank you!