
<?php
//300 for 1 minut
//header("Refresh: 10;url='http://smart-dairyfarm.thehometown.in/show_mlx_gy_graph.php'");
require_once './Mobile_Api/connection.php';
?>

<html>
    <head>
        <!-- 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="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <style>
            body{
                /*background: #ccc;*/

            }

            #my-chart{
                /*background: #fff;*/
                /*padding: 20px;*/
            }

        </style>
    </head>
    <style>
        th{
            border-top: 1px solid black !important;
            border-bottom: 1px solid black !important;
        }
        label{
            color: darkblue;
            font-size: 15px;
        }
    </style>
    <div class="app-main__outer">
        <div class="app-main__inner" style="padding-top: 30px;padding-bottom: 0px;padding-left: 0px;padding-right: 30px !important">
            <div class="tab-content">
                <div class="tab-pane tabs-animation fade show active" id="tab-content-0" role="tabpanel">
                    <div class="tab-content">
                        <div class="tab-pane tabs-animation fade active show" id="tab-content-0" role="tabpanel">
                            <div class="main-card mb-3 card">
                                <!--                                <h5 class="card-title" style="float: none;text-align: center;margin-top: 10px">MLX_GY Sensor Detail</h5>
                                                                <div class="card-body" id="broket_div" tabindex="6" style="margin-bottom:80px">
                                                                    
                                                                </div>-->

                                <?php
                                $chartQuery = 'SELECT twts.id,twts.user_id,twts.water_ph_level,twts.water_tds_level,twts.comment,DATE_FORMAT(twts.created_date,"%d-%m-%Y %H:%i:%s") AS created_date,DATE_FORMAT(twts.created_date,"%Y-%m-%d") AS days_date,tsu.full_name,tsu.mobile_no,ts.school_name,tv.village,tv.village_hindi,tv.village_guj FROM `tbl_water_tank_status` as twts LEFT join tbl_school_user as tsu on twts.user_id=tsu.id left join tbl_school as ts on tsu.school_id=ts.id left join tbl_village as tv on ts.village_id=tv.id where twts.flag=1 and twts.user_id=1 order by twts.id DESC limit 0,6';
//echo '$chartQuery ' . $chartQuery;
                                $chartQueryRecords = mysqli_query($con, $chartQuery);
//print_r($chartQueryRecords);
                                $data1 = "";
                                while ($row = mysqli_fetch_assoc($chartQueryRecords)) {
                                    $data1 .= "['" . $row['days_date'] . "'," . $row['water_ph_level'] . "," . $row['water_tds_level'] . "],";
                                }
//print_r($data1);
                                ?>

                                <h3 style="text-align:center"> Graphical View </h3>
                                <div id="my-chart" style="width: 900px; height: 500px;"></div>

                                <script type="text/javascript">
//
//
//                                    alert('Hello');
//
                                    google.charts.load('current', {
                                        'packages': ['corechart'],
                                        'mapsApiKey': ''   // her eyou can put you google map key
                                    });
                                    google.charts.setOnLoadCallback(drawRegionsMap);


                                    function drawRegionsMap() {
                                        var data = google.visualization.arrayToDataTable([
                                            ['Time', 'pH Level', 'Tds Level'],
                                            <?php echo $data1; ?>
                                        ]);

                                        var options = {

                                        };

                                        var options = {
                                            title: 'Water Level Status',
                                            curveType: 'function',
                                            legend: {position: 'bottom'}
                                        };

                                        var chart = new google.visualization.LineChart(document.getElementById('my-chart'));
                                        chart.draw(data, options);
                                    }


                                </script>




                                <div id="chart_div" style="width: 900px; height: 500px;"></div>
                                <script type="text/javascript">
                                    google.charts.load('current', {'packages': ['corechart']});
                                    google.charts.setOnLoadCallback(drawVisualization);

                                    function drawVisualization() {
                                        // Some raw data (not necessarily accurate)
                                        var data = google.visualization.arrayToDataTable([
                                            ['Date', 'ph Level', 'Tds Level'],

                                            <?php echo $data1; ?>
                                        ]);

                                        var options = {
                                            title: 'Water Level Status',
                                            vAxis: {title: 'Level'},
                                            hAxis: {title: 'Days'},
                                            seriesType: 'bars',
                                            series: {2: {type: 'line'}}
                                        };

                                        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
                                        chart.draw(data, options);
                                    }
                                </script>

                                </head>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</html>

