Untitled
unknown
plain_text
a year ago
9.3 kB
1
Indexable
Never
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 }));
//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 distanceAxisRenderer = am5xy.AxisRendererY.new(root, {});
// distanceAxisRenderer.grid.template.set("forceHidden", true);
// var distanceAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
// renderer: distanceAxisRenderer,
// //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 series_2 = chart.series.push(am5xy.LineSeries.new(root, {
xAxis: xAxis,
yAxis: latitudeAxis,
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(Object.keys(data).map(x => ({ x: Number(x), y: data[x] })));
series_2.appear();
chart.appear();
//return COSCOdata;
});
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
}); // end am5.ready()