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!
7 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!