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:

The settings are based on 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:[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 set up 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!

Was this article helpful?
1 out of 1 found this helpful



Please sign in to leave a comment.