I am trying get Fullcalendar to take information from a mysql table and enter the informtion into the calendar. The calendar appears, but none of the information from the table is on the calendar.
Here is my code.
calendar.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type='text/css'>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#loading {
position: absolute;
top: 5px;
right: 5px;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.css' />
<script type='text/javascript' src='jquery/jquery.js'></script>
<script type='text/javascript' src='jquery/ui.core.js'></script>
<script type='text/javascript' src='jquery/ui.draggable.js'></script>
<script type='text/javascript' src='fullcalendar/fullcalendar.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
editable: true,
events: "json-events.php",
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(should probably update your database)');
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
});
</script>
</head>
<body>
<div id='loading' style='display:none'>loading...</div>
<div id='calendar'></div>
<p>json_events.php needs to be running in the same directory.</p>
</body>
</html>
json_events.php
<?php
include("dbstuff.inc");
$conn = mysql_connect($host, $user, $pass) or die(mysql_error());
mysql_select_db($database, $conn) or die(mysql_error());
$sql= "SELECT id, title, description, url, email, Stime, Etime, eventDate, DATE_FORMAT(eventDate, '%Y-%m-%dT%H:%i' ) AS startDate
FROM events
ORDER BY startDate DESC";
$check = mysql_query($sql) or die(mysql_error());
$events = array();
while ($row = mysql_fetch_assoc($check)) {
$eventArray['id'] = $row['id'];
$eventArray['title'] = $row['title'];
$eventArray['description'] = $row['description'];
$eventArray['url'] = $row['url'];
$eventArray['email'] = $row['email'];
$eventArray['startTime'] = $row['Stime'];
$eventArray['EndTime'] = $row['Etime'];
$eventArray['title'] = $row['Stime'] . " " . $row['title'];
$eventArray['start'] = $row['startDate'];
$eventsArray['allDay'] = "";
$events[] = $eventArray;
}
echo json_encode($events);
?>
This is the data from MySQL file
[
{
"id": "1",
"title": "07:00:00 test1",
"description": "werewr",
"url": "http://www.nba.com",
"email": "someone#host.com",
"startTime": "07:00:00",
"EndTime": "09:00:00",
"start": "2013-04-22T00:00"
},
{
"id": "2",
"title": "11:00:00 test2",
"description": "hello",
"url": "http://www.nba.com",
"email": "someone#host.com",
"startTime": "11:00:00",
"EndTime": "13:00:00",
"start": "2013-04-15T00:00"
}
]
you have events: "json-events.php" and your php file it's json_events.php
Related
I have had a look at my chart issue and I think the problem lies in the Highstock code. I have 2 other charts running the same php code and I have only changed from highchart to highstock.
I am trying to add a range selector in my chart. The code for that works in terms of showing the zoom and selector buttons but the date is now showing incorrectly.
I am drawing the data from an online MySQL data base so I its hard to run a demo for you.The timestamp format has worked in my other charts as mentioned.
This first code shows the date correctly
<?php
// 1-test.php
$servername = "localhost";
$dbname = "";
$username = "";
$password = "";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, value1, reading_time FROM Sensor order by reading_time desc limit 40";
$result = $conn->query($sql);
while ($data = $result->fetch_assoc()){
$sensor_data[] = $data;
}
$readings_time = array_column($sensor_data, 'reading_time');
$i = 0;
foreach ($readings_time as $reading){
$readings_time[$i] = date("d-M H:i", strtotime("$reading + 16 hours"));
$i += 1;
}
$value1 = json_encode(array_reverse(array_column($sensor_data, 'value1')), JSON_NUMERIC_CHECK);
$reading_time = json_encode(array_reverse($readings_time), JSON_NUMERIC_CHECK);
/*echo $value1;
echo $reading_time;*/
$result->free();
$conn->close();
?>
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="30">
<link rel="icon" type="image/png" href="favicon.png">
<script src="https://code.highcharts.com/highcharts.js"></script>
<style>
body {
min-width: 310px;
max-width: 1500px;
height: 500px;
margin: 0 auto;
}
h2 {
font-family: Arial;
font-size: 2.5rem;
text-align: center;
}
</style>
<body>
<h2>Test page 2</h2>
<div id="chart-temperature" class="container"></div>
</div>
<script>
var value1 = <?php echo $value1; ?>;
var reading_time = <?php echo $reading_time; ?>;
var chartT = new Highcharts.Chart({
chart: { renderTo : 'chart-temperature',
type: 'spline'
},
title: { text: 'Roof Temperature' },
series: [{
showInLegend: false,
data: value1
}],
plotOptions: {
spline: { animation: false,
dataLabels: { enabled: true }
},
series: { color: '#059e8a' }
},
xAxis: {
type: 'datetime',
categories: reading_time
},
yAxis: {
title: { text: 'Temp (C)' }
},
credits: { enabled: false }
});
</script>
</body>
</html>
Then this code shows the date as Thursday,Jan 1, 00:00:00:001
<?php
$servername = "localhost";
$dbname = "";
$username = "";
$password = "";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, value1, reading_time FROM Sensor order by reading_time desc limit 40";
$result = $conn->query($sql);
while ($data = $result->fetch_assoc()){
$sensor_data[] = $data;
}
$readings_time = array_column($sensor_data, 'reading_time');
$i = 0;
foreach ($readings_time as $reading){
$readings_time[$i] = date("d-M H:i", strtotime("$reading + 16 hours"));
$i += 1;
}
$value1 = json_encode(array_reverse(array_column($sensor_data, 'value1')), JSON_NUMERIC_CHECK);
$reading_time = json_encode(array_reverse($readings_time), JSON_NUMERIC_CHECK);
/*echo $value1;
echo $reading_time;*/
$result->free();
$conn->close();
?>
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="30">
<link rel="icon" type="image/png" href="favicon.png">
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<style>
body {
min-width: 310px;
max-width: 1500px;
height: 500px;
margin: 0 auto;
}
h2 {
font-family: Arial;
font-size: 2.5rem;
text-align: center;
}
</style>
<body>
<h2>Test Page</h2>
<div id="chart-temperature" class="container"></div>
<script>
var value1 = <?php echo $value1; ?>;
var reading_time = <?php echo $reading_time; ?>;
var chartH = new Highcharts.stockChart({
chart: { renderTo : 'chart-temperature',
type: 'spline'
},
title: { text: 'Roof Temperature' },
series: [{
showInLegend: false,
data: value1
}],
plotOptions: {
spline: { animation: false,
dataLabels: { enabled: true }
},
series: { color: '#059e8a' }
},
rangeSelector: {
buttons: [{
type: 'day',
count: 3,
text: '3d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 3
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { second: '%H:%M:%S' },
categories: reading_time
},
yAxis: {
title: { text: 'Temp (C)' }
},
credits: { enabled: false }
});
</script>
</body>
</html>
the first screen shot is working. The second is the wrong date,
Any thoughts on how to change the date
The difference between the charts results from the fact that the second chart is a stock chart, which doesn't support categories on a x-axis. You need to use data in the [x, y] format.
var value1 = [18.10, 14.5];
var reading_time = ['2021-08-22 15:00:53', '2021-08-23 15:00:53'];
var seriesData = value1.map(function(val, index) {
return [new Date(reading_time[index]).getTime(), val];
});
Live demo: http://jsfiddle.net/BlackLabel/xLh7y8d6/
API Reference: https://api.highcharts.com/highcharts/xAxis.type
I want to dynamically create an organization chart from MySQL data
As this link I have two files data.php and index.php
in the data.php I have read MySQL data and in index.php I have accessed the data from data.php file
following in data.php file
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "highcharts";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM org_chart";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$json = [];
while($row = $result->fetch_assoc()) {
//echo "id: " . $row["id"]. " - Name: " . $row["name"]. " " . $row["amount"]. "<br>";
$json[]=[ (string)$row["parent"] , (string)$row["child"]];
}
echo json_encode($json);
} else {
echo "0 results";
}
$conn->close();
?>
following is above php file result
[["meraj","azim"],["meraj","masoma"],["meraj","jamal"],["mraj","zainab"],["azim","ajmal"],
["azim","omid"]]
and following is my index file which is to show the org chart, but it is not showing
any help please
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/organization.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<style>
.highcharts-figure, .highcharts-data-table table {
min-width: 360px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
</style>
</head>
<body>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
<script type="text/javascript">
$(document).ready(function () {
var options = {
chart: {
height: 600,
inverted: true
},
title: {
text: 'Highcharts Org Chart'
},
accessibility: {
point: {
descriptionFormatter: function (point) {
var nodeName = point.toNode.name,
nodeId = point.toNode.id,
nodeDesc = nodeName === nodeId ? nodeName : nodeName + ', ' + nodeId,
parentDesc = point.fromNode.id;
return point.index + '. ' + nodeDesc + ', reports to ' + parentDesc + '.';
}
}
},
series: [{
type: 'organization',
data: [],
}],
};
$.getJSON("data.php" , function (data) {
options.series[0].data = data;
var chart = new Highcharts.chart('container', options);
});
});
</script>
</body>
</html>
I have recently started working on Highchart. I dont have indepth knowledge. But I am still trying my level best. I have tried few codes, but I didn't get any results. The browser console is not loading anything and it is showing blank. Can you please help me in pointing out what to do next. I tried my level best. Please me out.
Here is my code:
Database Coding: php.data
<?php
//open connection to mysql db
$connection = mysqli_connect("localhost","root","root","demo") or die("Error " . mysqli_error($connection));
//fetch table rows from mysql db
$sql = "select * from project_requests";
$result = mysqli_query($connection, $sql) or die("Error in Selecting " . mysqli_error($connection));
//close the db connection
mysqli_close($connection);
?>
index.php
<!DOCTYPE HTML>
<?php
include_once 'data.php';
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Brands',
colorByPoint: true,
data: [
<?php
//$sql = mysqli_query("select * from project_requests")
while($res=mysql_fetch_array($sql)){
?>
['<?php echo $res['month']; ?>', 45.0],
<?php
}
?>
]
}]
});
});
</script>
</head>
<body>
<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; max-width: 600px; margin: 0 auto"></div>
</body>
</html>
MY sql: Database Snapshot
Schema:: Demo Table:: project_requests
I want to use my database data in series
my table “mob” is something like this :
![my table named "mob"][1]
Icost data in not real
And my code is like this :
<?php
include '../../class/jdf.php';
require_once "../../db.php";
$db = new db();
$query_time = "SELECT DISTINCT iDate FROM mob WHERE 1 ";
$datashow = $db->get_arr($query_time);
$time = array();
foreach ($datashow as $key => $row) {
$format = ' Y/m/d ';
$time[] = jdate($format, $row['iDate']);
}
$query_cost = "SELECT * FROM mob WHERE 1 ";
$data = $db->get_arr($query_cost);
$datamin = $db->get_field('mob','MIN(iCost)','1');
$datamin = $datamin -100;
$datamax = $db->get_field('mob','MAX(iCost)','1');
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script src="../../js/jquery-1.9.1.min.js"></script>
<script src="../../js/highcharts.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
Highcharts.setOptions({
lang: {
numericSymbols: null
},
});
$(function() {
$('#container').highcharts({
chart:
{
type: 'column'
},
title: {
text: 'my chart '
},
subtitle: {
text: 'mob'
},
xAxis: {
categories: [
<?php
foreach ($time as $value) {
echo "'" . $value . "',";
}
?>
]
},
yAxis: {
min :<?php echo $datamin ?>,
max :<?php echo $datamax ?>,
title: {
text: 'cost'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: []
});
});
</script>
</head>
<body>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
What should I write in series to have a chart like this
![my chart sample is like this][2]
// [1]: http://i.stack.imgur.com/WBJm5.jpg
// [2]: http://i.stack.imgur.com/DYZjm.jpg
Help me please .
Thank you
In your php, prepare correct array (according to avascript structure) and use json_encode(). In javasctrip call $.getJSON(), get data and use in the highcharts.
More information about preprocessing data, here
I try to generate highcharts graphics. If I select a city and pass it as $_POST["City"] it doesn't build the arrays with the data (TMax, TMin) when it consults to my basedate mysql. If I choose directly the city it generates correctly. I show you my code. First the code I have inside html file.
<form action="highcharts.php" method="POST">
<b>City:</b> <select name="City">
<option>London</option>^M
<option>Paris</option>^M
</select><br><br>
<button type="submit">Show Graphic</button><br>
</form>
Here comes the code of highcharts.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("mysql-highcharts.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'TMax-TMin',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Temperature (ºC)'
},
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>
And at the end, the code consulting to base-date mysql-highcharts.php
<?php
$con = mysqli_connect("xxxxx","xxxx","xxxx","xxx");
if (!$con) {
die('Could not connect: ' . mysqli_error());
}
$sth = mysqli_query($con,"SELECT City,TMax FROM Meteo2 where City= '" . $_POST["City"] ."' order by Data");
$rows = array();
$rows['name'] = 'TMAX';
while($r = mysqli_fetch_array($sth)) {
$rows['data'][] = $r['TMax'];
}
$sth = mysqli_query($con,"SELECT City,TMin FROM Meteo2 where City= '" . $_POST["City"] ."' order by Data");
$rows1 = array();
$rows1['name'] = 'TMIN';
while($rr = mysqli_fetch_assoc($sth)) {
$rows1['data'][] = $rr['TMin'];
}
$result = array();
array_push($result,$rows);
array_push($result,$rows1);
print json_encode($result, JSON_NUMERIC_CHECK);
mysqli_close($con);
?>
Any help please?
<select name="City">
<option value="London">London</option>
<option value="Paris">Paris</option>
</select>
value attribut is missing in <select> it may cause blank $_POST to mysql-highcharts.php
Edit
Ok, Due to action="highcharts.php", $_POST['City'] will be accessible to highcharts.php
Add
<?php
session_start();
$_SESSION['city'] = $_POST['City'];
?>
To highcharts.php And
<?php
session_start();
$con = mysqli_connect("xxxxx","xxxx","xxxx","xxx");
if (!$con) {
die('Could not connect: ' . mysqli_error());
}
$sth = mysqli_query($con,"SELECT City,TMax FROM Meteo2 where City= '" . $_SESSION['city'] ."' order by Data");
$rows = array();
$rows['name'] = 'TMAX';
while($r = mysqli_fetch_array($sth)) {
$rows['data'][] = $r['TMax'];
}
$sth = mysqli_query($con,"SELECT City,TMin FROM Meteo2 where City= '" .$_SESSION['city'] ."' order by Data");
$rows1 = array();
$rows1['name'] = 'TMIN';
while($rr = mysqli_fetch_assoc($sth)) {
$rows1['data'][] = $rr['TMin'];
}
$result = array();
array_push($result,$rows);
array_push($result,$rows1);
print json_encode($result, JSON_NUMERIC_CHECK);
mysqli_close($con);
?>