PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
M

highcharts krijg ik niet voor welkaar

Door Marco Mattheijer op 03-08-2016 11:01 gewijzigd op 03-08-2016 12:03
2.498 views
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

<?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

<!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

/*
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 */;
Ivo P
03-08-2016 15:39
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?
M
Marco Mattheijer
03-08-2016 16:15
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.
A
Adoptive Solution
03-08-2016 16:32
De veldnamen van de INSERT komen niet overeen met de veldnamen in de TABLE.

Ik heb er dit van gemaakt :

-- 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
M
Marco Mattheijer
03-08-2016 16:46
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 :

-- 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 ?

[size=xsmall]Toevoeging op 04/08/2016 13:08:37:[/size]

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 ?

},
					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);
							}
						}
					},

Reageren

Inloggen om te reageren