Untitled
unknown
plain_text
2 years ago
9.7 kB
11
Indexable
am5.ready(function () {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
//set the grid color the same as the background default color
root.interfaceColors.set("grid", am5.color(0xffffff));
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Dark.new(root)]);
// Set data
var data = fetch("../../../ETL/Data/ResultBigNumber.json")
.then((response) => response.json())
.then((json) => {
//console.log(json)
// Extract array of data objects
var data = json.OriginalETAvsActual;
console.log(data);
// var xaxis = Object.keys(data);
// console.log(xaxis)
// var yaxis = Object.values(data)
// console.log(yaxis)
//const jsonLength = xaxis.length;
const dataArray = Object.entries(data).map(([x, y]) => ({
x: Number(x),
y,
}));
var x = Object.keys(data).map((x) => ({ x: Number(x), y: data[x] }));
console.log(
"xxx",
);
//console.log(`The JSON file has a length of ${jsonLength}`);
console.log(dataArray);
// let positiveCount = 0;
// let negativeCount = 0;
// for (let i = 0; i < data.length; i++) {
// const value = data[i]["Original ETD vs Actual"];
// if (value >= 0) {
// positiveCount++;
// } else if (value < 0) {
// negativeCount++;
// }
// }
// let date1 = new Date(data[0]["ATA POL Date/Time"]);
// const first_date = date1.toLocaleDateString();
// // Display the formatted date
// // console.log(first_date);
// let date2 = new Date(data[data.length-1]["ATA POL Date/Time"]);
// const final_date = date2.toLocaleDateString();
// // Display the formatted date
// console.log(final_date);
// let date =first_date +" - " +final_date
// let text ="Original ETD vs Actual"
// //document.getElementById("separator").innerHTML=" "
// //toHTML.innerText = "first_date = " + first_date + ", final_date = " + final_date;
// // console.log(`Number of positive values: ${positiveCount}`);
// // console.log(`Number of negative values: ${negativeCount}`);
// let metric = (positiveCount/(positiveCount+negativeCount))*100
// // console.log(`The KPI is equal to : ${metric}`);
// let number = metric.toFixed(2)+"%";
// var labeldate = root.container.children.push(am5.Label.new(root, {
// text: date,
// fontSize: am5.percent(70),
// x: am5.percent(1),
// y: am5.percent(0),
// textAlign: "left",
// fill : am5.color("#808080"),
// //populateText: true
// }));
// var labeltext = root.container.children.push(am5.Label.new(root, {
// text: text,
// fontSize: am5.percent(150),
// x: am5.percent(2),
// y: am5.percent(7),
// textAlign: "left",
// fill : am5.color("#000000"),
// //populateText: true
// }));
// var labelnum = root.container.children.push(am5.Label.new(root, {
// text: number,
// fontSize: am5.percent(150),
// x: am5.percent(5),
// y: am5.percent(25),
// //paddingTop: 70,
// //paddingLeft: 60,
// textAlign: "left",
// fill : am5.color("#000000"),
// //populateText: true
// }));
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(
am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelY: "panX",
wheelY: "zoomX",
layout: root.verticalLayout,
})
);
// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
cursor.lineY.set("visible", false);
cursor.setAll({});
// Add scrollbar
// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
//chart.set(
//"scrollbarX",
//am5.Scrollbar.new(root, {
//orientation: "horizontal"
//})
//);
chart.zoomOutButton.set("forceHidden", true);
chart.get("colors").set("step", 2);
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
// var xAxis = chart.xAxes.push(
// am5xy.GaplessDateAxis.new(root, {
// //TimeUnit What time unit is used in data
// //count: number of timeunit
// // groupData: true,
// //groupInterval: { timeUnit: "month", count: 1 },
// baseInterval: { timeUnit: "day", count: 1 },
// renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 50 }),
// tooltip: am5.Tooltip.new(root, {}),
// })
// );
// var latitudeAxisRenderer = am5xy.AxisRendererY.new(root, {});
// latitudeAxisRenderer.grid.template.set("forceHidden", true);
// var latitudeAxis = chart.yAxes.push(
// am5xy.ValueAxis.new(root, {
// renderer: latitudeAxisRenderer,
// forceHidden: true,
// //tooltip: am5.Tooltip.new(root, {})
// })
// );
// var durationAxisRenderer = am5xy.AxisRendererY.new(root, {
// opposite: true,
// });
// durationAxisRenderer.grid.template.set("forceHidden", true);
// var durationAxis = chart.yAxes.push(
// am5xy.DurationAxis.new(root, {
// // baseUnit: "minute",
// renderer: durationAxisRenderer,
// // extraMax: 0.3
// })
// );
// // Create series
// // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
// var series_1 = chart.series.push(am5xy.ColumnSeries.new(root, {
// xAxis: xAxis,
// yAxis: distanceAxis,
// valueYField: "TEU",
// valueXField: "ATA POD Date/Time",
// sequencedInterpolation: true,
// fill: am5.color(0x078A9F),
// }));
// series_1.data.processor = am5.DataProcessor.new(root, {
// dateFields: ["ATA POL Date/Time"],
// //dateFormat: "MM/dd/yyyy kk:mm:ss a"
// dateFormat: "yyyy-MM-dd HH:mm:ss"
// });
var xAxis = chart.xAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererX.new(root, {}),
tooltip: am5.Tooltip.new(root, {}),
})
);
xAxis.children.moveValue(
am5.Label.new(root, {
text: "Average Transit Time",
x: am5.p50,
centerX: am5.p50,
}),
xAxis.children.length - 1
);
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {
inversed: false,
}),
tooltip: am5.Tooltip.new(root, {}),
})
);
yAxis.children.moveValue(
am5.Label.new(root, {
rotation: -90,
text: "Average ETD",
y: am5.p50,
centerX: am5.p50,
}),
0
);
var series_2 = chart.series.push(
am5xy.LineSeries.new(root, {
xAxis: xAxis,
yAxis: yAxis,
valueYField: "y",
valueXField: "x",
//valueYGrouped: "average",
//fill: am5.color(0x095256),
//stroke: am5.color(0x095256)
tooltip: am5.Tooltip.new(root, {
labelText: "Week:{valueX} \n Original ETA vs Actual: {valueY}",
}),
})
);
// series_2.data.processor = am5.DataProcessor.new(root, {
// dateFields: ["ATA POL Date/Time"],
// //dateFormat: "MM/dd/yyyy kk:mm:ss a"
// dateFormat: "yyyy-MM-dd HH:mm:ss"
// });
series_2.strokes.template.setAll({
//width of the stoke (line)
strokeWidth: 2.5,
//disable pointures
//strokeDasharray: [10,5]*
});
series_2.fills.template.set(
"fillGradient",
am5.LinearGradient.new(root, {
stops: [
{
opacity: 0.8,
},
{
//opacity: 0.2
},
],
})
);
series_2.fills.template.setAll({
visible: true,
//fillOpacity: 0.5
});
//let result = text.iframe("http://127.0.0.1:5500/Dashboard/Dashapps/Combo_chart/Combo_chart_1/index.html");
//document.getElementById("flex-container").innerHTML = result;
//document.getElementById("1").innerHTML=first_date +" - " +final_date
// xAxis.min = data[0].x;
// xAxis.max = data[data.length - 1].x;
//console.log(COSCOdata)
// Set x-axis and series data
//series_1.data.setAll(data)
// xAxis.min = Math.min(...Object.keys(data));
// xAxis.max = Math.max(...Object.keys(data));
series_2.data.setAll(
x
);
series_2.appear();
chart.appear();
//return COSCOdata;
});
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
}); // end am5.ready()
Editor is loading...