<template>
<div ref="Barchart" style="width: 500px; height: 500px"></div>
</template>
<script>
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
import axios from "axios";
export default {
name: "Barchart",
data() {
return {
chartData: [],
};
},
mounted() {
this.getIncorrectRate();
},
methods: {
getIncorrectRate() {
const vm = this;
axios({
url: "dashboard/incorrectRateData.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
std_id: "1",
},
})
.then(function (res) {
console.log("Inccorect Rate - response : ", res.data);
vm.chartData = res.data;
// console.log(vm.chartData);
vm.createChart();
})
.catch(function (error) {
console.log("Incorrect Rate - error : ", error);
});
},
createChart() {
// Initialize root
const root = am5.Root.new(this.$refs.Barchart);
// Apply themes
const myTheme = am5.Theme.new(root);
myTheme.rule("Grid", ["base"]).setAll({
strokeOpacity: 0.1,
});
root.setThemes([am5themes_Animated.new(root), myTheme]);
// Create chart
let chart = root.container.children.push(
am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "none",
wheelY: "none",
paddingLeft: 0,
})
);
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
let yRenderer = am5xy.AxisRendererY.new(root, {
minGridDistance: 30,
minorGridEnabled: true,
});
yRenderer.grid.template.set("location", 1);
let yAxis = chart.yAxes.push(
am5xy.CategoryAxis.new(root, {
maxDeviation: 0,
categoryField: "bookNm",
renderer: yRenderer,
})
);
let xAxis = chart.xAxes.push(
am5xy.ValueAxis.new(root, {
maxDeviation: 0,
min: 0,
renderer: am5xy.AxisRendererX.new(root, {
visible: true,
strokeOpacity: 0.1,
minGridDistance: 80,
}),
})
);
// Create series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
let series = chart.series.push(
am5xy.ColumnSeries.new(root, {
name: "Incorrect Rate",
xAxis: xAxis,
yAxis: yAxis,
valueXField: "incorrectRate",
sequencedInterpolation: true,
categoryYField: "bookNm",
})
);
let columnTemplate = series.columns.template;
columnTemplate.setAll({
draggable: true,
cursorOverStyle: "pointer",
tooltipText: "{categoryY}: {valueX}",
cornerRadiusBR: 10,
cornerRadiusTR: 10,
strokeOpacity: 0,
});
columnTemplate.adapters.add("fill", (fill, target) => {
return chart
.get("colors")
.getIndex(series.columns.indexOf(target));
});
columnTemplate.adapters.add("stroke", (stroke, target) => {
return chart
.get("colors")
.getIndex(series.columns.indexOf(target));
});
columnTemplate.events.on("dragstop", () => {
this.sortCategoryAxis(series, yAxis, yRenderer);
});
// Get series item by category
// function getSeriesItem(category) {
// for (var i = 0; i < series.dataItems.length; i++) {
// let dataItem = series.dataItems[i];
// if (dataItem.get("categoryY") == category) {
// return dataItem;
// }
// }
// }
// Axis sorting
// function sortCategoryAxis() {
// // Sort by value
// series.dataItems.sort(function (x, y) {
// return y.get("graphics").y() - x.get("graphics").y();
// });
// let easing = am5.ease.out(am5.ease.cubic);
// // Go through each axis item
// am5.array.each(yAxis.dataItems, function (dataItem) {
// // get corresponding series item
// let seriesDataItem = getSeriesItem(
// dataItem.get("category")
// );
// if (seriesDataItem) {
// // get index of series data item
// let index = series.dataItems.indexOf(seriesDataItem);
// let column = seriesDataItem.get("graphics");
// // position after sorting
// let fy =
// yRenderer.positionToCoordinate(
// yAxis.indexToPosition(index)
// ) -
// column.height() / 2;
// // set index to be the same as series data item index
// if (index != dataItem.get("index")) {
// dataItem.set("index", index);
// // current position
// let x = column.x();
// let y = column.y();
// column.set("dy", -(fy - y));
// column.set("dx", x);
// column.animate({
// key: "dy",
// to: 0,
// duration: 600,
// easing: easing,
// });
// column.animate({
// key: "dx",
// to: 0,
// duration: 600,
// easing: easing,
// });
// } else {
// column.animate({
// key: "y",
// to: fy,
// duration: 600,
// easing: easing,
// });
// column.animate({
// key: "x",
// to: 0,
// duration: 600,
// easing: easing,
// });
// }
// }
// });
// Sort axis items by index.
// This changes the order instantly, but as dx and dy is set and animated,
// they keep in the same places and then animate to true positions.
// yAxis.dataItems.sort(function (x, y) {
// return x.get("index") - y.get("index");
// });
// }
// Set data
// let data = [
// {
// country: "USA",
// value: 2025,
// },
// {
// country: "China",
// value: 1882,
// },
// {
// country: "Japan",
// value: 1809,
// },
// {
// country: "Germany",
// value: 1322,
// },
// {
// country: "UK",
// value: 1122,
// },
// ];
// yAxis.data.setAll(data);
// series.data.setAll(data);
yAxis.data.setAll(this.chartData);
series.data.setAll(this.chartData);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear(1000);
chart.appear(1000, 100);
},
sortCategoryAxis(series, yAxis, yRenderer) {
// Sort by value
series.dataItems.sort((x, y) => {
return y.get("graphics").y() - x.get("graphics").y();
});
let easing = am5.ease.out(am5.ease.cubic);
// Go through each axis item
am5.array.each(yAxis.dataItems, function (dataItem) {
// get corresponding series item
let seriesDataItem = series.dataItems.find(
(dataItem) =>
dataItem.get("categoryY") == dataItem.get("category")
);
if (seriesDataItem) {
// get index of series data item
let index = series.dataItems.indexOf(seriesDataItem);
let column = seriesDataItem.get("graphics");
// position after sorting
let fy =
yRenderer.positionToCoordinate(
yAxis.indexToPosition(index)
) -
column.height() / 2;
// set index to be the same as series data item index
if (index != dataItem.get("index")) {
dataItem.set("index", index);
// current position
let x = column.x();
let y = column.y();
column.set("dy", -(fy - y));
column.set("dx", x);
column.animate({
key: "dy",
to: 0,
duration: 600,
easing: easing,
});
column.animate({
key: "dx",
to: 0,
duration: 600,
easing: easing,
});
} else {
column.animate({
key: "y",
to: fy,
duration: 600,
easing: easing,
});
column.animate({
key: "x",
to: 0,
duration: 600,
easing: easing,
});
}
}
});
yAxis.dataItems.sort((x, y) => {
return x.get("index") - y.get("index");
});
},
},
};
</script>
<style scoped>
/* Add necessary styles here */
</style>