This is the image of the error:
This error 13 is always showing up. I just cannot find the reason why highchart.js is not working. Can anyone help me to fix this one? Thanks
<?php
$q = $this->db->query("select * from scli_tbl_services");
foreach ($q->result() as $row) {
$data[] = $row->service_id;
}
?>
<script type="text/javascript">
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart_sample'
},
series: [{
data: [<?php echo join($data, ',') ?>],
pointStart: 0,
pointInterval: 10
}]
});
</script>
<span id="chart_sample" class="chart_sample"></span>
This is my code that I'm about to run. So I don't know if my code also is working fine.
HighChart.Js Solution :
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
<?php
$newArray = array(
"Valvo" => Array(10,15,20),
"ACBUS" => Array(25,30,15),
"SchoolBus" => Array(25,30,15),
"MiniBus" => Array(25,30,15),
"CityBus" => Array(25,30,15)
);
$json_array_form = array();
$data = '';
foreach ($newArray as $key => $value){
$json_array_form['name'] = $key;
$json_array_form['data'] = $value;
$data .= json_encode($json_array_form).',';
}
$data = substr($data, 0, -1);
?>
//HighChart Js functionality start
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [<?php echo $data;?>],
});
});
</script>
Related
I don't know how to create multiple series with data.I manage to do with only on ID from table. But when I have to take all data for every ID , didnt work.
This is php code
<?php include 'login/dbconf.php';
$conn = mysqli_connect($host, $username, $password, $db_name);
$conn->query("SET NAMES utf8");
$external_cow_id = $_POST['external_cow_id'];
$query = "SELECT testing_date, delta_mp FROM cow_result WHERE id='{$id}'";
$result = mysqli_query($conn, $query);
if ( ! $result ) {
echo mysqli_error();
die;
}
$testing_date = array();
$delta_mp = array();
for ($x = 0; $x < mysqli_num_rows($result); $x++) {
$data = mysqli_fetch_assoc($result);
$testing_date[]=$data['testing_date'];
$delta_mp[]=$data['delta_mp'];
}
//echo json_encode($data);
mysqli_close($server);
?>
And this is js I use for one cow only.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
backgroundColor: null
},
title: {
text: 'FPA RESULTS',
style: {
color: '#000'
}
},
xAxis: {
categories: <?php echo json_encode($testing_date); ?>
},
yAxis: {
labels: {
style: {
color: '#CCC'
},
},
gridLineColor: '#333'
},
series: [{
name:[<?php echo json_encode($external_cow_id); ?>] ,
data: [<?php echo join($delta_mp, ',') ?>],
color: 'blue',
shadow: {
color: 'blue',
width: 10,
offsetX: 0,
offsetY: 0
}
}]
});
And I need something like this
chart
Every cow has multiple testing_date and delta_mp...
Thanks for help
hi everyone im working on real-time java script chart to display data from a database but all i get is nothing its not catching data from data base
i used this php code
<?php
header("Content-type: text/json");
$servername = "localhost";
$username = "root";
$password = "";
$value = $_GET['value'];
$date = time() * 1000;
$ret = array($date, $value);
echo json_encode($ret);
$conn = mysql_connect($servername, $username, $password);
if ($conn) {
echo "Connected successfully";
}
else {
echo "connection failed";
}
$conndb = mysql_select_db('database', $conn);
echo "<br>";
$sql_insert ="insert into pulsesensor(value) values ('$value')";
if($sql_insert){
echo "insert successfull";
}
else {
echo "insert failed";
} echo "<br>";
$result = mysql_query($sql_insert);
if($result){
echo "insert successfull";
}
else {
echo "insert failed" . mysql_error($result);
}
?>
and for real-time chart i used this code
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0
auto">
</div>
/**
* Request data from the server, add it to the graph and set a timeout
* to request again
*/
function requestData() {
$.ajax({
url: 'mysql0.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is
// longer than 20
// add the point
chart.series[0].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Live Heartbeats data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
name: 'heartbeats data',
data: []
}]
});
});
</script>
at the end the result is this
I am working with Highchart. I want to draw dynamic graph with database value. I use json format.
Here is my json file:
<?php
// Set the JSON header
header("Content-type: text/json");
include"../veri_ayar.php";
$sql = "SELECT Guc FROM Urun ORDER BY KayitTarihi DESC LIMIT 1";
$result = mysqli_query($conn, $sql);
$data = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$data[] = $row;
}
}
$x = time() * 1000;
foreach($data as $dat)
{
$date .= $dat['Guc'];
}
mysqli_close($conn);
$ret=array($x, $date);
echo json_encode($ret);
?>
And my output is : [1479814215000,"43"]
When I write to just $date for control it looks like: just 43 but when I write to json format it looks like "43".
When I want to draw graph my graph is shift left but no data in graph. just shift to left.
Here is my graph script:
<script>
var chart;
function requestData() {
$.ajax({
url: 'veri-json.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is
// longer than 20
// add the point
chart.series[0].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
name: 'Random data',
data: []
}]
});
});
</script>
I have a MySQL database that gets updated every 5 seconds with a time-stamp and temperature.
I'm trying to represents the live data using high stock.
Here's my code so far:
<?php
$servername = "localhost";
$username = "root";
$password = "*******";
$database = "MicroCSP";
$port = 3306;
header("Content-type: text/html");
$con = new mysqli($servername,$username,$password,$database,$port);
if ($con->connect_error)
{
die("Connection failed: " . $conn->connect_error);
}
$sql="select TimeStamp as time,Pdc2 as temperature from SpotData";
if ($result = $con->query($sql)) {
// $row = mysqli_fetch_array($result, MYSQLI_NUM);
while($row = $result->fetch_array()){
$rows[] = $row;
}
foreach($rows as $row){
$datetime = ($row['time'])*1000;
$temp = $row['temperature'];
$data[] = "[$datetime, $temp]";
}
//$data[] = "[$datetime, $out]";
//echo(json_encode($data));
$result->close();
}
else {
echo "Error: " . $sql . "<br>" . $con->error;
}
$con->close();
?>
<!DOCTYPE html>
<html>
<head>
<title>
Temps Reel
</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="//code.highcharts.com/stock/modules/exporting.js"></script>
<script>
$(function () {
Highcharts.setOptions({
global : {
useUTC : false
}
});
// Create the chart
$('#container').highcharts('StockChart', {
chart : {
events : {
load : function () {
// set up the updating of the chart each 5 seconds
var series = this.series[0];
setInterval(function () {
var x = <?php echo $datetime; ?>, //<?php echo $datetime; ?> // current time
y = <?php echo $temp; ?>//Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 5000);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title : {
text : 'Live random data'
},
exporting: {
enabled: false
},
series : [{
name : 'Data',
data : [<?php echo join($data, ',') ?>],
}]
});
});
</script>
</head>
<body>
<div id="container" style="height: 400px; min-width: 310px"></div>
</body>
</html>
When I use the built-in date function and random values it works just fine but when I try to echo out data from my database it doesn't work.
Any help?
How can I introduce in the highcharts code an array that comes from a php code?
In the next code php I generate 4 arrays, 3 for Data (TMax ($rows), TMin ($rows1) and Rain ($rows2) and the last one for the days of the consulting ($dia).
$sth = mysqli_query($con,"SELECT City,TMax, Day(Date) As Dia FROM Meteo2 where City= '" . $_SESSION["City"] ."' AND Data BETWEEN '" . split($_SESSION["date8"]) ."' AND '" . split($_SESSION["date9"]) ."'order by Date");
$rows = array();
$dia = array();
$dia['name'] = 'Dia';
$rows['name'] = 'TMAX';
$rows['color'] = '#FF0000';
$cont=1;
while($r = mysqli_fetch_array($sth)) {
$rows['data'][] = $r['TMax'];
$dia['categories'][] = $r['Dia'];
}
$sth = mysqli_query($con,"SELECT City,TMin FROM Meteo2 where City= '" . $_SESSION["City"] ."' AND Data BETWEEN '" . split($_SESSION["date8"]) ."' AND '" . split($_SESSION["date9"]) ."'order by Date");
$rows1 = array();
$rows1['name'] = 'TMIN';
$rows1['color'] = '#00FFFF';
$rows1['var valueSuffix'] = 'ºC';
while($rr = mysqli_fetch_assoc($sth)) {
$rows1['data'][] = $rr['TMin'];
}
mysqli_query($con,"SELECT City,Rain FROM Meteo2 where City= '" . $_SESSION["City"] ."' AND Data BETWEEN '" . split($_SESSION["date8"]) ."' AND '" . split($_SESSION["date9"]) ."'order by Date");
$rows2 = array();
$rows2['name'] = 'RAIN';
$rows2['type'] = 'column';
$rows2['color'] = '#4572A7';
$rows2['var valueSuffix'] = 'mm';
$rows2['var yAxis'] = 2;
while($rr = mysqli_fetch_assoc($sth)) {
$rows2['data'][] = $rr['Rain'];
}
$result = array();
array_push($result,$rows2);
array_push($result,$rows1);
array_push($result,$rows);
array_push($result,$dia);
print json_encode($result, JSON_NUMERIC_CHECK);
mysqli_close($con);
?>
When I plot the chart, I can see the line of rain, TMax, TMin, but in the Xaxis by default I have 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15....and what I need is the information of $dia inside categories[]
and when i check the browser I see categories empty...
xAxis: {
categories: []
},
but in the highchart code I have
xAxis: {
categories: ['<?php echo $dia?>']
},
any help please????
Here I show the highcharts code
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>www.meteo4u.com/consultaNouformat.html</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
<?php
$city = $_POST["City"];
session_start();
$_SESSION['City'] = $_POST['City'];
$_SESSION['date8'] = $_POST['date8'];
$_SESSION['date9'] = $_POST['date9'];
?>
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("mysql-highcharts.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Temperatura Maxima, Temperatura Minima i Precipitacio a <?php echo $city ?>',
x: -20 //center
},
xAxis: {
categories: [<?php echo $dia?>]
},
yAxis: [{
labels: {
format: '{value}°C',
style: {
color: '#FF0000'
}
},
title: {
text: 'Temperatura Maxima',
style: {
color: '#FF0000'
}
}
},{title: {
text: 'Temperatura Minima',
style: {
color: '#00FFFF'
}
}
},{labels: {
format: '{value} mm',
style: {
color: '#4572A7'
}
},
title: {
text: 'Precipitacio',
style: {
color: '#4572A7'
}
},opposite: true
}],
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
},
credits:{
text: 'meteo4u.com',
href:'http://meteo4u.com',
itemStyle: {
fontSize: '40px'
}
},
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>
It looks like $dia is an array is an array, containing an entry called 'categories'. I don't think you can somply echo the array variable in your highcharts code, as dia only exists in php on the server. You are returning the categories inside your json object in the 3rd entry of the array
array_push($result,$dia);
This means you have to read the categories out of the returned json in your highcharts code. Your code is hard to follow, but try this:
xAxis: {
categories: json[3]['categories'];
},
However, I am worried about this line:
series: json
The returned json does not just contain series definitions as it contains the categories as well. It may work, but is not very clean code.