i'm having trouble with fullcalendar. im not sure whether it is my php or mysql code. the calendar displays and i can add a new event but the event does not stick to the calendar. the event data does get inserted into the database but again it does not appear on the actual calendar itself.
here is the code i have so far:
index.php
<!DOCTYPE html>
<html>
<head>
<title>FullCalendar</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel='stylesheet' type='text/css' href='css/style.css' />
<link rel='stylesheet' type='text/css' href='css/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='css/jquery-ui-1.8.11.custom.css' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script src='js/fullcalendar.min.js'></script>
<script src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* global variables */
var event_start = $('#event_start');
var event_end = $('#event_end');
var event_type = $('#event_type');
var calendar = $('#calendar');
var form = $('#dialog-form');
var event_id = $('#event_id');
var format = "MM/dd/yyyy HH:mm";
/* button to add events */
$('#add_event_button').button().click(function(){
formOpen('add');
});
/** cleaning function form */
function emptyForm() {
event_start.val("");
event_end.val("");
event_type.val("");
event_id.val("");
}
/* opening form types*/
function formOpen(mode) {
if(mode == 'add') {
/* hide button Delete , Edit and display the Add*/
$('#add').show();
$('#edit').hide();
$("#delete").button("option", "disabled", true);
}
else if(mode == 'edit') {
/* hide the Add button , display the Edit and Delete*/
$('#edit').show();
$('#add').hide();
$("#delete").button("option", "disabled", false);
}
form.dialog('open');
}
/* date time picker */
event_start.datetimepicker({hourGrid: 4, minuteGrid: 10, dateFormat: 'mm/dd/yy'});
event_end.datetimepicker({hourGrid: 4, minuteGrid: 10, dateFormat: 'mm/dd/yy'});
/* initialize full calendar */
calendar.fullCalendar({
firstDay: 1,
height: 500,
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
monthNames: ['January','Feburary','March','April','May','June','July','August','September','October','November','December'],
monthNamesShort: ['Jan.','Feb.','Маr','Apr.','May','Jun','Jul','Aug.','Sept.','Oct.','Nov.','Dec.'],
dayNames: ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturdat"],
dayNamesShort: ["Su","Mo","Tu","We","Th","Fr","Sa"],
buttonText: {
prev: " ◄ ",
next: " ► ",
prevYear: " << ",
nextYear: " >> ",
today: "today",
month: "month",
week: "week",
day: "day"
},
/* time format output before the event name*/
timeFormat: 'H:mm',
/* click event handler for a particular day */
dayClick: function(date, allDay, jsEvent, view) {
var newDate = $.fullCalendar.formatDate(date, format);
event_start.val(newDate);
event_end.val(newDate);
formOpen('add');
},
/* handler for event click */
eventClick: function(calEvent, jsEvent, view) {
event_id.val(calEvent.id);
event_type.val(calEvent.title);
event_start.val($.fullCalendar.formatDate(calEvent.start, format));
event_end.val($.fullCalendar.formatDate(calEvent.end, format));
formOpen('edit');
},
/* record source */
eventSources: [{
url: 'ajax.php',
type: 'POST',
data: {
op: 'source'
},
error: function() {
alert('Error connecting to the data source!');
}
}]
});
/* form handler */
form.dialog({
autoOpen: false,
buttons: [{
id: 'add',
text: 'add',
click: function() {
$.ajax({
type: "POST",
url: "ajax.php",
data: {
start: event_start.val(),
end: event_end.val(),
type: event_type.val(),
op: 'add'
},
success: function(id){
calendar.fullCalendar('renderEvent', {
id: id,
title: event_type.val(),
start: event_start.val(),
end: event_end.val(),
allDay: false
});
}
});
emptyForm();
}
},
{ id: 'edit',
text: 'edit',
click: function() {
$.ajax({
type: "POST",
url: "ajax.php",
data: {
id: event_id.val(),
start: event_start.val(),
end: event_end.val(),
type: event_type.val(),
op: 'edit'
},
success: function(id){
calendar.fullCalendar('refetchEvents');
}
});
$(this).dialog('close');
emptyForm();
}
},
{ id: 'cancel',
text: 'cancel',
click: function() {
$(this).dialog('close');
emptyForm();
}
},
{ id: 'delete',
text: 'delete',
click: function() {
$.ajax({
type: "POST",
url: "ajax.php",
data: {
id: event_id.val(),
op: 'delete'
},
success: function(id){
calendar.fullCalendar('removeEvents', id);
}
});
$(this).dialog('close');
emptyForm();
},
disabled: true
}]
});
});
</script>
</head>
<body>
<div id="calendar"></div>
<button id="add_event_button">Add Event</button>
<div id="dialog-form" title="Событие">
<p class="validateTips"></p>
<form>
<p><label for="event_type">type</label>
<input type="text" id="event_type" name="event_type" value=""></p>
<p><label for="event_start">start</label>
<input type="text" name="event_start" id="event_start"/></p>
<p><label for="event_end">end</label>
<input type="text" name="event_end" id="event_end"/></p>
<input type="hidden" name="event_id" id="event_id" value="">
</form>
</div>
</body>
</html>
ajax.php
<?php
$con=mysqli_connect("localhost","root","","fullcalendar");
$start = $_POST['start'];
$end = $_POST['end'];
$type = $_POST['type'];
$op = $_POST['op'];
$id = $_POST['id'];
switch ($op) {
case 'add':
$sql = 'INSERT INTO events (
start,
end,
type)
VALUES
("' . date("Y-m-d H:i:s", strtotime($start)) . '",
"' . date("Y-m-d H:i:s", strtotime($end)) . '",
"' . $type . '")';
if (mysqli_query($GLOBALS["___mysqli_ston"], $sql)) {
echo ((is_null($___mysqli_res = mysqli_insert_id($GLOBALS["___mysqli_ston"]))) ? false : $___mysqli_res);
}
break;
case 'edit':
$sql = 'UPDATE events SET start = "' . date("Y-m-d H:i:s", strtotime($start)) . '",
end = "' . date("Y-m-d H:i:s", strtotime($end)) . '",
type = "' . $type . '"
WHERE id = "' . $id . '"';
if (mysqli_query($GLOBALS["___mysqli_ston"], $sql)) {
echo $id;
}
break;
case 'source':
$sql = 'SELECT * FROM events';
$result = mysqli_query($GLOBALS["___mysqli_ston"], $sql);
$json = Array();
while ($row = mysqli_fetch_assoc($result)) {
$json[] = array(
'id' => $row['id'],
'title' => $row['type'],
'start' => $row['start'],
'end' => $row['end'],
'allDay' => false
);
}
echo json_encode($json);
break;
case 'delete':
$sql = 'DELETE FROM events WHERE id = "' . $id . '"';
if (mysqli_query($GLOBALS["___mysqli_ston"], $sql)) {
echo $id;
}
break;
}
i'd appreciate it if there could be any constructive input or help with this issue.
Hey guys thanks for the help. I had a look at the ajax like charlietfl said and I got a few errors thrown. They were mainly errors about the database connection but seeing as the events are getting inserted to the table it didn't seem correct. I double checked the syntax of the php and mysql and it turns out I was using a few mysql functions that have been depreciated in the newest version of php. It was recommended I changed it to match the PDO or mysqli structure to see if it would work and it did. Thanks for everybody's inputs i really appreciate it.
Related
I had posted : passsing data to https by JSON using JSONP ,and tried to change the highchart by call back to JSONP but still I don't get any result. Could any one tell me what is the problem (perhaps I think the way, which I callback is wrong.)?
data.php:
<?php header("content-type: application/json");
$servername = "xxxxxx";
$username = "xxxxxx";
$password = "xxxxxx";
$dbname = "xxxxxx";
$con = mysql_connect($servername,$username,$password,$dbname);
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("xxxxxxxxxx", $con);
if (isset($_GET["dateparam"])) {
$sql = mysql_query("SELECT timestamp_value, User_Logins FROM foot_traffic WHERE timestamp_value LIKE '".$_GET["dateparam"]."%'");
} else {
$sql = mysql_query("SELECT timestamp_value, User_Logins FROM foot_traffic WHERE timestamp_value LIKE '2013-02-01%'");
}
$result['name'] = 'User_Logins over Time Period';
while($r = mysql_fetch_array($sql)) {
$datetime = $r['timestamp_value'];
$result['category'][] = $datetime;
$result['data'][] = $r['User_Logins'];
}
echo $_GET['callback']. '('. json_encode($result) . ')';
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>
file.php:
<html>
<head>
<script type="text/javascript">
var hey;
$(document).ready(function() {
hey = {
chart: {
renderTo: 'container1',
type: 'area',
borderColor: "#3366ff",
borderWidth:5,
zoomType : 'x'
},
title: {
text: 'All User_Logins of your All Organizations '
},
subtitle: {
text: ' '
},
credits:{
enabled:false
},
xAxis: {
categories: [],
labels: {
align: 'center',
x: -3,
y: 20,
formatter: function(){
return Highcharts.dateFormat('%l%p',Date.parse(this.value +' UTC'));
}
}
},
yAxis: {
title: {
text: ''
}
},
tooltip: {
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderRadius: 10,
borderWidth: 3
},
// Enable for both axes
tooltip: {
borderWidth: 0,
backgroundColor: "rgba(255,255,255,0)",
borderRadius: 0,
shadow: false,
useHTML: true,
percentageDecimals: 2,
backgroundColor: "rgba(255,255,255,1)",
formatter: function () {
return '<div class="tooltip">' + this.point.name + '<br />' + '<b>' +
Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' +
Highcharts.numberFormat(this.percentage, 2) + '%]</b></div>';
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
type: 'area',
name: '',
data: []
}]
}
$.getJSON("data.php?callback=?", function(json){
hey.xAxis.categories = json['category'];
hey.series[0].name = json['name'];
hey.series[0].data = json['data'];
chart = new Highcharts.Chart(hey);
});
});
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: "yy-mm-dd",
showOn: "button",
buttonImage: "calendar.gif",
buttonImageOnly: true,
onSelect: function(dateText, inst) {
$.getJSON("data.php?dateparam?callback=?"+dateText, function(json){
hey.xAxis.categories = json['category'];
hey.series[0].name = json['name'];
hey.series[0].data = json['data'];
chart = new Highcharts.Chart(hey);
});
}
});
});
</script>
</head>
<body>
<!--date picker-->
<input type="text" id="datepicker" />
<!-- highchart container-->
<div id="container1" class="analysis" style=" margin: 0 auto">
</div>
</body>
</html>
I'm using full calendar js and I am able to connect the events created into the database using phpmyadmin however it does not update the database. Here is the codes:
<link href='css/fullcalendar.css' rel='stylesheet' />
<script src='js/moment.min.js'></script>
<script src='js/jquery.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: "calendarevents.php",
// Convert the allDay from string to boolean
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
var url = prompt('Type Event url, if exits:');
if (title) {
var start = $.fullCalendar.moment(start).format();
var end = $.fullCalendar.moment(end).format();
$.ajax({
url: 'calendaraddevents.php',
data: 'title='+ title+'&start='+ start +'&end='+ end +'&url='+ url ,
type: "POST",
success: function(json) {
alert('Added Successfully');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function(event, delta) {
var start = $.fullCalendar.moment(start).format();
var end = $.fullCalendar.moment(end).format();
$.ajax({
url: 'calendarupdateevents.php',
data: 'title=' + event.title + '&start='+ start +'&end=' + end + '&id=' + event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
},
eventResize: function(event) {
var start = $.fullCalendar.moment(start).format();
var end = $.fullCalendar.moment(end).format();
$.ajax({
url: 'calendarupdateevents.php',
data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
}
});
});
</script>
Here is the codes for calendarupdateevents.php
<?php
/* Values received via ajax */
$id = $_POST['id'];
$title = $_POST['title'];
$start = $_POST['start'];
$end = $_POST['end'];
// connection to the database
try {
$bdd = new PDO('mysql:host=localhost;dbname=ththy', 'calendar', '1234');
} catch(Exception $e) {
exit('Unable to connect to database.');
}
// update the records
$sql = "UPDATE evenement SET title=?, start=?, end=? WHERE id=?";
$q = $bdd->prepare($sql);
$q->execute();
?>
As halfer said, you aren't passing any parameters to your query.
Try this :
<?php
/* Values received via ajax */
$values = array(
'id' => int($_POST['id']),
'title' => htmlentities($_POST['title'], ENT_QUOTES | ENT_IGNORE, "UTF-8"),
'start' => htmlentities($_POST['start'], ENT_QUOTES | ENT_IGNORE, "UTF-8"),
'end' => htmlentities($_POST['end'], ENT_QUOTES | ENT_IGNORE, "UTF-8")
);
// connection to the database
try {
$bdd = new PDO('mysql:host=localhost;dbname=ththy', 'calendar', '1234');
} catch(Exception $e) {
exit('Unable to connect to database.');
}
// update the records
$sql = "UPDATE evenement SET title=?, start=?, end=? WHERE id=?";
$q = $bdd->prepare($sql);
$q->execute($values);
?>
The example is not returning the correct limits of the event. To return the event start-end moments, I suggest:
var start = event.start.format();
var end = event.end.format();
I have already implemented full calenedar in php. It works fine . I have called the data from database and shown it in the fullcalendar.
Now I have implemented a dropdown. I have used ajax to call controller that calls my another view.
The controller fetches the data based on the dropdown selection. By default it fetches all the data.
But i am not getting the calendar after ajax call. I have called the script to load full calendar in ajax view.
When I echo in the ajax view page, i get the required data. But I am not able to display the full calendar after the ajax call.
As suggested i have give the code.
My first view:
<link rel="stylesheet" href="http://localhost/drive_training/addons/shared_addons/modules/schedule/css/fullcalendar.print.css" rel="stylesheet" media="print" />
<link rel="stylesheet" href="http://localhost/drive_training/addons/shared_addons/modules/schedule/css/fullcalendar.css" rel="stylesheet" />
<div class="content">
<div id='input'>
<?php echo form_dropdown("package_id", $packagelist, "",'id="packageid"'); ?>
</div>
<div id='calendar'></div>
</div>
<style>
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#packageid').change(function() { //any select change on the dropdown with id country trigger this code
var packageid = $('#packageid').val();
alert(packageid);
$.ajax({
type: "POST",
url: "<?php echo base_url('admin/schedule/scheduledetails/hel') ?>", //here we are calling our user controller and get_cities method with the country_id
data: {'packageid': packageid,},
success: function(data)
{
},
error: function() {
alert('failed');
}
});
});
});
</script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
displayEventEnd: {
month: true,
basicWeek: true,
"default": true
},
defaultDate: '2014-11-12',
//editable: true,
eventLimit: true, // allow "more" link when too many events
events:
"<?php echo base_url('admin/schedule/scheduledetails/json');?>",
});
});
</script>
My controller hel function
public function hel()
{
$packageid = 9;//$_POST['packageid'];
// echo "hello";
$coursedetails = $this->course_m->where('course_id',$packageid)->get_all();
// echo "<pre>";print_r($coursedetails); echo "</pre>";
$scheduledetails = array();
foreach ($coursedetails as $details) {
$packagedays = $this->course_m->packagedays($details->id);
$presentdays = $this->attendance_m->count_attendance($details->id);
$startdate = $details->start_date;
$starttime = $details->start_time;
$endtime = $details->end_time;
$postponedays = 0;
//$enddate = date('Y-m-d', strtotime($details->start_date . ' + ' . $packagedays . ' days'));
$postponedays = $this->postpone_m->count_postponedays($details->id);
if ($postponedays == 0) {
$enddate = date('Y-m-d', strtotime($details->start_date . ' + ' . $packagedays . ' days'));
} else {
$add = $postponedays + $packagedays;
$enddate = date('Y-m-d', strtotime($details->start_date . ' + ' . $add . ' days'));
$postponefrom = $this->postpone_m->postponedate($details->id)->postponefrom;
$postponeto = $this->postpone_m->postponedate($details->id)->postponeto;
//echo $postponeto;die;
}
$temp = array
(
array
(
'course_id' => $details->id, //it means acutal course id
'title' => $this->training_package_m->get($details->course_id)->training_code, //course_id means packageid
'start' => $startdate . 'T' . $starttime,
'end' => $enddate . 'T' . $endtime,
'description' => 'Hello gyys how are you all',
'starttime' => $starttime,
'endtime' => $endtime,
// 'postponefrom' => $postponefrom,
//'postponeto' => $postponeto,
'postponeddays' => $postponedays,
'packagedays' => $packagedays,
),
);
$scheduledetails = array_merge($scheduledetails, $temp);
}
// echo json_encode($scheduledetails);
$data['jsondata'] = json_encode($scheduledetails);
//print_r($data['jsondata']);die;
$this->template
->title($this->module_details['name'])
->set_layout(false)
->build('admin/fullcalendarfiltered',$data);
}
My view to load through controller. i.e fullcalendarfiltered view file
<style>
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
<div>Test Ajax</div>
<div id='calendar'></div>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
displayEventEnd: {
month: true,
basicWeek: true,
"default": true
},
defaultDate: '2014-11-22',
//editable: true,
eventLimit: true, // allow "more" link when too many events
events: "<?= $jsondata?>",
});
});
</script>
The view file displays test ajax only. when i echo the json data in view file it is echoed. But the problem is that it wont load in calendar. Infact the calendar is not displayed in fullcalendarfiltered view file
I am implementing jquery full calendar in my PHP website. when i am clicking on any date of calendar it is giving me a prompt. There is a input field asking for event title. I want to change this input field and want a drop down list in place of input field. Is it possible? This is the calendar that i am using http://fullcalendar.io/
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '<?php echo date("Y-m-d"); ?>',
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Please fill schedule title & add fees');
var eventData;
if (title) {
eventData = {
title: title,
url: 'javascript:fee_add("' + title + '","' + start +'");',
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
<?php
if($mysql->rowCount($query) > 0)
{
$rows = $mysql->fetchArray($query);
foreach($rows as $row)
{
if($row['date_time'] !='0000-00-00 00:00:00')
{
$date1 = date_create_from_format('Y-m-d H:i:s', $row['date_time']);
$date = date('Y-m-d', $date1->getTimestamp());
$time = date('H:i', $date1->getTimestamp());
$time_hr = date('H:i:s', $date1->getTimestamp());
}
?>
{
title: '<?php echo $row["fee_title"]; ?>',
url: 'javascript:fee_edit(<?php echo $row["id"]; ?>,"<?php echo $row["fee_title"]; ?>","<?php echo $date . " " . $time_hr; ?>");',
start: '<?php echo $date; ?>T<?php echo $time ?>'
},
<?php
}
}
?>
]
});
});
</script>
</div>
<div id='calendar'></div>
This is the code i am implementing and just want dropdown list in place of title
Thanx in advance
Prompt is a built is js component. You shouldn't attempt to override it. Try using a custom dialog/modal. jQuery UI has a great dialog component that would allow you to utilize a select element or any other html you see fit.
My highcharts chart is showing like this now:
http://img90.imageshack.us/img90/3892/chart1p.png
But I need it to look like this:
http://img545.imageshack.us/img545/1333/chart2p.png
Currently its not showing empty values by hours.
My code:
index.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(function () {
var options = {
chart: {
renderTo: 'chart',
defaultSeriesType: 'spline'
},
title: {
text: 'Earnings Today',
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
tickInterval: 3600 * 1000,
tickWidth: 0,
labels: {
align: 'center',
formatter: function () {
return Highcharts.dateFormat('%l%p', this.value);
}
},
},
yAxis: {
title: {
text: 'Earnings'
},
min: 0,
tickInterval: 2,
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
tooltip: {
valueDecimals: 2,
crosshairs: true,
formatter: function () {
return '$' + this.y;
}
},
series: [{
name: 'Earnings Today, USD'
}
]
}
jQuery.get('data_today.php', null, function (tsv) {
var lines = [];
earnings = [];
try {
tsv = tsv.split(/\n/g);
jQuery.each(tsv, function (i, line) {
line = line.split(/\t/);
date = Date.parse(line[0] + ' UTC');
val = line[1];
earnings.push([date, parseFloat(line[1].replace(',', '.'), 10)]);
});
} catch (e) {}
options.series[0].data = earnings;
chart = new Highcharts.Chart(options);
});
});
</script>
data_today.php
<?php
session_start();
require_once('config.php');
require_once('config_mysql.php');
$link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
if (!$link)
{
die('Failed to connect to server: ' . mysql_error());
}
$db = mysql_select_db(DB_DATABASE);
if (!$db)
{
die("Unable to select database");
}
$result = mysql_query("SELECT earn_date,SUM(amount) as val FROM user_earnings WHERE user_id='$USER_ID' AND DATE(earn_date) = DATE(NOW()) GROUP BY earn_date");
if ($result)
{
while ($row = mysql_fetch_array($result))
{
$d = date("l, F, j, Y G:i:s", strtotime($row["earn_date"]));
echo $d . "\t" . $row['val'] . "\n";
}
}
else
{
die(mysql_error());
}
mysql_close($link);
?>
So, (if its not enough clear yet) I need this code to show whole day and show also empty values by hour.
I have almost zero experience of highcharts and javascript, so I need some help with this :)
Also looking for alternative way for running MySql query inside index.php so I dont need data_today.php
Thanks
Set the xAxis as below
xAxis: {
ordinal: false
}
For empty spaces you should have null values. Then set connectNulls: false.
Example