highcharts krijg ik niet voor welkaar

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ventilatiesysteem Productontwikkelaar HBO WO Verwa

Samengevat: Zij bieden flexibele ventilatiematerialen, geluidsdempers, rookgasafvoer producten en industrieslangen. Ben jij een technisch productontwikkelaar? Heb jij ervaring met het ontwikkelen van nieuwe producten? Vaste baan: Technisch Productontwikkelaar HBO WO €3.000 - €4.000 Zij bieden een variëteit aan flexibele ventilatiematerialen, geluiddempers, rookgasafvoer producten, industrieslangen en ventilatieslangen voor de scheepsbouw. Met slimme en innovatieve materialen zorgen wij voor een gezonde en frisse leefomgeving. Deze werkgever is een organisatie die volop in ontwikkeling is met hardwerkende collega's. Dit geeft goede ontwikkelingsmogelijkheden. De branche van dit bedrijf is Techniek en Engineering. Functie: Voor de vacature als Technisch Productontwikkelaar Ede Gld HBO WO ga

Bekijk vacature »

Marco Mattheijer

Marco Mattheijer

03/08/2016 11:01:46
Quote Anchor link
Ik ben bezig met een project.
dat project werkt met arduino's en moet uiteindelijk een droogkast worden.
een droogkast om worsten in te drogen.
het arduino gedeelte lukt me aardig en op dat vlak zal het project wel slagen uiteindelijk.
maar allee data die de arduino genereert komt in een db terecht.

deze data wil ik online kunnen zien om eventueel in te grijpen.
nu is het me al gelukt om de data vanuit de arduino in een mysql te schieten en dit zichtbaar te maken via een tabel.
maar ik zou hier graag een lijngrafiek van willen hebben.

na veel zoeken zou het eenvoudig moeten gaan met highcharts. alleen wil dat niet vlotten. de data wordt niet geplot.

is er iemand die mij hiermee kan helpen.
mijn website: www.worstenzo.com hier zie je ook gelijk de tabel.
en www.worstenzo.com/hihghcharts zou er dan een grafiek moeten komen.
die drie php files gaat dus iets mis en ik kan het niet vinden.

wie kan me daar bij helpen?
Dit is data.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
$con
= mysql_connect("*********","********","*******");

if (!$con) {
  die('Could not connect: ' . mysql_error());
}


mysql_select_db("********", $con);

$result = mysql_query("SELECT * FROM highcharts_php");

while($row = mysql_fetch_array($result)) {
  echo $row['timeStamp'] . "\t" . $row['temperature']. "\n";
}


mysql_close($con);
?>

Dit is de index.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 

<title>Using Highcharts with PHP and MySQL</title>

<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="js/highcharts.js" ></script>
<script type="text/javascript" src="js/themes/gray.js"></script>

