Creating dynamic charts for different date ranges using amchart 5
I am trying to create daily, weekly, monthly, quarterly, 6-monthly, yearly and 5-year Candlestick & OHLC charts for Dollar, Euro and Gold using amchart 5.
All data is saved in my own database.
In AmChart 5 samples, I wanted to create my chart by going through the codes in the example of the chart that will be created to receive data from outside.
You can find the relevant example at this link: https://www.amcharts.com/demos/on-demand-data-loading/
First of all, I wrote my php function that will pull the desired data from the entered date range and table. File name is data.php. You can see it below.
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
chartit();
function chartit()
{
/**
* Veri Tabanı Bağlantısı
*/
$host = "localhost";
$dbname = "dbname";
$dbuser = "root";
$dbpass = "";
try {
$db = new PDO('mysql:host='.$host.';dbname='.$dbname.';charset=utf8',$dbuser,$dbpass);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING);
} catch ( PDOException $e ){
print $e->getMessage();
}
$table = $_GET['unit'];
$startdate = $_GET['start'];
$enddate = $_GET['end'];
//$enddate = date('Y-m-d');
$sqlString = "SELECT * FROM ".$table." WHERE timestamp BETWEEN :startdate AND :enddate";
$query = $db->prepare($sqlString);
$query->execute(['startdate' => $startdate, 'enddate' => $enddate]);
$news_sql = $query->fetchAll(PDO::FETCH_ASSOC);
foreach($news_sql as $list) {
$item[] = [
'date' => intval($list["timestamp"]),
'open' => intval($list["open"]),
'high' => intval($list["high"]),
'low' => intval($list["low"]),
'close' => intval($list["close"]),
];
}
echo json_encode($item);
}
Then I wrote the relevant javascript codes for the area where the graph will be displayed. You can also see it below.
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<style> #chartdiv { width: 100%; height: 500px; max-width: 100%; } #tools { padding: 0.3em 1em; text-align: left; max-width: 100%; } #tools input.active { font-weight: bold; } </style>
<script>
am5.ready(function () {
var currentDate = new Date();
var currentUnit = "altinveri";
var root = am5.Root.new("chartdiv");
root.setThemes([
am5themes_Animated.new(root)
]);
var chart = root.container.children.push(am5xy.XYChart.new(root, {
focusable: true,
panX: true,
panY: true,
wheelX: "panX",
wheelY: "zoomX",
layout: root.verticalLayout,
pinchZoomX: true
}));
chart.get("colors").set("step", 2);
var valueAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {})
}));
var dateAxis = chart.xAxes.push(am5xy.GaplessDateAxis.new(root, {
maxDeviation: 0,
baseInterval: {
timeUnit: "day",
count: 15
},
gridIntervals: [{
timeUnit: "week",
count: 1
}],
renderer: am5xy.AxisRendererX.new(root, {
minGridDistance: 20
}),
}));
var color = root.interfaceColors.get("background");
var valueSeries = chart.series.push(
am5xy.CandlestickSeries.new(root, {
name: "Series",
xAxis: dateAxis,
yAxis: valueAxis,
openValueYField: "open",
highValueYField: "high",
lowValueYField: "low",
valueYField: "close",
valueXField: "date",
tooltip: am5.Tooltip.new(root, {})
})
);
var valueTooltip = valueSeries.get("tooltip").label.set("text",
"[bold]{valueX.formatDate()}[/]\nAçılış: {openValueY}\nEn Yüksek: {highValueY}\nEn Düşük: {lowValueY}\nKapanış: {valueY}"
);
chart.set("cursor", am5xy.XYCursor.new(root, {}))
var scrollbar = chart.set("scrollbarX", am5xy.XYChartScrollbar.new(root, {
orientation: "horizontal",
height: 50
}));
var sbDateAxis = scrollbar.chart.xAxes.push(am5xy.GaplessDateAxis.new(root, {
baseInterval: {
timeUnit: "day",
count: 1
},
renderer: am5xy.AxisRendererX.new(root, {})
}));
var sbValueAxis = scrollbar.chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {})
})
);
function loadData(unit, min, max, side) {
var url = "http://localhost/chart/data.php?unit=" + unit + "&start=" + min + "&end=" + max;
am5.net.load(url).then(function (result) {
var data = result.response;
//console.log(result.response);
var processor = am5.DataProcessor.new(root, {
numericFields: ["date", "open", "high", "low", "close"]
});
processor.processMany(data);
var start = dateAxis.get("start");
var end = dateAxis.get("end");
// will hold first/last dates of each series
var seriesFirst = {};
var seriesLast = {};
// Set data
// change base interval if it's different
// if (dateAxis.get("baseInterval").timeUnit != unit) {
// dateAxis.set("baseInterval", {
// timeUnit: hour,
// count: 15
// });
// sbDateAxis.set("baseInterval", {
// timeUnit: hour,
// count: 15
// });
// }
dateAxis.set("min", min);
dateAxis.set("max", max);
dateAxis.setPrivate("min", min); // needed in order not to animate
dateAxis.setPrivate("max", max); // needed in order not to animate
valueSeries.data.setAll(data);
//sbSeries.data.setAll(data);
dateAxis.zoom(0, 1, 0);
});
}
function loadSomeData() {
loadData('altinveri', currentDate.getTime() - am5.time.getDuration("day", 90), currentDate.getTime(), "none");
}
// Button handlers
var activeButton = document.getElementById("btn_d");
document.getElementById("btn_h").addEventListener("click", function () {
if (currentUnit != "hour") {
setActiveButton(this);
currentUnit = "hour";
loadData("altinveri", dateAxis.getPrivate("selectionMin"), dateAxis.getPrivate("selectionMax"), "none");
}
})
document.getElementById("btn_d").addEventListener("click", function () {
if (currentUnit != "altinveri") {
setActiveButton(this);
currentUnit = "altinveri";
loadData('altinveri', currentDate.getTime() - am5.time.getDuration("day", 90), currentDate.getTime(), "none");
}
})
document.getElementById("btn_m").addEventListener("click", function () {
if (currentUnit != "month") {
setActiveButton(this);
currentUnit = "month";
loadData("altinveri", dateAxis.getPrivate("selectionMin"), dateAxis.getPrivate("selectionMax"), "none");
}
})
function setActiveButton(button) {
if (activeButton) {
activeButton.className = "";
}
activeButton = button;
button.className = "active";
}
// load data when panning ends
chart.events.on("panended", function () {
loadSomeData();
});
var wheelTimeout;
chart.events.on("wheelended", function () {
if (wheelTimeout) {
wheelTimeout.dispose();
}
wheelTimeout = chart.setTimeout(function () {
loadSomeData();
}, 50);
});
// load some initial data
loadData("altinveri", currentDate.getTime() - am5.time.getDuration("day", 90), currentDate.getTime(),"none");
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
chart.appear(1000, 500);
}); // end am5.ready()
</script>
<div id="tools">
<input type="button" value="1 hour" id="btn_h">
<input type="button" value="90 day" id="btn_d" class="active">
<input type="button" value="1 month" id="btn_m">
</div>
<div id="chartdiv"></div>
According to the entered url, my data content is coming. I can see this. I also see the content when I do console.log. But for some reason it doesn't generate graphics with data content.
If I manually type the data content in the loadData function right after the line am5.net.load(url).then(function (result) { the graph is created..
var data = [{"date":1669755600000,"open":1048,"high":1060,"low":1045,"close":1060},{"date":1669842000000,"open":1060,"high":1080,"low":1057,"close":1080},{"date":1669928400000,"open":1080,"high":1082,"low":1065,"close":1077},{"date":1670187600000,"open":1076,"high":1084,"low":1058,"close":1058},{"date":1670274000000,"open":1058,"high":1067,"low":1058,"close":1061},{"date":1670360400000,"open":1061,"high":1073,"low":1059,"close":1070},{"date":1670446800000,"open":1070,"high":1075,"low":1067,"close":1071},{"date":1670533200000,"open":1072,"high":1082,"low":1071,"close":1075},{"date":1670792400000,"open":1074,"high":1078,"low":1063,"close":1066},{"date":1670878800000,"open":1066,"high":1093,"low":1063,"close":1085},{"date":1670965200000,"open":1085,"high":1086,"low":1075,"close":1081},{"date":1671051600000,"open":1081,"high":1084,"low":1061,"close":1065},{"date":1671138000000,"open":1065,"high":1076,"low":1063,"close":1074},{"date":1671397200000,"open":1074,"high":1078,"low":1069,"close":1071},{"date":1671483600000,"open":1071,"high":1092,"low":1069,"close":1090},{"date":1671570000000,"open":1090,"high":1094,"low":1086,"close":1088},{"date":1671656400000,"open":1088,"high":1092,"low":1071,"close":1075},{"date":1671742800000,"open":1075,"high":1083,"low":1072,"close":1079},{"date":1672002000000,"open":1078,"high":1087,"low":1076,"close":1079},{"date":1672088400000,"open":1079,"high":1108,"low":1076,"close":1088},{"date":1672174800000,"open":1088,"high":1095,"low":1081,"close":1085},{"date":1672261200000,"open":1085,"high":1094,"low":1083,"close":1091},{"date":1672347600000,"open":1091,"high":1098,"low":1088,"close":1096},{"date":1672606800000,"open":1096,"high":1103,"low":1093,"close":1097},{"date":1672693200000,"open":1097,"high":1114,"low":1093,"close":1106},{"date":1672779600000,"open":1106,"high":1124,"low":1105,"close":1118},{"date":1672866000000,"open":1118,"high":1120,"low":1101,"close":1105},{"date":1672952400000,"open":1105,"high":1127,"low":1104,"close":1122},{"date":1673211600000,"open":1124,"high":1139,"low":1124,"close":1129},{"date":1673298000000,"open":1129,"high":1135,"low":1120,"close":1133},{"date":1673384400000,"open":1133,"high":1140,"low":1127,"close":1132},{"date":1673470800000,"open":1132,"high":1148,"low":1129,"close":1146},{"date":1673557200000,"open":1146,"high":1161,"low":1142,"close":1159},{"date":1673816400000,"open":1159,"high":1165,"low":1154,"close":1158},{"date":1673902800000,"open":1158,"high":1160,"low":1147,"close":1152},{"date":1673989200000,"open":1152,"high":1163,"low":1145,"close":1150},{"date":1674075600000,"open":1151,"high":1169,"low":1147,"close":1168},{"date":1674162000000,"open":1168,"high":1171,"low":1161,"close":1165},{"date":1674421200000,"open":1164,"high":1171,"low":1155,"close":1167},{"date":1674507600000,"open":1168,"high":1174,"low":1159,"close":1171},{"date":1674594000000,"open":1171,"high":1177,"low":1161,"close":1176},{"date":1674680400000,"open":1176,"high":1178,"low":1159,"close":1166},{"date":1674766800000,"open":1166,"high":1170,"low":1159,"close":1164},{"date":1675026000000,"open":1164,"high":1171,"low":1160,"close":1161},{"date":1675112400000,"open":1161,"high":1172,"low":1149,"close":1166},{"date":1675198800000,"open":1166,"high":1181,"low":1161,"close":1181},{"date":1675285200000,"open":1181,"high":1185,"low":1154,"close":1156},{"date":1675371600000,"open":1156,"high":1160,"low":1125,"close":1128},{"date":1675630800000,"open":1127,"high":1139,"low":1126,"close":1131},{"date":1675717200000,"open":1131,"high":1140,"low":1129,"close":1132},{"date":1675803600000,"open":1132,"high":1142,"low":1130,"close":1135},{"date":1675890000000,"open":1135,"high":1144,"low":1125,"close":1126},{"date":1675976400000,"open":1126,"high":1133,"low":1121,"close":1128},{"date":1676235600000,"open":1128,"high":1130,"low":1121,"close":1123},{"date":1676322000000,"open":1123,"high":1133,"low":1116,"close":1124},{"date":1676408400000,"open":1124,"high":1135,"low":1109,"close":1113},{"date":1676494800000,"open":1113,"high":1118,"low":1107,"close":1112},{"date":1676581200000,"open":1113,"high":1118,"low":1103,"close":1117}];
Screenshot of the resulting graph
Why does the graph not occur? Why can't I process the incoming data?
Solution
I changed my javascript codes like this. First of all added.
<script src="https://cdn.amcharts.com/lib/5/stock.js"></script>
And it works.
<script>
am5.ready(function() {
var root = am5.Root.new("chartdiv");
root.setThemes([am5themes_Animated.new(root)]);
var stockChart = root.container.children.push(am5stock.StockChart.new(root, {}));
//root.numberFormatter.set("numberFormat", "#,###.0000");
var mainPanel = stockChart.panels.push(am5stock.StockPanel.new(root, {
wheelY: "zoomX",
height: am5.percent(70),
layout: root.verticalLayout,
panX: true,
panY: true
}));
var valueAxis = mainPanel.yAxes.push(am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {
pan: "zoom"
}),
tooltip: am5.Tooltip.new(root, {}),
//numberFormat: "#,###.00",
extraTooltipPrecision: 2,
visible: true
}));
var dateAxis = mainPanel.xAxes.push(am5xy.GaplessDateAxis.new(root, {
groupData: true,
groupCount:150,
baseInterval: {
timeUnit: "day",
count: 1
},
renderer: am5xy.AxisRendererX.new(root, {}),
tooltip: am5.Tooltip.new(root, {})
}));
var color = root.interfaceColors.get("background");
var valueSeries = mainPanel.series.push(am5xy.CandlestickSeries.new(root, {
clustered: false,
fill: color,
calculateAggregates: true,
stroke: color,
xAxis: dateAxis,
yAxis: valueAxis,
valueXField: "date",
valueYField: "close",
highValueYField: "high",
lowValueYField: "low",
openValueYField: "open",
tooltip: am5.Tooltip.new(root, {
labelText: "[bold]{valueX.formatDate()}\nAçılış: {openValueY}\nEn Düşük: {lowValueY}\nEn Yüksek: {highValueY}\nKapanış: {valueY}"
})
}));
stockChart.set("stockSeries", valueSeries);
mainPanel.set("cursor", am5xy.XYCursor.new(root, {
yAxis: valueAxis,
xAxis: dateAxis,
snapToSeries: [valueSeries],
snapToSeriesBy: "y!"
}));
function loadChartData(json_file_url) {
am5.net.load(json_file_url).then(function(result) {
var data = am5.JSONParser.parse(result.response);
am5.array.each(data, function(item) {
var processor = am5.DataProcessor.new(root, {
numericFields: ["date", "open", "high", "low", "close"]
});
processor.processMany(data);
valueSeries.data.setAll(data);
});
console.log(data);
}).catch(function(result) {
console.log("Error loadChartData");
});
}
loadChartData("data.json");
var toolbar = am5stock.StockToolbar.new(root, {
container: document.getElementById("chartcontrols"),
stockChart: stockChart,
controls: [
am5stock.PeriodSelector.new(root, {
stockChart: stockChart
}),
am5stock.ResetControl.new(root, {
stockChart: stockChart
})
]
})
});
</script>
- How/when mysql compiles stored procedures?
- Search a 2d array by one column value and return another value from the qualifying row
- Search a multidimensional array by one column value and return another value from the qualifying row
- Get element value from a 2d array row which qualifies because of another column value
- Can I use array_search() to find a whole-row match in a 2d array?
- How to secure my login page
- Symfony 2: How to get route defaults by route name?
- php - find if an array contains an element
- Doctrine entity object to array
- Get URL to a Sulu page by content id
- Determine if an associative array of strings or arrays is equal to another array with the same structure
- PHP How to determine the first and last iteration in a foreach loop?
- Disable Undefined Property error in PHP Devsense extension on VSCode
- Fill the ACF field who modified the user profile
- How to Integrate 3rd party API in Wordpress
- Coverting a .BAK file into a .SQL for use in XAMPP phpmyadmin
- Add product thumbnails to Woocommerce admin orders list, only if product still exists
- Merge two 2d arrays, group by one column and sum another column within each group
- PHP json_decode multiple arrays or array in array to database
- laravel try/catch doesn't work for a failed query
- Return the first level key when a column value is found in a 2d array
- Find key of parent in array / PHP
- Find parent key of match in a multidimensional array
- Recursively search a multidimensional array for the parent key of a matched key or value
- Find a parent key in a 2d array
- Get first level key in a 2d array of the first row with a specified value in any element
- Removing currency symbol, except on Woocommerce cart and checkout pages
- How to display course list in moodle form?
- Multiple Image Upload PHP form with one input
- How to remove "Shipping" label from Woocommerce Email notifications?