VAandref
Posts: 1
Joined: Sun Oct 21, 2018 8:07 pm

Intraday area chart with MYSQL Data

Hey,

I am trying to display own MYSQL-data with an intraday area chart.

Unfortunately this doesn't work with the chosen ntraday area chart but works with a highchart scatter plot.

Because the timestamps of the data are not continous, I am prepocessing the data, so that the values are sumed up for every minute:

Code: Select all

<?php

$con=mysqli_connect("localhost","test", "test", "test");

if (mysqli_connect_errno()) {

    printf("Connect failed: %s\n", mysqli_connect_error());
}


//if ($result = mysqli_query($con, "SELECT SUM(zahl) as StundenSumme, EXTRACT(YEAR from zeit) AS year, EXTRACT(MONTH from zeit) AS month, EXTRACT(DAY from zeit) AS day, EXTRACT(HOUR from zeit) AS hour FROM `ratzen` WHERE 1 GROUP BY year,$


if ($result = mysqli_query($con, "SELECT SUM(zahl) as MinutenSumme, EXTRACT(YEAR from zeit) AS year, EXTRACT(MONTH from zeit) AS month, EXTRACT(DAY from zeit) AS day, EXTRACT(HOUR from zeit) AS hour, EXTRACT(MINUTE from zeit) AS minute F$

    printf("Select returned %d rows.\n", mysqli_num_rows($result));
}

while($row = mysqli_fetch_array($result)) {

$hour =  $row['hour'];
$month =  $row['month'];
$year =  $row['year'];
$day =  $row['day'];
$minute = $row['minute'];
$second = 0;
//FROM 'ratzen' WHERE 1 GROUP BY year, month, day, hour, minute;

//extract $row;

//$time = strtotime($row['zeit'])*1000;

$number =  $row['MinutenSumme'];

$time = (mktime($hour,$minute, $second, $month, $day, $year))*1000;

$overhead1 = $number+0.1;

$overhead2 = $number+0.11;

$overhead3 = $number+0.111;

//    echo $row['zeit'] ."/";// convert from Unix timestamp to JavaScript time

$data[] = "[$time, $number, $overhead1, $overhead2, $overhead3]";
}

echo join($data, ',');

mysqli_close($con);

?>
This displays the processed data like this:

Select returned 5 rows. [1539813120000, 7, 7.1, 7.11, 7.111],[1539813180000, 13, 13.1, 13.11, 13.111],[1539813240000, 24, 24.1, 24.11, 24.111],[1539813300000, 17, 17.1, 17.11, 17.111],[1539813360000, 27, 27.1, 27.11, 27.111]
Underneath, the chart should display this data. Unfortunately this works for the scatter plot but not with the intraday area chart.

I suppose that either the data is not processed for this kind of diagram or I misused the code of this diagramm from https://www.highcharts.com/stock/demo/intraday-area

This is the html/JS code that follows the php mentioned above. Where is the mistake and why does the chart don't show up?

Code: Select all

<html>
<head>

<title>HighChart</title>


<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>
<script src="https://code.highcharts.com/stock/highstock.js"></script>

<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>



<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>


</head>


<body>


<script type="text/javascript">


// create the chart

    Highcharts.stockChart('container', {





        title: {

            text: 'AAPL stock price by minute'

        },



        subtitle: {

            text: 'Using ordinal X axis'

        },



        xAxis: {

            gapGridLineWidth: 0

        },


        rangeSelector: {

            buttons: [{

                type: 'hour',

                count: 1,

                text: '1h'

            }, {

                type: 'day',

                count: 1,

                text: '1D'

            }, {

                type: 'all',

                count: 1,

                text: 'All'

            }],

            selected: 1,

            inputEnabled: false

        },

         series: [{

            name: 'AAPL',

            type: 'area',

            data: [<?php echo join($data, ',') ?>],

            gapSize: 5,

            tooltip: {

                valueDecimals: 2

            },

            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')]

                ]

            },

            threshold: null
  series: [{

            name: 'AAPL',

            type: 'area',

            data: [<?php echo join($data, ',') ?>],

            gapSize: 5,

            tooltip: {

                valueDecimals: 2

            },

            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')]

                ]

            },

            threshold: null

  }]

    });

});


 //data: [<?php echo join($data, ',') ?>]

  //    }]

//});



</script>



</body>



</html>
Thank you so much in advance for your help!!!
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: Intraday area chart with MYSQL Data

Hi VAandref,

I reproduced your chart in jsfiddle with your data example and it is plotted fine, check demo attached below. Check your implementation once again and try to find what is wrong with it. One thing I noticed your js code with chart options is very messy (series defined inside the series object for example).

Working demo:
https://jsfiddle.net/wchmiel/j2kzp847/1/

Kind regards.
Wojciech Chmiel
Highcharts Developer

Return to “Highcharts Stock”