Flexmonster Pivot Table & Charts seamlessly integrates with Highcharts — a software library for charting.
It is easy to open up new possibilities for smart business analytics and reporting with the Flexmonster JS pivot grid and Highcharts. Create a data dashboard — an essential tool for monitoring business objectives and performance.
On the dashboard, you can see all the vital metrics and KPIs at a glance. To look at your data from another perspective, you can slice and dice the data on the grid and display updated information in the charts.
const pivot = new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
height: 300,
licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
report: {
dataSource: {
type: "json",
filename: "https://cdn.flexmonster.com/data/demos/highcharts-demo-data.json",
},
slice: {
rows: [
{
uniqueName: "Date.Month",
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Requests",
aggregation: "sum",
},
{
uniqueName: "Answered Calls",
aggregation: "sum",
},
{
uniqueName: "Revenue",
aggregation: "sum",
format: "currency",
active: false
},
],
sorting: {
column: {
type: "desc",
tuple: [],
measure: {
uniqueName: "Answered Calls",
aggregation: "sum",
},
},
},
},
formats: [{
name: "",
thousandsSeparator: ","
},
{
name: "currency",
decimalSeparator: ".",
decimalPlaces: 2,
currencySymbol: "$",
}
],
options: {
showHeaders: false,
},
},
reportcomplete: function () {
pivot.off("reportcomplete");
setGlobalChartsOptions();
createLineChart();
createColumnChart();
createPieChart();
},
});
function setGlobalChartsOptions() {
Highcharts.setOptions({
colors: [
"#4cbf8b",
"#e8734c",
"#ffcd4c",
"#9875e3",
"#4c9eff",
"#8acfc3",
"#cd97e6",
"#f1d34c",
"#65d2e7",
],
lang: {
thousandsSep: ','
},
chart: {
plotBackgroundColor: "#fafafa",
backgroundColor: "#fafafa",
style: {
fontFamily: "Serif Typeface",
},
},
});
}
function createLineChart() {
pivot.highcharts.getData(
{
type: "line",
},
drawLineChart,
updateLineChart
);
}
function drawLineChart(chartData) {
chartData.xAxis.title.enabled = false;
chartData.xAxis.type = "datetime";
Highcharts.chart("highcharts-container", chartData);
}
function updateLineChart(chartData) {
drawLineChart(chartData);
}
function createColumnChart() {
pivot.highcharts.getData(
{
type: "column",
slice: {
rows: [
{
uniqueName: "Date.Month",
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Revenue",
aggregation: "sum",
},
{
uniqueName: "Support Cost",
aggregation: "sum",
},
],
},
},
drawColumnChart,
updateColumnChart
);
}
function drawColumnChart(chartData, rawData) {
let currencyFormat = rawData.meta.formats.find(format => format.name == "currency");
chartData.xAxis.title.enabled = false;
chartData.legend = {
enabled: false,
};
if (chartData.yAxis == undefined) chartData.yAxis = {};
for (let i = 0; i < chartData.yAxis.length; i++) {
chartData.yAxis[i].labels = {
format: pivot.highcharts.getAxisFormat(currencyFormat)
}
}
for (let i = 0; i < chartData.series.length; i++) {
chartData.series[i].tooltip = {
pointFormat: '{series.name}: <b>' + pivot.highcharts.getPointYFormat(currencyFormat) + '</b><br/>'
}
}
chartData.xAxis.type = "datetime";
Highcharts.chart("highcharts-column-container", chartData);
}
function updateColumnChart(chartData) {
// Here you can add your own logic for updating the chart
}
function createPieChart() {
pivot.highcharts.getData(
{
type: "pie",
slice: {
rows: [
{
uniqueName: "Customer Satisfaction",
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Answered Calls",
aggregation: "sum",
},
],
},
},
drawPieChart,
updatePieChart
);
}
function drawPieChart(chartData) {
Highcharts.chart("highcharts-pie-container", chartData);
}
function updatePieChart(chartData) {
// Here you can add your own logic for updating the chart
}
<div id="pivot-container"></div> <div class="demo-box"> <div class="demo-title">Requests vs Answered Calls</div> <div id="highcharts-container"></div> </div> <div class="demo-box"> <div class="demo-title">Revenue vs Support Cost</div> <div id="highcharts-column-container"></div> </div> <div class="demo-box"> <div class="demo-title">Customer Satisfaction</div> <div id="highcharts-pie-container"></div> </div>
.demo-box {
background-color: #fafafa;
position: relative;
padding: 40px 30px 30px 30px;
border: 1px solid #e9e9e9;
margin-bottom: 20px;
margin-top: 40px;
}
.demo-title {
font-size: 18px;
margin-bottom: 30px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #555;
}
Learn how to create a ready-to-use dashboard equipped with interactive features of the pivot table and charts by following the step-by-step Integration with Highcharts guide.