is anyone ever use hightchart??i want to use hightchart to represent the data retrieve from mysql database..i try look at the example,this is full example:
<script type="text/javascript">
$(function() {
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['MSFT', 'AAPL', 'GOOG'],
colors = Highcharts.getOptions().colors;
$.each(names, function(i, name) {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?', function(data) {
seriesOptions[i] = {
name: name,
data: data
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter++;
if (seriesCounter == names.length) {
createChart();
}
});
});
// create the chart when all data is loaded
function createChart() {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 4
},
yAxis: {
labels: {
formatter: function() {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seriesOptions
});
}
});
</script>
the problem is they used this link ("http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?") to get the data and which that i cant to view the example how they display the data..
i dont know how the link "http://www.highcharts.com/samples/data/jsonp.php" is look like, and how they represent the data.. i want to make my own page that retrieve data from database and replace the link above with my own php page..
this is working example...http://www.highcharts.com/stock/demo/compare
You have to create an array of data you want to populate. Then encode the php array to json format using json_encode. Echo that json string.
Here is a sample code
$a[] = 1133740800000;
$a[] = 1133740800000;
$a[] = 1133740800000;
$a[] = 1133740800000;
$a[] = 1133740800000;
$b[] = 405.85;
$b[] = 405.85;
$b[] = 405.85;
$b[] = 405.85;
$b[] = 405.85;
foreach($a as $i => $v)
{
$cordinates[]= array($v,$b[$i]);
}
echo (json_encode($cordinates));
Hope this helps.
solved------------ index file below
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("map2.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Revenue vs. Overhead',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
yAxis: {
title: {
text: 'Amount'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: json
});
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
ajax file below
<?php
$con = mysql_connect("localhost","username","password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}mysql_select_db("cakephp", $con);
$sth = mysql_query("SELECT revenue FROM highcharts2");
$rows = array();
$rows['name'] = 'revenue';
while($r = mysql_fetch_array($sth)) {
$rows['data'][] = $r['revenue'];
}
$sth = mysql_query("SELECT overhead FROM highcharts2");
$rows1 = array();
$rows1['name'] = 'overhead';
while($rr = mysql_fetch_assoc($sth)) {
$rows1['data'][] = $rr['overhead'];
}$result = array();
array_push($result,$rows);
array_push($result,$rows1);
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>
create db like below
CREATE TABLE IF NOT EXISTS `highcharts2` (
`id` int(10) NOT NULL auto_increment,
`month` varchar(225) NOT NULL,
`revenue` varchar(225) NOT NULL,
`overhead` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
)
INSERT INTO `highcharts2` (`id`, `month`, `revenue`, `overhead`) VALUES
(1, 'jan', '23987', '21990'),
(2, 'Feb', '24784', '22363'),
(3, 'Mar', '25899', '21987'),
(4, 'Apr', '25569', '22369'),
(5, 'May', '25599', '22698'),
(6, 'jun', '25577', '21999'),
(7, 'Jul', '24111', '2599'),
(8, 'Aug', '25555', '21988'),
(9, 'sep', '25444', '21981'),
(10, 'oct', '25599', '21988'),
(11, 'nov', '24559', '20142'),
(12, 'dec', '25111', '22222');
Using firebug, you can check the response of the ajax, should be a json object
Related
Can you guys help me with my problem?
My Highcharts graph working , But I don't have any idea to count my table cell in $as_name with month $created_date and display only gel data to my highcharts like categorie (month) and data to(as_name)count,
this is my database and my code,
Any help is well appreciated Thank you..
database
CREATE TABLE `tickets` (
`id` int(11) NOT NULL,
`as_name` varchar(50) NOT NULL,
`create_date` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
|AS_name|creater_date|
---------------------
|gel |2020-12-21 |
|gel |2020-12-21 |
|jhon |2020-12-21 |
|gel |2020-12-21 |
|jhon |2020-12-21 |
---------------------
controller.
public function index()
{
$data['list'] = $this->data();
$this->load->view('dashboard');
}
public function data()
{
$data = $this->Dashboard_model->get_data();
$category = array();
$category['name'] = 'Month';
$series1 = array();
$series1['name'] = 'WordPress';
$series2 = array();
$series2['name'] = 'Code Igniter';
$series3 = array();
$series3['name'] = 'Highcharts';
foreach ($data as $row) {
$category['data'][] = $row->month;
$series1['data'][] = $row->wordpress;
$series2['data'][] = $row->codeigniter;
$series3['data'][] = $row->highchart;
}
$result = array();
array_push($result,$category);
array_push($result,$series1);
array_push($result,$series2);
array_push($result,$series3);
print json_encode($result, JSON_NUMERIC_CHECK);
}
model
public function get_data()
{
$this->db->select('month,wordpress,codeigniter,highchart');
$this->db->from('sample');
$query = $this->db->get();
return $query->result();
}
VIEW
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
colors: ['#058DC7', '#800080', '#F08080'],//line
chart: {
renderTo: 'model',
type: 'line',
marginRight: 130,
marginBottom: 100
},
title: {
text: 'Month',//title here
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'click'//side commment
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 40,
borderWidth: 1
},
series: []
}
var url = <your web url> + "data1.json"; // assumes that your URL ends with a forward slash
$.getJSON("url", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
options.series[2] = json[3];
chart = new Highcharts.Chart(options);
});
});
</script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
**body**
<div class="jumbotron" >
<div id="model" style="width: 600px; height: 400px; margin: 0 auto;" ></div>
</div>
I have a records.values table in myDB.When new data is inserted into this table I want to change the graph.I used php and highchart but there is nothing can be seen from browser.What is wrong thing in my code.I use ubuntu 14.04.
index.php
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("/home/cea/Desktop/deneme/data.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'REgion vs. type',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Amount'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: json
});
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
data.php
accessing database values
<?php
$con = mysql_connect("localhost:3306","root","963369");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
else print "connected!";
mysql_select_db("records", $con);
$sth = mysql_query("SELECT region FROM records.values");
$rows = array();
$rows['name'] = 'Region';
while($r = mysql_fetch_array($sth)) {
$rows['data'][] = $r['region'];
}
$sth = mysql_query("SELECT type FROM records.values");
$rows1 = array();
$rows1['name'] = 'Type';
while($rr = mysql_fetch_assoc($sth)) {
$rows1['data'][] = $rr['type'];
}
$sth = mysql_query("SELECT value FROM records.values");
$rows2 = array();
$rows2['name'] = 'Value';
while($rrr = mysql_fetch_assoc($sth)) {
$rows2['data'][] = $rrr['value'];
}
$result = array();
array_push($result,$rows);
array_push($result,$rows1);
array_push($result,$rows2);
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>
What is the missing point in here? **I just started to learn php and highcharts. Thank you..
Somebody can help me. I'm new in php and highcharts. I tried to populate my chart using mysql and php, but when I tried to run it, the chart didn't appear, I only sse a blank web page. And there's no error appeared.
Her's my codes (sorry for messy code):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
</head>
<body>
<?php
include "config.php";
$SQL1 = "SELECT * FROM pos";
$result1 = mysql_query($SQL1);
$data1 = array();
while ($row = mysql_fetch_array($result1)) {
$data1[] = $row['name'];
$data2[] = $row['Qty'];
}
?>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
margin: [ 50, 50, 100, 80]
},
title: {
text: 'List of POS'
},
credits: {
enabled: false
},
xAxis: {
categories: [<?php echo join($data1, "','"); ?>],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'No. of Ticket'
}
},
legend: {
enabled: false,
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 50,
y: 35,
floating: true,
shadow: true
},
tooltip: {
pointFormat: '<b>{point.y:.1f} tickets</b>',
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Qty',
data: ['<?php echo join($data2, "','"); ?>'],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black',
}
}
}]
});
});
</script>
<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>
</body>
</html>
And here's my config.php
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "pos";
$prefix = "";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>
Blank pages usually mean syntax errors. You should switch error_reporting on.
The errors are in the use of your echo statements where you construct the json. The error is that you are missing semi colons in both the echo statements.
Replace <?php echo join($data1, ',') ?> with <?php echo join($data1, ','); ?>
Similarly for $data2:
Replace <?php echo join($data2, ',') ?> with <?php echo join($data2, ','); ?>
Another improvement you could make in the following block:
<?php
include "config.php";
$SQL1 = "SELECT * FROM pos";
$result1 = mysql_query($SQL1);
$data1 = array();
while ($row = mysql_fetch_array($result1)) {
$data1[] = $row['name'];
}
$result2 = mysql_query($SQL1);
$data2 = array();
while ($row = mysql_fetch_array($result2)) {
$data2[] = $row['Qty'];
}
?>
Instead of executing query twice to build two arrays, you could get rid of one of the queries and build both the arrays from the same query result:
<?php
include "config.php";
$SQL1 = "SELECT * FROM pos";
$result1 = mysql_query($SQL1);
$data1 = array();
$data2 = array();
while ($row = mysql_fetch_array($result1)) {
$data1[] = $row['name'];
$data2[] = $row['Qty'];
}
?>
Note: The php mysql extension is deprecated as of PHP 5.5.0, you should be using either MySQLi or PDO_MySQL.
Please Try Example as below. I think it can help you
SQL Table
CREATE TABLE IF NOT EXISTS `sales` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`month` varchar(200) DEFAULT NULL,
`amount` varchar(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=118 ;
INSERT INTO `sales` (`id`, `month`, `amount`) VALUES
(24, 'Apr', '15'),
(25, 'May', '40'),
(26, 'Jun', '26'),
(27, 'Jul', '31'),
(28, 'Aug', '39'),
(29, 'Sep', '25'),
(30, 'Oct', '27'),
(31, 'Nov', ' 32'),
(32, 'Dec', NULL);
Here we have Create new table and insert some data in it. Now Data will look as below
index.php
<head>
<meta name="Gopal Joshi" content="Highchart with Mysql" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Highchart with Mysql Database</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/setup.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<script src="js/highcharts.js"></script>
<div id="sales" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
setup.js
var chart;
$(document).ready(function() {
var cursan = {
chart: {
renderTo: 'sales',
defaultSeriesType: 'area',
marginRight: 10,
marginBottom: 20
},
title: {
text: 'Highchart With Mysql',
},
subtitle: {
text: 'www.spjoshis.blogspot.com',
},
xAxis: {
categories: ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar']
},
yAxis: {
title: {
text: 'Average'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
crosshairs: true,
shared: true
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 30,
borderWidth: 0
},
plotOptions: {
series: {
cursor: 'pointer',
marker: {
lineWidth: 1
}
}
},
series: [{
color: Highcharts.getOptions().colors[2],
name: 'Test Colomn',
marker: {
fillColor: '#FFFFFF',
lineWidth: 3,
lineColor: null // inherit from series
},
dataLabels: {
enabled: true,
rotation: 0,
color: '#666666',
align: 'top',
x: -10,
y: -10,
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 0px black'
}
}
}],
}
//Fetch MySql Records
jQuery.get('js/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 = line[0] ;
amo=parseFloat(line[1].replace(',', ''));
if (isNaN(amo)) {
amo = null;
}
traffic.push([
date,
amo
]);
});
} catch (e) { }
cursan.series[0].data = traffic;
chart = new Highcharts.Chart(cursan);
});
});
s will import data from mysql from data.php and add to chart which is create previously in js.
data.php
$con=mysql_connect('localhost','root','');
mysql_select_db("test", $con);
$result=mysql_query('select * from sales order by id');
while($row = mysql_fetch_array($result)) {
echo $row['month'] . "\t" . $row['amount']. "\n";
}
our chart is fully loaded .with mysql records and output will look li below
Output
its example of area chart, you can change type of chart by changing defaultSeriesType: 'area'
Click Here for more Example with source.
I think your supposed to have single quotes around this
categories: [<?php echo join($data1, ',') ?>],
Should be
categories: ['<?php echo join($data1, ',') ?>'],
Even if this is an old thread, this might have nothing to do with Highcharts, I'v just noted the final phrase in your error message:
"...Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given
in C:\xampp\htdocs\otrs\chart\graphs\pos\index.php on line 22"
tipically has to do with a query that fails returning FALSE instead of a rowset. You should take a look at this related question.
I am trying to work through a tutorial regarding getting a JSON string from MySQL and preparing it for highcharts, but it's not working and I have no idea why....
HTML:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function () {
$.getJSON("data.php", function (json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Revenue vs. Overhead',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Amount'
},
plotLines: [
{
value: 0,
width: 1,
color: '#808080'
}
]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: json
});
});
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
The JSON string is produced using the file
data.php:
<?php
$con = mysql_connect("*****", "*****", "*****");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("*****", $con);
$sth = mysql_query("SELECT revenue FROM projections_sample");
$rows = array();
$rows['name'] = 'Revenue';
while ($r = mysql_fetch_array($sth)) {
$rows['data'][] = $r['revenue'];
}
$sth = mysql_query("SELECT overhead FROM projections_sample");
$rows1 = array();
$rows1['name'] = 'Overhead';
while ($rr = mysql_fetch_assoc($sth)) {
$rows1['data'][] = $rr['overhead'];
}
$result = array();
array_push($result, $rows);
array_push($result, $rows1);
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>
If I enter a JSON string manually into data.php the charts is displayed as expected.
[{
"name": "Revenue",
"data": [23987, 24784, 25899, 25569, 25897, 25668, 24114, 23899, 24987, 25111, 25899, 23221]
}, {
"name": "Overhead",
"data": [21990, 22365, 21987, 22369, 22558, 22987, 23521, 23003, 22756, 23112, 22987, 22897]
}]
I'm assuming my connection details are correct, because if I purposely enter the wrong password I get the MySQL connection error...
“Could not connect: Access denied for user ‘*****’#'localhost’ (using password: YES)”
Also, I get “True” returned when I add “echo #mysql_ping() ? ‘true’ : ‘false’;” to the bottom of the page.
Because I'm convinced it should be working I'm wondering if there is anything related to server configuration that could be preventing me from using JSON?
if you can't use JSON_NUMERIC_CHECK (because it requires PHP 5.3.3 (json.constants))
you can cast to int [$number = (int)"1234";]
in
while ($r = mysql_fetch_array($sth)) {
$rows['data'][] = (int)$r['revenue']; // <- (int)
}
and
while ($rr = mysql_fetch_assoc($sth)) {
$rows1['data'][] = (int)$rr['overhead']; // <- (int)
}
than
print json_encode($result);
Hello I try to use Highcharts with data's from an sql Database by using json.
There are all doing but I can't see any values
I get the Data's with this script:
<?php
header('content-type: text/html; charset=utf-8');
include("db.inc.php");
$con = mysql_connect(DB_SERVER, DB_USER, DB_PASSWOR
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db(DB_NAME, $con);
$sth0 = mysql_query("SELECT `DATETIME` FROM `dg_wall24` WHERE DATETIME >
NOW()INTERVAL 1 HOUR");
$rows0 = array();
$rows0['name'] = 'DATETIME';
while($r0 = mysql_fetch_array($sth0)) {
$rows0['data'][] = $r0['DATETIME'];
}
$sth1 = mysql_query("SELECT `dg_t01` FROM `dg_wall24` WHERE DATETIME >
NOW()INTERVAL 1 HOUR");
$rows1 = array();
$rows1['name'] = 'dg_t01';
while($r1 = mysql_fetch_array($sth1)) {
$rows1['data'][] = $r1['dg_t01'];
}
$sth2 = mysql_query("SELECT `dg_h01` FROM `dg_wall24` WHERE DATETIME >
NOW() INTERVAL 1 HOUR");
$rows2 = array();
$rows2['name'] = 'dg_h01';
while($r2 = mysql_fetch_array($sth2)) {
$rows2['data'][] = $r2['dg_h01'];
}
$result = array();
array_push($result,$rows0);
array_push($result,$rows1);
array_push($result,$rows2);
print json_encode($result);
mysql_close($con);
?>
The Result:
[{"name":"DATETIME","data":["2013-04-27 08:17:52","2013-04-27 08:22:52","2013-04-27 08:27:53","2013-04-27 08:32:54","2013-04-27 08:37:55","2013-04-27 08:42:55","2013-04-27 08:47:56","2013-04-27 08:52:57","2013-04-27 08:57:58","2013-04-27 09:02:58","2013-04-27 09:07:59","2013-04-27 09:13:00"]},{"name":"dg_t01","data":["22.40","22.40","22.40","22.40","22.30","22.30","22.40","22.40","22.40","22.40","22.40","22.40"]},{"name":"dg_h01","data":["40.20","40.40","40.50","40.80","40.70","40.70","40.80","40.90","41.00","41.00","40.90","40.70"]}]
In the Highchart I can See the timeline on the x Axis and the name of the values but no line and no values.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 40
},
title: {
text: 'Dachgeschoss',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
//categories: []
},
yAxis: {
title: {
text: 'Temperatur & Luftfeuchtigkeit'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
}
$.getJSON("data2.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>
<script type="text/javascript" src="js/themes/gray.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
It is possible that I have an problem with the Dataformat (float, int...) or with the Point in the values?
Many thanks for the help
The problem is indeed that your JSON object contains String values instead of Float values for your data:
{ ... "data":["40.20","40.40","40.50", ... ]}
I don't know what the field type in your database is, and I'm no PHP coder, but you could try setting the JSON_NUMERIC_CHECK option on json_encode.
If that doesn't work for you, you could also convert the Strings using parseFloat in Javascript:
for (var i = 0, num; num = json[1].data[i]; i++)
{
json[1].data[i] = parseFloat(num);
}
See my example on Fiddle.