Online PHP editor | rfc for kQmE7

<?php // gráfico normal e invertido com vários gráficos function test_mysql_connection() { $servername = "sql10.freemysqlhosting.net"; $username = "sql10716406"; $password = "14hhtpmHk7"; $dbname = "sql10716406"; // Create connection $conn = new mysqli($servername, $username, $password, $dbname); function timestamp_to_formatted_datetime($timestamp_ms, $date_format = 'Y-m-d H:i:s') { $timestamp_s = $timestamp_ms / 1000; return date($date_format, $timestamp_s); } // Check connection if ($conn->connect_error) { return "Connection failed: " . $conn->connect_error; } else { // SQL query to retrieve data $sql = "SELECT * FROM cripto"; $result = $conn->query($sql); if ($result->num_rows > 0) { // Prepare an array to hold data for JavaScript $data_for_js = []; while ($row = $result->fetch_assoc()) { $klinebar = json_decode($row['klinebar'], true); $temp = []; // Process the klines data foreach ($klinebar as $kline) { $timestamp_ms = $kline[0]; $open_price = floatval($kline[1]); $high_price = floatval($kline[2]); $low_price = floatval($kline[3]); $close_price = floatval($kline[4]); // Convert timestamp $dt_object = timestamp_to_formatted_datetime($timestamp_ms); $temp[] = [ 'timestamp' => $dt_object, 'open' => $open_price, 'high' => $high_price, 'low' => $low_price, 'close' => $close_price, ]; } $data_for_js[] = $temp; } // Close connection $conn->close(); // Now, output the JavaScript for Plotly ob_start(); // Start buffering output ?> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> <table> <?php foreach ($data_for_js as $index => $data) { echo "<tr> <td><div id='chartDiv_$index'></div></td> <td><div id='invertedChartDiv_$index'></div></td> <td><div id='renkoChartDiv_$index'></div></td> </tr>"; ?> <script> document.addEventListener('DOMContentLoaded', function() { var data = <?php echo json_encode($data); ?>; var trace = { x: data.map(function(entry) { return entry.timestamp; }), open: data.map(function(entry) { return entry.open; }), high: data.map(function(entry) { return entry.high; }), low: data.map(function(entry) { return entry.low; }), close: data.map(function(entry) { return entry.close; }), // Customize colors increasing: {line: {color: 'black'}}, decreasing: {line: {color: 'red'}}, type: 'candlestick', }; var layout = { dragmode: 'zoom', showlegend: false, xaxis: { rangeslider: { visible: false } }, yaxis: { autorange: true, zeroline: false } }; Plotly.newPlot('chartDiv_<?php echo $index; ?>', [trace], layout); // Create the inverted chart data var invertedData = data.map(function(entry) { return { timestamp: entry.timestamp, open: entry.close, // swap open and close high: entry.low, // swap high and low low: entry.high, // swap high and low close: entry.open // swap open and close }; }); var invertedTrace = { x: invertedData.map(function(entry) { return entry.timestamp; }), open: invertedData.map(function(entry) { return entry.open; }), high: invertedData.map(function(entry) { return entry.high; }), low: invertedData.map(function(entry) { return entry.low; }), close: invertedData.map(function(entry) { return entry.close; }), // Customize colors increasing: {line: {color: 'black'}}, decreasing: {line: {color: 'red'}}, type: 'candlestick', }; Plotly.newPlot('invertedChartDiv_<?php echo $index; ?>', [invertedTrace], layout); //renko abaixo // Create the Renko chart var renkoData = [{ dataPoints: data.map(function(entry) { return {x: new Date(entry.timestamp), y: [entry.open, entry.high, entry.low, entry.close]}; }) }]; var renkoChart = new CanvasJS.Chart("renkoChartDiv_<?php echo $index; ?>", { title: { text: "Renko Chart", fontFamily: "times new roman" }, zoomEnabled: true, exportEnabled: true, axisY: { includeZero: false, title: "Prices", prefix: "$ " }, axisX: { tickLength: 0, labelFormatter: function(e) { return ""; } } }); renkoChart.options.data = renderRenko(50, renkoData); renkoChart.render(); function renderRenko(brickSize, data) { var newDataPoints = []; var oldValue = data[0].dataPoints[0].y[3]; var difference = 0; var newValue, dataPoint, xValue; for (var i = 1; i < data[0].dataPoints.length; i++) { dataPoint = data[0].dataPoints[i].y[3]; xValue = CanvasJS.formatDate(data[0].dataPoints[i].x, "MMM-YYYY"); difference = dataPoint - oldValue; if (difference > 0 && difference > brickSize) { for (var j = 0; j < Math.floor(difference / brickSize); j++) { newValue = oldValue + brickSize; newDataPoints.push({content: xValue, y: [oldValue, newValue], color: "#86B402"}); oldValue = newValue; } } else if (difference < 0 && Math.abs(difference) > brickSize) { for (var j = 0; j < Math.floor(Math.abs(difference) / brickSize); j++) { newValue = oldValue - brickSize; newDataPoints.push({content: xValue, y: [oldValue, newValue], color: "#C24642"}); oldValue = newValue; } } } var newData = [{ type: "rangeColumn", toolTipContent: "<b>{content}</b> <br> {y[0]} - {y[1]}", dataPoints: newDataPoints }]; return newData; } //renko acima }); </script> <?php } ?> </table> <?php return ob_get_clean(); // Return buffered output } else { $conn->close(); return "Update in progress. Refresh the page in 2 minutes"; } } } ?>

3v4l.org

Active branches

Archived branches