Adding Custom Google Charts to a Balloon

We have added features that integrate Google Charts with Datasets and Dataset records on Insight. This will help you make your Info Balloons more informative, colorful and eye-catching. We offer several customization options that you can set within the html template of your Balloon so that your chart will fit your needs.

Implementation

First, to add a chart you'll need to visualize a dataset. Click on the action menu and select 'Set Balloon Style'. Choose 'Custom template' from the drop down menu and navigate to the 'Edit Code' tab. You're now in the right place to add your first Google Chart.

Keep in mind that the parameters in the square brackets should be replaced by you (square brackets and all) within the template. [YOUR Y AXIS ATTRIBUTE] and [YOUR X AXIS ATTRIBUTE] are the names of attributes in your dataset that you want to display, you can find a list of these names at the top of each column when looking at your dataset's page.

Curly bracket parameters will be updated through assigning slots within your template designation.

Examples:

<img alt ="" src="/cbi/gchart/gchart?type=line&amp;uuid={Dataset UUID::Click here to configure this slot}&amp;y=[YOUR Y AXIS ATTRIBUTE]&amp;x=[YOUR X AXIS ATTRIBUTE]&amp;w=400&amp;h=300" />

Notice there is notation for "{Dataset UUID::Click here to configure this slot}". This will glue your dataset data to the chart. You'll need to navigate to the Configure Content tab after saving your template and fill this slot in. Just select "Set to dataset identifier" from the drop down menu and you're set.

Also, you will need to fill in your y and x attribue names. Just choose from the attributes in your dataset. Keep in mind that the y-axis must be numerical, or you will get an error.

Choosing a chart type

In addition to line graphs, you can also have bar charts or pie charts.

<img alt ="" src="/cbi/gchart/gchart?type=pie&amp;uuid={Dataset UUID::Click here to configure this slot}&amp;y=[YOUR Y AXIS ATTRIBUTE]&amp;x=[YOUR X AXIS ATTRIBUTE]&amp;w=400&amp;h=300" />

<img alt ="" src="/cbi/gchart/gchart?type=vbar&amp;uuid={Dataset UUID::Click here to configure this slot}&amp;y=[YOUR Y AXIS ATTRIBUTE]&amp;x=[YOUR X AXIS ATTRIBUTE]&amp;w=400&amp;h=300" />

Customizing Label Display

You might want to display a chart with labels for the first and last values, all values, or none at all.

<img alt ="" src="/cbi/gchart/gchart?type=pie&amp;uuid={Dataset UUID::Click here to configure this slot}&amp;y=[YOUR Y AXIS ATTRIBUTE]&amp;x=[YOUR X AXIS ATTRIBUTE]&amp;w=400&amp;h=300&label=all" />

<img alt ="" src="/cbi/gchart/gchart?type=pie&amp;uuid={Dataset UUID::Click here to configure this slot}&amp;y=[YOUR Y AXIS ATTRIBUTE]&amp;x=[YOUR X AXIS ATTRIBUTE]&amp;w=400&amp;h=300&label=none" />

Setting the size

The 'w' and 'h' parameters control the size of the image that will be displayed in the balloon. You can manipulate these values to get a chart that is the right size for your data.

<img alt ="" src="/cbi/gchart/gchart?type=pie&amp;uuid={Dataset UUID::Click here to configure this slot}&amp;y=[YOUR Y AXIS ATTRIBUTE]&amp;x=[YOUR X AXIS ATTRIBUTE]&amp;w=600&amp;h=350&label=all" />

Highlighting the current record

This parameter is handy for highlighting the current record in a chart. You'll need to set an additional parameter in the "Configure content" tab. Just select 'set to record identifier' so that the chart knows which piece of data to highlight.

<img alt ="" src="/cbi/gchart/gchart?type=pie&amp;uuid={Dataset UUID::Click here to configure this slot}&amp;y=[YOUR Y AXIS ATTRIBUTE]&amp;x=[YOUR X AXIS ATTRIBUTE]&amp;w=600&amp;h=350&marker={Record UUID::Click here to configure this slot}" />

Filtering Data

This feature will allow you to display data for certain elements equal to, greater than, or less than a value. Or, alternatively you can filter between two values. You'll need to set several parameters within your image declaration so that this will work properly. First the 'f_attr' parameter (short for 'filter attribute') should be set to the attribute that you want to filter by. It can be different from the x and y attribute. Next, f_type (short for filter type) can be set to how the attribute should be filtered. Your choices are gt (greater than), lt (less than), eq (equal to), btw (between). Lastly, there is f_param1 which supplies the threshold for filtering. Selecting 'btw' for the filter type will also require you to set an f_param2.

Before:

<img alt ="" src="/cbi/gchart/gchart?type=line&amp;uuid={Dataset UUID::Click here to configure this slot}&amp;y=[YOUR Y AXIS ATTRIBUTE]&amp;x=[YOUR X AXIS ATTRIBUTE]&amp;w=400&amp;h=300" />

After:

<img alt ="" src="/cbi/gchart/gchart?type=line&amp;uuid={Dataset UUID::Click here to configure this slot}&amp;y=[YOUR Y AXIS ATTRIBUTE]&amp;x=[YOUR X AXIS ATTRIBUTE]&amp;w=400&amp;h=300&amp;f_attr=[WHAT TO FILTER]&amp;f_type=[TYPE OF FILTERING]&amp;f_param1=[YOUR VALUE]" />