We Keep Coding

Creating multiple series in chart

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

Highcharts dynamic graph with database value

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>

highchart.js is not working. error 13

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>

Dynamically updated data with highstock

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?

Highcharts xaxis is off by several hours

I'm pulling values from a MySQL database using PHP, and attempting to plot them using Highcharts. The problem I'm finding is the xaxis values seems to be off by 4 hours. Searching through past threads, some people place the useUTC: false in the global chart options, but it did not seem to work for me.
global:{
useUTC: false
}
Here is the code I'm using to set up the chart. I'm a javascript newbie, so it's very possible I did something stupid in here. Any suggestions?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Temperature Data from XBee</title>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Wireless Sensor Data: Temperature (F)',
x: -20 //center
},
global: {
useUTC: false
},
yAxis: {
title: {
text: 'temperature'
},
type: 'double',
min: 0,
},
xAxis: {
title: {
text: 'time'
},
type: 'datetime'
},
series: [{
name: 'Temperature',
data: []
}]
}
$.getJSON("data.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
});
</script>
<script src="js/highcharts.js"></script>
<script src="js/themes/grid-light.js"></script>
</head>
<body>
<div id="container" style="min-width: 800px; height: 800px; margin: 0 auto"></div>
</body>
</html>
Here is my PHP code that queries the database and puts the data into the JSON format.
<?php
$con = mysql_connect("localhost","root","raspberry");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("xbee", $con);
$result = mysql_query("SELECT time, temperature FROM data WHERE time >= DATE_SUB(NOW(), INTERVAL 1 HOUR)");
$rows = array();
while($r = mysql_fetch_array($result)) {
extract($r);
$time = strtotime($r[0]);
$time *=1000;
$row[0] = $time;
$row[1] = $r[1];
array_push($rows,$row);
}
print json_encode($rows, JSON_NUMERIC_CHECK);
mysql_close($con);
?>
This is what my JSON format looks like.
[[1414172722000,73.4],[1414172727000,73.4],[1414172732000,73.4],[1414172737000,75.2],[1414172742000,75.2],[1414172747000,75.2],[1414172753000,73.4],[1414172758000,75.2],[1414172763000,73.4],[1414172768000,75.2],[1414172773000,75.2],[1414172778000,75.2],[1414172783000,75.2],[1414172788000,73.4],[1414172793000,73.4],[1414172798000,75.2],[1414172803000,75.2],[1414172809000,75.2],[1414172814000,75.2],[1414172819000,75.2],[1414172824000,73.4],[1414172829000,75.2],[1414172834000,75.2],[1414172839000,75.2],[1414172844000,75.2],[1414172849000,75.2],[1414172854000,75.2],[1414172860000,75.2],[1414172865000,75.2],[1414172870000,75.2],[1414172875000,75.2],[1414172880000,75.2],[1414172885000,75.2],[1414172890000,75.2],[1414172895000,75.2],[1414172900000,75.2],[1414172905000,73.4],[1414172910000,75.2],[1414172916000,75.2],[1414172921000,75.2],[1414172926000,75.2],[1414172931000,75.2],[1414172936000,75.2],[1414172941000,75.2],[1414172946000,75.2],[1414172951000,75.2],[1414172956000,75.2],[1414172961000,75.2],[1414172966000,73.4],[1414172972000,75.2],[1414172977000,75.2],[1414172982000,73.4],[1414172987000,75.2],[1414172992000,75.2],[1414172997000,73.4],[1414173002000,75.2],[1414173007000,75.2],[1414173012000,75.2],[1414173017000,75.2],[1414173022000,75.2],[1414173028000,75.2],[1414173033000,75.2],[1414173038000,75.2],[1414173043000,75.2],[1414173048000,75.2],[1414173053000,75.2],[1414173058000,75.2],[1414173063000,71.6],[1414173068000,75.2],[1414173073000,75.2],[1414173079000,75.2],[1414173084000,75.2],[1414173089000,75.2],[1414173094000,75.2],[1414173099000,75.2],[1414173104000,75.2],[1414173109000,75.2],[1414173114000,75.2],[1414173119000,75.2],[1414173124000,75.2],[1414173129000,75.2],[1414173135000,75.2],[1414173140000,75.2],[1414173145000,75.2],[1414173150000,75.2],[1414173155000,75.2],[1414173160000,75.2],[1414173165000,75.2],[1414173170000,75.2],[1414173175000,75.2],[1414173180000,75.2],[1414173185000,75.2],[1414173191000,75.2],[1414173196000,75.2],[1414173201000,75.2],[1414173206000,75.2],[1414173211000,75.2],[1414173216000,75.2],[1414173221000,75.2],[1414173226000,75.2],[1414173231000,75.2],[1414173236000,75.2],[1414173241000,75.2],[1414173247000,75.2],[1414173252000,75.2],[1414173257000,75.2],[1414173262000,75.2],[1414173267000,75.2],[1414173272000,75.2],[1414173277000,75.2],[1414173282000,75.2],[1414173287000,75.2],[1414173292000,75.2],[1414173298000,75.2],[1414173303000,75.2],[1414173308000,75.2],[1414173313000,75.2],[1414173318000,75.2],[1414173323000,75.2],[1414173328000,75.2],[1414173333000,75.2],[1414173338000,75.2],[1414173343000,75.2],[1414173348000,75.2],[1414173354000,75.2],[1414173359000,75.2],[1414173364000,75.2],[1414173369000,75.2],[1414173374000,75.2],[1414173379000,75.2],[1414173384000,75.2],[1414173389000,75.2],[1414173394000,75.2],[1414173399000,75.2],[1414173404000,75.2],[1414173410000,75.2],[1414173415000,75.2],[1414173420000,75.2],[1414173425000,75.2],[1414173430000,75.2],[1414173435000,75.2],[1414173440000,75.2],[1414173445000,75.2],[1414173450000,75.2],[1414173455000,73.4],[1414173461000,75.2],[1414173466000,75.2],[1414173471000,75.2],[1414173476000,75.2],[1414173481000,75.2],[1414173486000,75.2],[1414173491000,75.2],[1414173496000,75.2],[1414173501000,73.4],[1414173506000,75.2],[1414173511000,75.2],[1414173517000,73.4],[1414173522000,75.2],[1414173527000,75.2],[1414173532000,75.2],[1414173537000,75.2],[1414173542000,75.2],[1414173547000,75.2],[1414173552000,73.4],[1414173557000,75.2],[1414173562000,75.2],[1414173567000,75.2],[1414173573000,75.2],[1414173578000,75.2],[1414173583000,75.2],[1414173590000,32],[1414173651000,75.2],[1414173711000,75.2],[1414173771000,73.4],[1414173831000,75.2],[1414173891000,73.4],[1414173951000,75.2],[1414174011000,73.4],[1414174071000,75.2],[1414174131000,73.4],[1414174191000,75.2],[1414174251000,71.6],[1414174311000,73.4],[1414174372000,73.4],[1414174432000,73.4],[1414174492000,73.4],[1414174552000,73.4],[1414174612000,73.4],[1414174672000,73.4],[1414174732000,73.4],[1414174792000,73.4],[1414174852000,73.4],[1414174912000,73.4],[1414174972000,73.4],[1414175032000,73.4],[1414175093000,73.4],[1414175153000,73.4],[1414175213000,73.4],[1414175273000,73.4],[1414175333000,73.4],[1414175393000,73.4],[1414175453000,73.4],[1414175513000,73.4],[1414175573000,73.4],[1414175633000,73.4],[1414175693000,73.4],[1414175753000,73.4],[1414175814000,73.4],[1414175874000,73.4],[1414175934000,73.4],[1414175994000,73.4],[1414176054000,73.4],[1414176114000,73.4],[1414176174000,73.4],[1414176234000,75.2],[1414176294000,75.2]]

I found a solution, not sure if this is the most elegant, but it is producing the correct results now. It looks like when using the strtotime conversion in PHP, it was using the default GMT timezone. In the PHP script, I added the date_default_time_set('UTC') and it works. Hopefully this will help someone in the future.
<?php
$con = mysql_connect("localhost","root","raspberry");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("xbee", $con);
$result = mysql_query("SELECT time, temperature FROM data WHERE time >= DATE_SUB(NOW(), INTERVAL 1 HOUR)");
$rows = array();
while($r = mysql_fetch_array($result)) {
date_default_timezone_set('UTC');
extract($r);
$time = strtotime($r[0]);
$time *=1000;
$row[0] = $time;
$row[1] = $r[1];
array_push($rows,$row);
}
print json_encode($rows, JSON_NUMERIC_CHECK);
mysql_close($con);
?>