<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CANDLESTICK CHART</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="<?php echo base_url().'assets/apexcharts.min.js';?>"></script>

<script>
		$(document).ready(function(){
			//console.log(new Date(1619408557036))
            var options = {
                chart: {
                    height: 250,
                    type: 'candlestick',
                },
                series: [{
			    <?php  ///$total=$this->db->get_where("jsondata",array("metal_type"=>$this->uri->segment(3),"ddate"=>date("Y-m-d")))->num_rows();
				//$offset=$total-20;
				$this->db->limit(15);
				$this->db->order_by("dataid","desc");
				$data=$this->db->get_where("jsondata",array("metal_type"=>$this->uri->segment(3),"ddate"=>date("Y-m-d")))->result_array();
				$data2=array_reverse($data);
				?>
                        data: [<?php foreach($data2 as $d){?>{
                                x: new Date(<?php echo $d['dtime2'];?>),
                                y: [<?php echo $d['data2'];?>]
                            },<?php }?>
                        ]
                    }],
                title: {
                    text: 'CandleStick Chart',
                    align: 'left'
                },
                xaxis: {
                    type: 'datetime'
                },
                yaxis: {
                    tooltip: {
                        enabled: true
                    }
                }
            }

            var chart = new ApexCharts(
                    document.querySelector("#apexCandlestickCharts"),
                    options
                    );

            chart.render();
		});
</script>
<body>
   <div id="apexCandlestickCharts"></div>
</body>
</html>