Google Charts Integration
This snippet will show you how to integrate Google Charts into Tadabase apps.
Example:
Data Table
Chart result
Step 1
Under settings > custom footer add below script tag
<script src=“https://www.gstatic.com/charts/loader.js 3”>
Step 2
Add datatable to page, add fields which you will be using for charts. Add CSS class to your table “snip-table-hide” to hide your table from UI.
Step 3
In CSS tab hide the table using css
.snip-table-hide {
display: none;
}
.snippet-chart{
width: 100%;
max-width: 100%;
max-height: 345px;
display: block;
box-sizing: border-box;
height: 345px;
padding: 10px;
box-shadow: 0 0px 2px 0 rgb(0 0 0 / 16%), 0 2px 3px 0 rgb(0 0 0 / 12%) !important;
background: #fff;
border-radius: 7px;
}
Step 4
Create a HTML component where you want to add charts. click on “<>” in custom editor and add below
<div id=“columnchart_material” class=“snippet-chart”>
Step 5
Add below JS code (change component and field accordingly)
Example from: “https://developers.google.com/chart/interactive/docs/gallery/columnchart#creating-material-column-charts 6”
(function() {
let dataArr = []; // your data for chart
TB.render('component_20', function(data) {
dataArr = [];
dataArr.push(['Year', 'Sales', 'Expenses', 'Profit']);
// loop though the data.
data.records.forEach(item => {
dataArr.push([item.field_164, parseInt(item.field_165), parseInt(item.field_166), parseInt(item.field_167)]);
});
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawChart);
});
function drawChart() {
let data = google.visualization.arrayToDataTable(dataArr);
let options = {
chart: {
title: 'Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2021',
},
is3D: true
};
let chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
})()
Original Community Post:
https://community.tadabase.io/t/google-charts-integration/1501