Flexmonster Pivot Table & Charts seamlessly integrates with FusionCharts — a data visualization library that offers modern interactive charts.
A web-based dashboard created with Flexmonster and FusionCharts is a self-service analytics tool that can speed up decision-making within any department.
It is possible to tailor the dashboard based on the business logic and provide visual clarity into metrics and KPIs.
const pivot = new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
height: 440,
licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
report: {
dataSource: {
type: "json",
filename: "https://cdn.flexmonster.com/data/demos/fusioncharts-demo-data.json",
},
slice: {
rows: [
{
uniqueName: "Country",
},
],
columns: [
{
uniqueName: "Traffic",
},
{
uniqueName: "Source",
},
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Revenue",
formula: 'sum("Sales") * sum("Purchase Cost")',
individual: true,
caption: "Revenue",
format: "currency",
},
{
uniqueName: "Conversion Rate",
formula: 'sum("Leads") / sum("Clicks") ',
individual: true,
caption: "Conversion Rate",
active: false,
},
],
sorting: {
column: {
type: "desc",
tuple: ["Traffic.[Referral]"],
measure: {
uniqueName: "Revenue",
aggregation: "none",
},
},
},
expands: {
rows: [],
columns: [
{
tuple: ["Traffic.[Organic]"],
},
{
tuple: ["Traffic.[Paid]"],
},
],
},
},
options: {
grid: {
showHeaders: false,
},
},
formats: [{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 2,
}, {
name: "currency",
currencySymbol: "$",
}],
},
reportcomplete: () => {
pivot.off("reportcomplete");
createMapChart();
createDoughnutChart();
createColumnChart();
},
});
let mapChart, doughnutChart, columnChart;
const backgroundColor = "#fafafa",
baseFontSize = "15",
baseFontColor = "#888",
chartPalette = "4cbf8b, ffcd4c, e8734c, 9875e3, 4c9eff, 8acfc3, cd97e6, f1d34c, 65d2e7";
function createMapChart() {
mapChart = new FusionCharts({
type: "maps/worldwithcountries",
renderAt: "fusionmap-container",
width: "100%",
height: 400,
dataFormat: "json",
});
pivot.fusioncharts.getData(
{
type: "maps/" + mapChart.chartType(),
},
(chartConfig) => {
drawMap(chartConfig);
mapChart.render();
},
drawMap
);
}
function drawMap(chartConfig) {
chartConfig.chart.theme = "fusion";
chartConfig.chart.showLabels = "0";
chartConfig.chart.bgColor = backgroundColor;
chartConfig.chart.entityBorderColor = backgroundColor;
chartConfig.chart.entityBorderThickness = "1";
chartConfig.chart.entityFillHoverColor = "#d00000";
chartConfig.chart.nullEntityColor = "#bbbbbb";
chartConfig.chart.nullEntityAlpha = "50";
chartConfig.chart.hoverOnNull = "0";
chartConfig.chart.legendPosition = "top";
chartConfig.colorrange = {
minvalue: chartConfig.extradata.minValue,
code: "#8acfc3",
gradient: "1",
color: [
{
minvalue: chartConfig.extradata.minValue,
maxvalue: 250000,
code: "#4cbf8b",
},
{
minvalue: 250000,
maxvalue: 400000,
code: "#ffcd4c",
},
{
minvalue: 400000,
maxvalue: 550000,
code: "#faa307",
},
{
minvalue: 550000,
maxvalue: 700000,
code: "#f48c06",
},
{
minvalue: 700000,
maxvalue: chartConfig.extradata.maxValue,
code: "#e85d04",
},
],
};
delete chartConfig.extradata;
mapChart.setJSONData(chartConfig);
}
function createDoughnutChart() {
doughnutChart = new FusionCharts({
type: "doughnut2d",
renderAt: "fusionchart-container",
width: "100%",
height: 450,
dataFormat: "json",
});
pivot.fusioncharts.getData(
{
type: doughnutChart.chartType(),
slice: {
rows: [
{
uniqueName: "Source",
filter: {
exclude: ["LinkedIn", "Medium", "Bing"],
},
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Users",
aggregation: "sum",
},
],
},
},
(chartConfig) => {
drawDoughnut(chartConfig);
doughnutChart.render();
},
drawDoughnut
);
}
function drawDoughnut(chartConfig) {
chartConfig.chart.theme = "fusion";
chartConfig.chart.baseFontSize = baseFontSize;
chartConfig.chart.baseFontColor = baseFontColor;
chartConfig.chart.bgColor = backgroundColor;
chartConfig.chart.palettecolors = chartPalette;
chartConfig.chart.startingAngle = "-110";
chartConfig.chart.showLegend = "0";
chartConfig.chart.smartLineColor = baseFontColor;
chartConfig.chart.smartLineAlpha = "60";
chartConfig.chart.labelFontColor = baseFontColor;
chartConfig.chart.labelFontSize = baseFontSize;
chartConfig.chart.plotToolText = "Source: $label
Users: $dataValue";
chartConfig.data[2].isSliced = "1";
chartConfig.chart.enableMultiSlicing = "0";
doughnutChart.setJSONData(chartConfig);
}
function createColumnChart() {
columnChart = new FusionCharts({
type: "mscolumn2d",
renderAt: "fusioncolumn-container",
width: "100%",
height: 450,
});
pivot.fusioncharts.getData(
{
type: columnChart.chartType(),
slice: {
rows: [
{
uniqueName: "Date.Month",
},
],
columns: [
{
uniqueName: "Traffic",
},
],
measures: [
{
uniqueName: "Sales",
aggregation: "sum",
format: "currency"
},
],
},
},
(chartConfig, rawData) => {
drawColumn(chartConfig, rawData);
columnChart.render();
},
drawColumn
);
}
function drawColumn(chartConfig, rawData) {
chartConfig.chart.theme = "fusion";
chartConfig.chart.baseFontSize = baseFontSize;
chartConfig.chart.baseFontColor = baseFontColor;
chartConfig.chart.bgColor = backgroundColor;
chartConfig.chart.palettecolors = chartPalette;
chartConfig.chart.xAxisName = undefined;
chartConfig.chart.yAxisName = undefined;
chartConfig.chart.plotFillHoverAlpha = "90";
chartConfig.chart.plotToolText = "Traffic type: $seriesname
Month: $label
Revenue: $dataValue";
chartConfig.chart.legendPosition = "right";
chartConfig.chart.plotHighlightEffect = "fadeout|alpha=20";
chartConfig.chart.legendCaption = "Traffic type";
chartConfig.chart.legendCaptionBold = "1";
chartConfig.chart.legendCaptionFontSize = "13";
chartConfig.chart.legendCaptionFontColor = baseFontColor;
chartConfig.chart.legendIconScale = "1.2";
chartConfig.chart.legendIconSides = "500";
chartConfig.chart.legendItemFontSize = baseFontSize;
chartConfig.chart.legendItemFontColor = baseFontColor;
chartConfig.chart.adjustDiv = "0";
chartConfig.chart.yAxisMaxvalue = "35000";
chartConfig.chart.yAxisMinValue = "0";
chartConfig.chart.numDivLines = "4";
chartConfig.chart.formatNumberScale = "0";
let format = pivot.fusioncharts.getNumberFormat(rawData.meta.formats[0]);
for (let prop in format) {
columnChart[prop] = format[prop];
}
columnChart.setJSONData(chartConfig);
}
<div id="pivot-container"></div> <div class="demo-box"> <div class="demo-title">Top Countries by Revenue</div> <div id="fusionmap-container"></div> </div> <div class="demo-box"> <div class="demo-title">Top Traffic Sources</div> <div id="fusionchart-container"></div> </div> <div class="demo-box"> <div class="demo-title">Revenue per Month</div> <div id="fusioncolumn-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;
line-height: 24px;
color: #555;
}
Read our Integration with FusionCharts guide to learn how to design the dashboard with Flexmonster and FusionCharts and add it to your app with minimum lines of code.
The integration process is based on the usage of the Сonnector for FusionCharts that establishes real-time communication between the pivot table and charts. The principle of the dashboard’s work is simple: Flexmonster takes raw data, summarizes it, and sends it for further data visualization to the charts.