let chart = am4core.create("chartdiv", am4charts.XYChart);
chart.paddingRight = 20;
let data = {};
let data1 = [];
let data2 = [];
x = getData();
//--- modified subscribe code ---
clearingsSell = x.filter(f => f.direction === "Sell");
clearingsBuy = x.filter(f => f.direction === "Buy");
//store everything into an object with the date as the key
for (let i = 1; i < clearingsSell.length; i++) {
for (let j = 0; j < 24; j++) {
let date = new Date(2019, 0, i, j).setHours(j);
data[date] = {
date: date,
value1: clearingsSell[i].profilesData[j].price
}
}
}
for (let i = 1; i < clearingsBuy.length; i++) {
for (let j = 0; j < 24; j++) {
let date = new Date(2019, 0, i, j).setHours(j);
if (data[date] === undefined) {
data[date] = {date: date};
}
data[date].value2 = clearingsBuy[i].profilesData[j].price
}
}
//convert grouped data into array, iterating by date
chart.data = Object.keys(data).map(function(date) {
return data[date];
});
// --- end modified subscribe code --
chart.dateFormatter.inputDateFormat = "YY-MM-DD HH";
const dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 90;
dateAxis.startLocation = 0.5;
dateAxis.endLocation = 0.5;
const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
const series = chart.series.push(new am4charts.StepLineSeries());
series.dataFields.dateX = "date";
series.name = "Sell Vol.";
series.dataFields.valueY = "value1";
series.tooltipText = "[#000]{valueY.value}[/]";
series.tooltip.background.fill = am4core.color("#FFF");
series.tooltip.getStrokeFromObject = true;
series.tooltip.background.strokeWidth = 3;
series.tooltip.getFillFromObject = false;
series.fillOpacity = 0.6;
series.strokeWidth = 2;
series.stacked = true;
const series2 = chart.series.push(new am4charts.StepLineSeries());
series2.name = "Buy Vol.";
series2.dataFields.dateX = "date";
series2.dataFields.valueY = "value2";
series2.tooltipText = "[#000]{valueY.value}[/]";
series2.tooltip.background.fill = am4core.color("#FFF");
series2.tooltip.getFillFromObject = false;
series2.tooltip.getStrokeFromObject = true;
series2.tooltip.background.strokeWidth = 3;
series2.sequencedInterpolation = true;
series2.fillOpacity = 0.6;
series2.stacked = true;
series2.strokeWidth = 2;
// Add scrollbar
chart.scrollbarX = new am4charts.XYChartScrollbar();
// Add cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
chart.cursor.snapToSeries = series;
// Add a legend
chart.legend = new am4charts.Legend();
chart.legend.position = "top";
function getData() {
return [
{
direction: "Buy",
profilesData: [
{
price: 14
},
{
price: 12
},
{
price: 16
},
{
price: 13
},
{
price: 10
},
{
price: 10
},
{
price: 18
},
{
price: 13
},
{
price: 17
},
{
price: 12
},
{
price: 18
},
{
price: 10
},
{
price: 10
},
{
price: 17
},
{
price: 17
},
{
price: 20
},
{
price: 13
},
{
price: 17
},
{
price: 13
},
{
price: 12
},
{
price: 16
},
{
price: 16
},
{
price: 13
},
{
price: 11
}
]
},
{
direction: "Buy",
profilesData: [
{
price: 14
},
{
price: 15
},
{
price: 13
},
{
price: 14
},
{
price: 18
},
{
price: 10
},
{
price: 10
},
{
price: 18
},
{
price: 17
},
{
price: 15
},
{
price: 17
},
{
price: 19
},
{
price: 12
},
{
price: 20
},
{
price: 11
},
{
price: 16
},
{
price: 17
},
{
price: 15
},
{
price: 13
},
{
price: 10
},
{
price: 18
},
{
price: 10
},
{
price: 19
},
{
price: 14
}
]
},
{
direction: "Sell",
profilesData: [
{
price: 13
},
{
price: 11
},
{
price: 12
},
{
price: 6
},
{
price: 8
},
{
price: 9
},
{
price: 13
},
{
price: 15
},
{
price: 13
},
{
price: 11
},
{
price: 12
},
{
price: 7
},
{
price: 8
},
{
price: 10
},
{
price: 6
},
{
price: 5
},
{
price: 5
},
{
price: 7
},
{
price: 10
},
{
price: 13
},
{
price: 10
},
{
price: 5
},
{
price: 5
},
{
price: 6
}
]
},
{
direction: "Sell",
profilesData: [
{
price: 11
},
{
price: 7
},
{
price: 5
},
{
price: 12
},
{
price: 7
},
{
price: 5
},
{
price: 13
},
{
price: 6
},
{
price: 12
},
{
price: 11
},
{
price: 11
},
{
price: 10
},
{
price: 5
},
{
price: 12
},
{
price: 10
},
{
price: 7
},
{
price: 7
},
{
price: 7
},
{
price: 14
},
{
price: 14
},
{
price: 11
},
{
price: 12
},
{
price: 13
},
{
price: 8
}
]
}
];
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 450px;
}
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