<script type="text/javascript">
    var chart;
            $(document).ready(function() {
                var options = {
                    chart: {
                        renderTo: 'container',
                        defaultSeriesType: 'line',
                        marginRight: 130,
                        marginBottom: 25
                    },
                    title: {
                        text: 'Hourly Visits',
                        x: -20 //center
                    },
                    subtitle: {
                        text: '',
                        x: -20
                    },
                    xAxis: {
                        type: 'datetime',
                        tickInterval: 3600 * 1000, // one hour
                        tickWidth: 0,
                        gridLineWidth: 1,
                        labels: {
                            align: 'center',
                            x: -3,
                            y: 20,
                            formatter: function() {
                                return Highcharts.dateFormat('%l%p', this.value);
                            }
                        }
                    },
                    yAxis: {
                        title: {
                            text: 'Visits'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        formatter: function() {
                                return Highcharts.dateFormat('%l%p', this.x-(1000*3600)) +'-'+ Highcharts.dateFormat('%l%p', this.x) +': <b>'+ this.y + '</b>';
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -10,
                        y: 100,
                        borderWidth: 0
                    },
                    series: [{
                        name: 'Count'
                    }]
                }
                // Load data asynchronously using jQuery. On success, add the data
                // to the options and initiate the chart.
                // This data is obtained by exporting a GA custom report to TSV.
                // http://api.jquery.com/jQuery.get/
                jQuery.get('data.php', null, function(tsv) {
                    var lines = [];
                    traffic = [];
                    try {
                        // split the data return into lines and parse them
                        tsv = tsv.split(/\n/g);
                        jQuery.each(tsv, function(i, line) {
                            line = line.split(/\t/);
                            date = Date.parse(line[0] +' UTC');
                            traffic.push([
                                date,
                                parseInt(line[1].replace(',', ''), 10)
                            ]);
                        });
                    } catch (e) {  }
                    options.series[0].data = traffic;
                    chart = new Highcharts.Chart(options);
                });
            });
</script>
</head>
<body>

<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>
                    
</body>
</html>

dit is highcharts_php.sql
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/*
SQLyog Community Edition- MySQL GUI v8.05
MySQL - 5.5.16-log : Database - bfsdemo
*********************************************************************
*/

/*!40101 SET NAMES utf8 */;

/*!40101 SET SQL_MODE=''*/;

/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;

/*Table structure for table `highcharts_php` */

CREATE TABLE `highcharts_php` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `timeStamp` varchar(200) DEFAULT NULL,
  `temperature` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=24 DEFAULT CHARSET=latin1;

/*Data for the table `highcharts_php` */

insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (1,'Friday, July 1, 2011 01:00:00',1288);
insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (2,'Friday, July 1, 2011 02:00:00',1275);
insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (3,'Friday, July 1, 2011 03:00:00',1270);
insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (4,'Friday, July 1, 2011 04:00:00',1279);
insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (5,'Friday, July 1, 2011 05:00:00',1268);
insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (6,'Friday, July 1, 2011 06:00:00',1267);
insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (7,'Friday, July 1, 2011 07:00:00',1271);
insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (8,'Friday, July 1, 2011 08:00:00',1287);
insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (9,'Friday, July 1, 2011 09:00:00',1276);
insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (10,'Friday, July 1, 2011 10:00:00',1278);
insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (11,'Friday, July 1, 2011 11:00:00',1272);
insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (12,'Friday, July 1, 2011 12:00:00',1288);
insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (13,'Friday, July 1, 2011 13:00:00',1264);
insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (14,'Friday, July 1, 2011 14:00:00',1280);
insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (15,'Friday, July 1, 2011 15:00:00',1277);
insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (16,'Friday, July 1, 2011 16:00:00',1278);
insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (17,'Friday, July 1, 2011 17:00:00',1279);
insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (18,'Friday, July 1, 2011 18:00:00',1277);
insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (19,'Friday, July 1, 2011 19:00:00',1270);
insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (20,'Friday, July 1, 2011 20:00:00',1264);
insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (21,'Friday, July 1, 2011 21:00:00',1278);
insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (22,'Friday, July 1, 2011 22:00:00',1284);
insert  into `highcharts_php`(`id`,`timespan`,`visits`) values (23,'Friday, July 1, 2011 23:00:00',1272);

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
Gewijzigd op 03/08/2016 12:03:00 door Marco Mattheijer
 
PHP hulp

PHP hulp

19/04/2024 04:19:02
 
Ivo P

Ivo P

03/08/2016 15:39:51
Quote Anchor link
wat heb je aan het gegeven "Friday, July 1, 2011 01:00:00"

??

Daar kun je niet op sorteren.
een veld van het type DATETIME met als inhoud "2011-07-01 01:00:00" is bedoeld om datums+tijden in op te slaan. Daarop kun je sorteren en ook heel eenvoudig filteren.

Mogelijk maakt dat ook je probleem kleiner?
 
Marco Mattheijer

Marco Mattheijer

03/08/2016 16:15:09
Quote Anchor link
Die highcharts_php wordt gemaakt door de index als ik het goed begrijp. vandaaruit gaat highcharts de lijngrafiek maken. dat laatste bestand is dan ook een voorbeeld bestand.
kijk maar op www.worstenzo.com wat voor tabel ik nu gebruik, misschien dat dat meer duidelijkheid geeft.
 
Adoptive Solution

Adoptive Solution

03/08/2016 16:32:51
Quote Anchor link
De veldnamen van de INSERT komen niet overeen met de veldnamen in de TABLE.

Ik heb er dit van gemaakt :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
-- Adminer 4.2.4 MySQL dump

SET NAMES utf8;
SET time_zone = '+00:00';
SET foreign_key_checks = 0;
SET sql_mode = 'NO_AUTO_VALUE_ON_ZERO';

DROP TABLE IF EXISTS `highcharts_php`;
CREATE TABLE `highcharts_php` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `timeStamp` datetime DEFAULT NULL,
  `temperature` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `highcharts_php` (`id`, `timeStamp`, `temperature`) VALUES
(1,    '2011-07-01 01:00:00',    1288),
(2,    '2011-07-01 02:00:00',    1275),
(3,    '2011-07-01 03:00:00',    1270),
(4,    '2011-07-01 04:00:00',    1279),
(5,    '2011-07-01 05:00:00',    1268),
(6,    '2011-07-01 06:00:00',    1267),
(7,    '2011-07-01 07:00:00',    1271),
(8,    '2011-07-01 08:00:00',    1287),
(9,    '2011-07-01 09:00:00',    1276),
(10,    '2011-07-01 10:00:00',    1278),
(11,    '2011-07-01 11:00:00',    1272),
(12,    '2011-07-01 12:00:00',    1288),
(13,    '2011-07-01 13:00:00',    1264),
(14,    '2011-07-01 14:00:00',    1280),
(15,    '2011-07-01 15:00:00',    1277),
(16,    '2011-07-01 16:00:00',    1278),
(17,    '2011-07-01 17:00:00',    1279),
(18,    '2011-07-01 18:00:00',    1277),
(19,    '2011-07-01 19:00:00',    1270),
(20,    '2011-07-01 20:00:00',    1264),
(21,    '2011-07-01 21:00:00',    1278),
(22,    '2011-07-01 22:00:00',    1284),
(23,    '2011-07-01 23:00:00',    1272);

-- 2016-08-03 14:30:19
 
Marco Mattheijer

Marco Mattheijer

03/08/2016 16:46:18
Quote Anchor link
Adoptive Solution op 03/08/2016 16:32:51:
De veldnamen van de INSERT komen niet overeen met de veldnamen in de TABLE.

Ik heb er dit van gemaakt :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
-- Adminer 4.2.4 MySQL dump

SET NAMES utf8;
SET time_zone = '+00:00';
SET foreign_key_checks = 0;
SET sql_mode = 'NO_AUTO_VALUE_ON_ZERO';

DROP TABLE IF EXISTS `highcharts_php`;
CREATE TABLE `highcharts_php` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `timeStamp` datetime DEFAULT NULL,
  `temperature` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `highcharts_php` (`id`, `timeStamp`, `temperature`) VALUES
(1,    '2011-07-01 01:00:00',    1288),
(2,    '2011-07-01 02:00:00',    1275),
(3,    '2011-07-01 03:00:00',    1270),
(4,    '2011-07-01 04:00:00',    1279),
(5,    '2011-07-01 05:00:00',    1268),
(6,    '2011-07-01 06:00:00',    1267),
(7,    '2011-07-01 07:00:00',    1271),
(8,    '2011-07-01 08:00:00',    1287),
(9,    '2011-07-01 09:00:00',    1276),
(10,    '2011-07-01 10:00:00',    1278),
(11,    '2011-07-01 11:00:00',    1272),
(12,    '2011-07-01 12:00:00',    1288),
(13,    '2011-07-01 13:00:00',    1264),
(14,    '2011-07-01 14:00:00',    1280),
(15,    '2011-07-01 15:00:00',    1277),
(16,    '2011-07-01 16:00:00',    1278),
(17,    '2011-07-01 17:00:00',    1279),
(18,    '2011-07-01 18:00:00',    1277),
(19,    '2011-07-01 19:00:00',    1270),
(20,    '2011-07-01 20:00:00',    1264),
(21,    '2011-07-01 21:00:00',    1278),
(22,    '2011-07-01 22:00:00',    1284),
(23,    '2011-07-01 23:00:00',    1272);

-- 2016-08-03 14:30:19


Ik heb jou aanpassing doorgevoerd, maar helaas nog geen resultaat, highcharts_php wordt ook niet aangemaakt ?

Toevoeging op 04/08/2016 13:08:37:

Inmiddels krijg ik stapje voor stapje meer beeld :-)
http://worstenzo.com/index.php/grafiek

alleen denk ik dat het bij de onderas mis gaat.
hier wordt een date gebruikt dit heb ik veranderd in timestamp maar denk dat dat niet goed gaat.
hebben jullie hier een advoes voor ?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
},
                    xAxis: {
                        type: 'timestamp',
                        tickInterval: 3600 * 1000, // one hour
                        tickWidth: 0,
                        gridLineWidth: 1,
                        labels: {
                            align: 'center',
                            x: -3,
                            y: 20,
                            formatter: function() {
                                return Highcharts.dateFormat('%l%p', this.value);
                            }
                        }
                    },
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.