Flexmonster Pivot Table & Charts seamlessly integrates with Google Charts — a web service for data visualization. Using these tools together, you can create a well-designed interactive dashboard and embed it into any application.
Dashboard analytics is a perfect instrument for making data-driven decisions. With its help, end-users can highlight specific metrics, answer complex business questions, and communicate insights to the audience.
Dashboards with Flexmonster and Google Charts can be interactive: changes applied to the pivot table's report are reflected on charts in an instant. Thankfully to this real-time behavior, end-users can look at the data from different angles on the fly.
const pivot = new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
height: 350,
licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
report: {
dataSource: {
type: "json",
filename: "https://cdn.flexmonster.com/data/demos/googlecharts-demo-data.json",
},
slice: {
rows: [
{
uniqueName: "Date.Month",
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Income",
formula: 'sum("Sales") * sum("Unit Price")',
individual: true,
caption: "Income",
format: "currency",
},
{
uniqueName: "Sales",
active: false,
format: "currency",
},
{
uniqueName: "Expenses",
format: "currency",
},
{
uniqueName: "Profit",
formula: 'sum("Income") - sum("Expenses")',
individual: true,
сaption: "Profit",
format: "currency",
},
],
},
formats: [
{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 2,
},
{
name: "currency",
currencySymbol: "$",
},
],
options: {
grid: {
showHeaders: false,
},
showAggregationLabels: false,
},
},
reportcomplete: function () {
pivot.off("reportcomplete");
pivotTableReportComplete = true;
createColumnChart();
createPieChart();
},
});
const colors = [
"#4cbf8b",
"#e8734c",
"#ffcd4c",
"#9875e3",
"#4c9eff",
"#8acfc3",
"#cd97e6",
"#f1d34c",
"#65d2e7",
];
let pivotTableReportComplete = false;
let googleChartsLoaded = false;
google.charts.load("current", {
packages: ["corechart", "bar"],
});
google.charts.setOnLoadCallback(onGoogleChartsLoaded);
function onGoogleChartsLoaded() {
googleChartsLoaded = true;
if (pivotTableReportComplete) {
createColumnChart();
createPieChart();
}
}
function createColumnChart() {
if (googleChartsLoaded) {
pivot.googlecharts.getData(
{
type: "column",
},
drawColumnChart,
drawColumnChart
);
}
}
function drawColumnChart(_data) {
let data = google.visualization.arrayToDataTable(_data.data);
let formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: "$",
});
for (let i = 0; i < data.getNumberOfColumns(); i++) {
if (data.getColumnType(i) === "number") {
formatter.format(data, i);
}
}
let options = {
fontName: "SERIF TYPEFACE",
chartArea: {
height: "100%",
},
height: 300,
colors: colors,
};
const columnChartContainer = document.getElementById("googlechart-column-container");
let chart = new google.charts.Bar(columnChartContainer);
chart.draw(data, options);
}
function createPieChart() {
if (googleChartsLoaded) {
pivot.googlecharts.getData(
{
type: "pie",
slice: {
rows: [
{
uniqueName: "Country",
filter: {
measure: {
uniqueName: "Sales",
},
query: {
top: 5,
},
},
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Sales",
},
],
},
},
drawPieChart,
drawPieChart
);
}
}
function drawPieChart(_data) {
let data = google.visualization.arrayToDataTable(_data.data);
let options = {
legend: {
position: "bottom",
},
height: 300,
pieSliceText: "none", // Remove text from pie slices
pieHole: 0.35,
chartArea: {
height: "85%",
top: 0,
},
pieSliceBorderColor: "none",
colors: colors,
};
const pieChartContainer = document.getElementById("googlechart-pie-container");
let chart = new google.visualization.PieChart(pieChartContainer);
chart.draw(data, options);
}
<div id="pivot-container"></div> <div class="demo-box"> <div class="demo-title">Income, Expenses, and Profit</div> <div id="googlechart-column-container"></div> </div> <div class="demo-box"> <div class="demo-title">Top 5 Countries by Sales</div> <div id="googlechart-pie-container"></div> </div>
.demo-box {
background-color: #fafafa;
position: relative;
padding: 20px 20px 20px 20px;
border: 1px solid #e9e9e9;
margin-bottom: 20px;
}
.demo-title {
font-size: 18px;
margin-bottom: 30px;
white-space: nowrap;
text-overflow: ellipsis;
color: #555;
}
#pivot-container {
margin-bottom: 20px;
}
/** For the background color of Google Charts
* (for material design charts, it can't be changed via options, only via CSS)
*/
#googlechart-column-container > div > div > svg > g:nth-child(2) > rect:nth-child(1) {
fill: #fafafa !important;
}
#googlechart-pie-container > div > div:nth-child(1) > div > svg > rect {
fill: #fafafa !important;
}
/* For text on xAxis of the column chart */
#googlechart-column-container > div > div > svg > g:nth-child(6) > text:nth-child(10) {
color: #555;
fill: rgb(117, 117, 117);
font-family: Roboto;
font-size: 12px;
}
#googlechart-pie-container > div > div:nth-child(n) > div > svg > g:nth-child(n) > g:nth-child(n) > g > text {
color: #555;
fill: rgb(117, 117, 117);
font-family: Roboto;
font-size: 12px;
}
With our Integration with Google Charts guide, you can learn how to configure a dashboard with Flexmonster and Google Charts.
The entire process is straightforward: add the pivot table and charts to the web page and make both components communicate via the specially prepared Connector for Google Charts.