Add Dynamic Charts

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!