Alex _TNT
Alex _TNT

Reputation: 319

Chart Date Bug because of JS month interval 0-11

The script sums download data by day from mysql and displays it as a chart, But as far as I understand the JS(highcharts) month interval is from 0 to 11 insead of what PHP outputs 1-12, making the current month May -> June(UTC 2015, 05), 31 June does not exist and causing a visual bug having both data from 31 May and 1 June, The data is there but does not show.

[Date.UTC(2015, 05, 31), 4],
[Date.UTC(2015, 06, 01), 8],

enter image description here

I'm trying to fix the date offset.

Offsetting the date by one month will cause the php to query data from April (because UTC month 04 = May ) and also causing 31 May(UTC format 2015, 04, 31) to be 1 June(UTC format 2015, 05, 01)

[Date.UTC(2015, 04, 25), 3],
[Date.UTC(2015, 04, 26), 4],
[Date.UTC(2015, 04, 27), 8],
[Date.UTC(2015, 04, 28), 9],
[Date.UTC(2015, 04, 29), 5],
[Date.UTC(2015, 04, 30), 8],
[Date.UTC(2015, 05, 01), 4],
[Date.UTC(2015, 05, 01), 8],

$date_download =  date("Y, m, d", strtotime($row["date"]." -1 month"));

Full code :

<?php
$sql_download = "SELECT date, SUM(quantity) FROM downloads GROUP BY DATE(`Date`)";

?>
<script type="text/javascript">

        $('#container_downloads').highcharts({
            chart: {
                zoomType: 'x'
            },
            title: {
                text: 'Unity Downloads'
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    day: '%e. %b. %Y'
                },
                minRange: 14 * 24 * 3600000 // fourteen days

            },


            yAxis: {
                title: {
                    text: 'Downloads'
                },
                allowDecimals: false,

            },
            legend: {
                enabled: false
            },

            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },

            series: [{
                type: 'area',
                name: 'Downloads',
                data: [
    <?php 


    $result_download = $mysqli->query($sql_download);

    while($row = $result_download->fetch_assoc()){
       $quantity_download =  $row["SUM(quantity)"];     
       $date_download =  date("Y, m, d", strtotime($row["date"]));
       $ans_download = "[Date.UTC(" . $date_download . "), " .  $quantity_download . "]";
       echo $ans_download . ",\r\n";
    }

    ?>
                ]
            }]
        });

Upvotes: 2

Views: 86

Answers (1)

Steve
Steve

Reputation: 20469

while($row = $result_download->fetch_assoc()){
       $quantity_download =  $row["SUM(quantity)"];     
       $date_str = strtotime($row["date"]);
       $year = date('Y', $date_str);
       $month = date('n', $date_str) - 1;
       $day = date('j', $date_str);
       $ans_download = "[Date.UTC(" . sprintf('%s, %s, %s',$year,$month,$day) . "), " .  $quantity_download . "]";
       echo $ans_download . ",\r\n";
}

Upvotes: 1

Related Questions