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 to assist in 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 in charts in an instant. Thankfully to this real-time behavior, end-users can look at the data from different angles on the fly.
var pivot = new Flexmonster({ container: "#pivot-container", componentFolder: "https://cdn.flexmonster.com/", licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key", width: "100%", height: 350, toolbar: true, report: { "dataSource": { "type": "json", "filename": "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, "caption": "Profit", "format": "currency" } ] }, "formats": [{ "name": "", "maxDecimalPlaces": 2 }, { "name": "currency", "decimalPlaces": 1, "currencySymbol": "$" } ], "options": { "grid": { "showHeaders": false }, "showAggregationLabels": false } }, reportcomplete: function() { pivot.off("reportcomplete"); pivotTableReportComplete = true; createGoogleChart(); createPieChart(); } }); var pivotTableReportComplete = false; var googleChartsLoaded = false; google.charts.load('current', { 'packages': ['corechart', 'bar'] }); google.charts.setOnLoadCallback(onGoogleChartsLoaded); function onGoogleChartsLoaded() { googleChartsLoaded = true; if (pivotTableReportComplete) { createGoogleChart(); createPieChart(); } } function createGoogleChart() { if (googleChartsLoaded) { pivot.googlecharts.getData({ type: "column" }, drawChart, drawChart ); } } function drawChart(_data) { var data = google.visualization.arrayToDataTable(_data.data); var formatter = new google.visualization.NumberFormat({ fractionDigits: 2, prefix: '$' }); formatter.format(data, 1); formatter.format(data, 2); formatter.format(data, 3); var options = { fontName: 'SERIF TYPEFACE', chartArea: { height: '100%' }, height: 300, colors: ["#00a45a", "#df3800", "#6d3bd8", "#ffb800", "#0075ff", "#db0069", "#ffb800", "#00c2ff"], titleTextStyle: { fontName: "SERIF TYPEFACE", italic: false, fontSize: 18 } }; var chart = new google.charts.Bar(document.getElementById('googlechart-container-1')); 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) { var data = google.visualization.arrayToDataTable(_data.data); var options = { legend: { position: 'bottom' }, height: 300, pieSliceText: 'none', // remove text from pie slices pieHole: 0.35, chartArea: { height: '85%', top: 0 }, pieSliceBorderColor: "none", colors: ["#00a45a", "#df3800", "#6d3bd8", "#ffb800", "#0075ff", "#db0069", "#ffb800", "#00c2ff"] }; var pieChartContainer = document.getElementById('googlechart-container-2'); var chart = new google.visualization.PieChart(pieChartContainer); chart.draw(data, options); }
<div id="pivot-container" style="margin-bottom:50px;"></div> <h2> Income, Expenses, and Profit </h2> <div id="googlechart-container-1" style="height:350px; margin-bottom:50px;"></div> <h2> Top 5 Countries by Sales </h2> <div id="googlechart-container-2" style="height:350px;"></div>
@import url('https://fonts.googleapis.com/css?family=Poppins'); h2 { position: relative; font-style: normal; font-weight: normal; color: #000; left: 10px; bottom: 11px; }
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 charting connector.