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>
widget().on('ready', function(evt, angularScope) {
requirejs(['d3', 'dimple'], function (d3, dimple) {
var svg = dimple.newSvg("#opp-stages-pie", 590, 290);
const data = angularScope.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:
