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.


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 id="chart-example">
<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>
</div>
<script>
requirejs(['d3', 'dimple'], function (d3, dimple) {
var svg = dimple.newSvg("#opp-stages-pie", 590, 290);
const data = angular.element($("#chart-example")).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?