Untitled

<html>
	<head>
	<meta charset="utf-8">
	<title>Mereni teplot</title>
		<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
  <?php
	$servername = "localhost";
	$username = "root";
	$password = "";
	$dbname = "thermometer";

	// Create connection
	$conn = new mysqli($servername, $username, $password, $dbname);
	// Check connection
	if ($conn->connect_error) {
		die("Connection failed: " . $conn->connect_error);
	}

	$sql = "SELECT id, celsius, fahrenheit,TIME_FORMAT( time, '%Y-%m-%d %H:%i') AS timei,(SELECT COUNT(*) FROM temp_log ) AS CountPhp   FROM temp_log";
	$result = $conn->query($sql);
	?>
						<script>
						var chartData = generateChartData();
var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "marginRight": 80,
    "autoMarginOffset": 20,
    "marginTop": 7,
    "dataProvider": chartData,
    "valueAxes": [{
        "axisAlpha": 0.2,
        "dashLength": 1,
        "position": "left"
    }],
    "mouseWheelZoomEnabled": true,
    "graphs": [{
        "id": "g1",
        "balloonText": "[[value]]",
        "bullet": "round",
        "bulletBorderAlpha": 1,
        "bulletColor": "#FFFFFF",
        "hideBulletsCount": 50,
        "title": "red line",
        "valueField": "visits",
        "useLineColorForBulletBorder": true,
        "balloon":{
            "drop":true
        }
    }],
    "chartScrollbar": {
        "autoGridCount": false,
        "graph": "g1",
        "scrollbarHeight": 40
    },
    "chartCursor": {
       "limitToGraph":"g1"
    },
    "categoryField": "date",
    "categoryAxis": {
        "parseDates": true,
        "axisColor": "#DADADA",
        "dashLength": 1,
        "minorGridEnabled": true
    },
    "export": {
        "enabled": true
    }
});

chart.addListener("rendered", zoomChart);
zoomChart();

// this method is called when chart is first inited as we listen for "rendered" event
function zoomChart() {
    // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
    chart.zoomToIndexes(chartData.length - 40, chartData.length - 1);
}


// generate some random data, quite different range
function generateChartData() {
    var chartData = [];
  <?php
	while($row = $result->fetch_assoc()) {
		echo  "var newDate = new Date();";
		echo "newDate.setDate(".$row["timei"].");";
		echo  $row["id"]. $row["celsius"]. $row["fahrenheit"]  ;

    for (var i = 0; i < 5; i++) {
        // we create date objects here. In your data, you can have date strings
        // and then set format of your dates using chart.dataDateFormat property,
        // however when possible, use date objects, as this will speed up chart rendering.
        var newDate = new Date();
        newDate.setDate(newDate.getDate());

        var visits = Math.round(Math.random() * (40 + i / 5)) + 20 + i;

        chartData.push({
            date: newDate,
            visits: visits
        });
    }
		}
  ?>
    return chartData;
}
</script>
  <?php
	while($row = $result->fetch_assoc()) {
		echo  "var newDate = new Date();";
		echo "newDate.setDate(".$row["timei"].");";
		echo  $row["id"]. $row["celsius"]. $row["fahrenheit"]  ;
	}
  ?>
  <?php
  $conn->close();
  ?>
<style>
#chartdiv {
	width	: 100%;
	height	: 500px;
}
</style>
	</head>
	<body>
	<div id="chartdiv"></div>
	</body>
</html>