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>
- Is it a good idea to add UTC timestamp for API authentication
- What is an API token
- Nginx prepends response data with post request body content from its' buffer?
- Swap two key/value pairs in an array
- view path not found
- What does the & sign before the parameter name of a function do?
- Getting an accurrate Results from Personality Test
- How can I call method of entity in a repository querybuilder
- Inserting and updating records from 3 tables in laravel
- Column Update in Unit Test Not Reflected
- ORM issue - UNDEFINED PROPERTY
- FormComponent - Pass Entity with Form to Template
- How to use Accessor as a condition in Laravel?
- I have defined relatioships in models but how can i write complex queries in Eloquent way
- Laravel 5.6 - Using model functions in ModelFactory
- Magento products from attribute
- Ext js Grid with PHP no data output
- User timezones issue in Laravel
- Laravel validate array values contained in list
- withoutGlobalScope is not working in relation hasMany in Laravel Model
- Convert a flat associative array into a two-column 2d array with predefined column names
- How to install php-redis extension using the official PHP Docker image approach?
- Service unavailable. The service is temporarily unavailable. Please try again later
- How to destroy the session cookie correctly with PHP?
- Route 404 in laravel11. Is there any rule to prioritize route in web.php
- Recognizing the last iteration of @foreach in Laravel Blade
- Add an element to each row of an array of associative arrays
- Facebook PHP SDK getSession() fails to get session. Cookie problem?
- How to run both Microsoft IIS and WAMP on the same PC via localhost
- How can I easily switch between PHP versions on Mac OSX?