Overview

Gtmhub supports a number of charting libraries, and you can find the markup for them in the HTML snippets section in the bottom of the SQL editor. This example uses dimple.

This example displays the distribution of Sales opportunities based on their status in a pie chart.

LIMITATIONS: If you use visualizations, you cannot use the resulting insights to create a dynamic key result, because you do not use the <metric> directive.


Prerequisites

To create this example, you must have first created the insight in Example: Create an insight with metrics, because this example is based on it


Write the SQL query

The SQL editor, enter the following query:

SELECT SUM(sale_rev) as stage_amount, sale_stage
FROM sales_monthly
WHERE lower(sale_stage) <> 'lost'
GROUP BY sale_stage

Define the user interface

Use the stage_amount field from the insight response and, in the HTML editor, enter the following:

<div class="title-xlg">Monthly revenue</div>
<div class="subtle-text mb-4 bb pb-4">
Total amount of opportunities in each pipeline
</div>
<!-- Chart container -->
<div id="opp-stages-pie"></div>
<script>
requirejs(['d3', 'dimple'], function (d3, dimple) {
var svg = dimple.newSvg("#opp-stages-pie", 590, 290);
var data = angular.element($("#opp-stages-pie")).scope().data.default;
var stagesChart = new dimple.chart(svg, data);
stagesChart.setBounds(10, 20, 260, 280)
stagesChart.addMeasureAxis("p", "stage_amount");
stagesChart.addSeries("sale_stage", dimple.plot.pie);
stagesChart.addLegend(300, 20, 90, 300, "left");
stagesChart.draw();
})
</script>

Result

To preview the insight, click Execute.

The following appears:

Did this answer your question?