JSFiddle - React, Tailwind, and code Playground
by Flexmonster Pivot Table
HTML
<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://cdn.flexmonster.com/lib/flexmonster.fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/3.19.0/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/3.19.0/themes/fusioncharts.theme.fusion.js"></script>
<div id="pivot-container"></div>
<div id="fusionchart-container"></div>
CSS
#fusionchart-container {
margin: 20px;
}
JavaScript
let pivot = new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
height: 400,
report: {
dataSource: {
filename: "data/data.csv"
},
slice: {
rows: [{
uniqueName: "Country"
}],
columns: [{
uniqueName: "Business Type"
},
{
uniqueName: "[Measures]"
}
],
measures: [{
uniqueName: "Price"
}]
}
},
toolbar: true,
reportcomplete: function() {
pivot.off("reportcomplete");
createFusionChart();
}
});
let chart;
function createFusionChart() {
chart = new FusionCharts({
type: "column2d",
renderAt: "fusionchart-container",
width: "100%",
height: 500
});
pivot.fusioncharts.getData({
type: chart.chartType()
}, drawChart, updateChart);
}
function drawChart(chartConfig, rawData) {
chartConfig.trendlines = [{
line: [{
startvalue: rawData.data[1].v0,
endValue: rawData.data[6].v0,
color: "#29C3BE",
displayvalue: "Trendline",
valueOnRight: "1",
dashed: "1",
thickness: "2"
}]
}]
chart.setJSONData(chartConfig);
chart.setChartAttribute("theme", "fusion");
chart.render();
}
function updateChart(chartData, rawData) {
chart.dispose();
drawChart(chartData, rawData);
}