Populating Highcharts chart with data received from MySQL
<p>I'm new to web programming and this thing here is for my bachelor's degree project. I am doing an electrical energy meter and I want to see the measured data between 2 dates I choose, data which is stored in a database. I managed to pass the data through AJAX from the form to the PHP file that reads the database and I successfully receive the JSON encoded data into my console log.</p>

<p>The problem is that the chart is not populated with any data, it only shows an awkward time range.</p>

<p>JavaScript - included in index.php, not *.js file</p>

<pre><code>$(document).ready(function() {

$('form.energy_consumption_datepicker').on('submit', function() {

    var that = $(this),
    url = that.attr('action'),
    type = that.attr('method'),
    data = {};

    that.find('[name]').each(function(index, value) {

    var that = $(this),
    name = that.attr('name'),
    value = that.val();

    data[name] = value;
    });

    $.ajax ({

        url: url,
        type: type,
        data: data,
        dataType: "json",
        success: function (response) {
            console.log(response);

            $(function() {
        $('#custom_energy_consumption_chart').highcharts({
            chart: {
                zoomType: 'x'
            },
            title: {
                text: 'Instantaneous absorbed power'
            },
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'kW'
                },
                labels: {
                    formatter: function() {
                        return this.value / 1000; // formatted number for kW
                    }
                }
            },

            credits: {
                enabled: false
            },
            tooltip: {
                pointFormat: '&lt;b&gt;{point.y} W &lt;/b&gt;'
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[3]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        enabled: true,
                        symbol: 'circle',
                        radius: 3,
                        states: {
                            hover: {
                                enabled: true
                            }
                        }
                    }
                }
            },
            series: [{
                color: '#00d5ff',
                type: 'area',
                name: 'Watts',
                data: response
            }]
        });

        });

        $(".custom_energy_consumption").show(350);

        }

    });
    return false;
});

});
</code></pre>

<p>index.php - parts</p>

<pre><code>    &lt;script src="../../js/highcharts.js"&gt;&lt;/script&gt;
    &lt;script src="../../js/highcharts-more.js"&gt;&lt;/script&gt;
    .
    .
    &lt;div class="energyConsumption" style="width: auto; height: 400px; margin: 80px auto auto 80px; display:none;"&gt;

        &lt;h3 align="left"&gt;Choose the period to display the energy consumption&lt;/h3&gt;

        &lt;form class="energy_consumption_datepicker" action="custom_chart.php" method="post"&gt;

            &lt;div class="input-control text" id="fromDatepicker"&gt;

                &lt;input name="fromDate" id="fromDatepicker_input" type="text" data-validate-func="date" data-validate-func="required" data-validate-hint="Please select a date" data-validate-hint-position="bottom"&gt;
                &lt;span class="input-state-error mif-warning"&gt;&lt;/span&gt;
                &lt;span class="input-state-success mif-checkmark"&gt;&lt;/span&gt;
                &lt;button class="button"&gt;&lt;span&gt;From&lt;/span&gt;&lt;/button&gt;

            &lt;/div&gt;

            &lt;div class="input-control text" id="toDatepicker"&gt;

                &lt;input name="toDate" id="toDatepicker_input" type="text" data-validate-func="date" data-validate-func="required" data-validate-hint="Please select a date" data-validate-hint-position="bottom"&gt;
                &lt;span class="input-state-error mif-warning"&gt;&lt;/span&gt;
                &lt;span class="input-state-success mif-checkmark"&gt;&lt;/span&gt;
                &lt;button class="button"&gt;&lt;span&gt;To&lt;/span&gt;&lt;/button&gt;

            &lt;/div&gt;

            &lt;input type="submit" class="button primary" value="Show"&gt;

        &lt;/form&gt;

        &lt;div class="custom_energy_consumption" id="custom_energy_consumption_chart" style="width: auto; height: 400px; margin: 50px auto; display:none"&gt;&lt;/div&gt;

    &lt;/div&gt;
</code></pre>

<p>custom_chart.php</p>

<pre><code>&lt;?php

    $fromDate = $_POST["fromDate"];
    $toDate = $_POST["toDate"];

    header('Content-Type: application/json');

    $servername = "localhost";
    .
    .
    $dbname = "smart_meter";

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

    $sql = "SELECT EXTRACT(year FROM date) 'year', EXTRACT(month FROM date)-1 'month', EXTRACT(day FROM date) 'day', EXTRACT(hour FROM date) 'hour', EXTRACT(minute FROM date) 'minute', energy FROM energy_data WHERE date BETWEEN '$fromDate' AND '$toDate'";
    $result = $conn-&gt;query($sql);

    if ($result-&gt;num_rows &gt; 0) {
        // output data of each row
        while($row = $result-&gt;fetch_assoc()) {
            $customPc[] = "[Date.UTC(" . $row["year"] . "," . $row["month"] . "," . $row["day"] . "," .  $row["hour"] . "," .  $row["minute"] . ")," . $row["energy"] . "]";
        }
    } else {
        echo 0;
    }
    $conn-&gt;close();

    echo json_encode(join($customPc, ','));

    ?&gt;
</code></pre>

<p>Data received in console log:</p>

<blockquote>
  <p>[Date.UTC(2016,2,8,14,35),1534],[Date.UTC(2016,2,8,14,35),1534],[Date.UTC(2016,2,8,14,35),1534],[Date.UTC(2016,2,8,14,35),1534],
  ...
  [Date.UTC(2016,2,9,18,18),1534],[Date.UTC(2016,2,9,18,18),1534],[Date.UTC(2016,2,9,18,19),1534],[Date.UTC(2016,2,9,18,19),1534]</p>
</blockquote>

<p>I replaced response in 'data: response' with the received data but writing 'data: [console data here]' and it works great.</p>

<p>Does anyone have an idea what might be happening here? Any suggestions would be helpful.</p>

<p>Thank you!</p>