Develop Reference

how to make a chart with foreach time

I'm trying to make a chart with a time of my database, but I can't do that chartjs "read me" my data.
I try this with Laravel and ChartJS. I make other chart with this way, my problem is only to make charts with Datetime and Times.
<script type="text/javascript">
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: [
#foreach ($ambientes as $key => $value)
'{{ $value->mes }}',
#endforeach
],
datasets: [
{
label: "Tiempo de indisponibilidad",
backgroundColor: "red",
data: [
#foreach ($ambientes as $key => $value)
'{{ $value->tiempo }}',
#endforeach
]
}
]
},
options: {
scales: {
yAxes: [{
type: 'time',
time: {
displayFormats: {
quarter: 'h:mm'
}
}
}]
},
}
});
</script>

First of all declare two array for label and data and push values into array
/*Declare array*/
#php $label=array(); $data=array(); #endphp
/*push label and values into array*/
#foreach($ambientes as $key => $value)
#php
array_push($label, $value->mes);
array_push($data, $ot['dayot']);
#endphp
#endforeach
Then json_encode values in script
<script type="text/javascript">
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: [<?php echo json_encode($label);?>],
datasets: [
{
label: "Tiempo de indisponibilidad",
backgroundColor: "red",
data: [<?php echo json_encode($data);?>]
}
]
},
options: {
scales: {
yAxes: [{
type: 'time',
time: {
displayFormats: {
quarter: 'h:mm'
}
}
}]
},
}
});
</script>

how to pass response data inside HighChart using angularjs

I am displaying the customer data on the highchart who will register on the website based on their month and year. I am fetching the response from the server to display. But I am not getting how to inject those data into highchart.
Any help/advice greatly appreciated.
Angularjs:
.controller('ctrl',['$scope','$http',function($scope,$http){
$http({
url: '//customerinformation',
method: 'GET'
})
.then(
function successCallback(response){
$scope.users = response.data.customers;
},
function errorCallback(response){
console.log('Error:' + response.data);
});
$scope.chartOptions = {
chart: { type: 'column' },
title: { text: 'Customer Information' },
xAxis: { categories: ['Jan', 'Feb', 'Mar','Apr','May','June','July','Aug','Sep','Oct','Nov','Dec'] },
yAxis: { title: { text: 'No.of customer' } },
series: [{
name: 'customer',
data: [] <-- 'Here I need to pass the response data'
}]
};
}]);

You could:
set series' data before your chart is generated from chartOptions
or
use series.setData() to update the chart dynamically. To do this you will need the chart variable - mentioned in a comment wrapper https://github.com/pablojim/highcharts-ng can help you with that. Alternativelly you could use chart's load event where this is the chart.

You have to push response data into an array then pass that array in your data like this.
.controller('ctrl',['$scope','$http',function($scope,$http){
$http({
url: '//customerinformation',
method: 'GET'
})
.then(
function successCallback(response){
$scope.users = response.data;
var CustomersData= [];
for (var i = 0; i < $scope.users.length; i++) {
CustomersData.push($scope.users[i].customers);
}
},
function errorCallback(response){
console.log('Error:' + response.data);
});
$scope.chartOptions = {
chart: { type: 'column' },
title: { text: 'Customer Information' },
xAxis: { categories: ['Jan', 'Feb', 'Mar','Apr','May','June','July','Aug','Sep','Oct','Nov','Dec'] },
yAxis: { title: { text: 'No.of customer' } },
series: [{
name: 'customer',
data: CustomersData <--- here you get your data.
}]
};
}

adding custom parameters for highcharts using ajax

I'm trying to add some parameters to my highcharts that are being called by ajax. I call all the necessary parameters in a separate php, then the success result would put it in the container for highcharts.
My Code:
$.ajax({
type: 'post',
url: 'sdayresult.php',
data: $("#FormName").serialize(),
success: function(data) {
//$("#anser").html(data);
$('#container').highcharts({data});
}
The value of the data:
chart: {
type: 'scatter'
},
title: {
text: 'Search by Airline'
},
xAxis: {
categories: ['none']
},
yAxis: {
title: {
text: '# of Crew'
}
},
series: [{
name: '# of Crew',
URLs: ['#'],
data: [0],
point: {
events: {
click: function() {
var someURL = this.series.userOptions.URLs[this.x]; // onclick get the x index and use it to find the URL
if (someURL)
window.open('http://'+someURL);
}}}
}]
But when I run the script, the is a javascript error saying that I have an undefined "}". I tried pasting the value of the data to another test page of highcharts and it seems that the value of data is correct. What should I do to fix it?

How to retrieve jquery ajax response to php variable?

How to pass an jquery ajax response after success into a php variable. this is my code :
process.php
$start = "";
$end = "";
if(isset($_POST['tampStart']))
{
$start = $_POST['tampStart'];
}
if(isset($_POST['tampEnd']))
{
$end = $_POST['tampEnd'];
}
$SQL = "SELECT * FROM `values` WHERE date BETWEEN '".$start."' and '".$end."'";
$result = mysql_query($SQL);
$prefix = '';
while ( $row = mysql_fetch_assoc( $result ) ) {
$prefix .= "[\n"."'".$row['month']."'".', '.$row['days']."]".",";
}
echo rtrim($prefix, ",");
index.php
var dStart = $('#textInput1').val();
var dEnd = $('#textInput2').val();
var form_data = {
tampStart: dStart,
tampEnd: dEnd
};
$.ajax({
url: 'process.php',
type: 'POST',
async : true,
data: form_data,
dataType: 'text',
success: function(resp){
$('#content').html(resp);
//pass to php variable ?
}
});
there is no problem when I put the response into a div ($('#content').append(resp);), but how to put the response into an php variable. Thanks for advance..
update my Highcharts code :
function createChart(datan) {
//alert(datan);
Highcharts.setOptions({
lang: {
drillUpText: 'Back to {series.name}'
}
});
var options = {
chart: {
height: 300
},
title: {
text: 'Highcharts Drilldown Plugin'
},
xAxis: {
categories: true
},
drilldown: {
series: [{
id: 'fruits',
name: 'Fruits',
data: [datan] //here #*
}, {
id: 'cars',
name: 'Cars',
data: [{
name: 'Toyota',
y: 4,
drilldown: 'toyota'
},
['Volkswagen', 3],
['Opel', 5]
]
}, {
id: 'toyota',
name: 'Toyota',
data: [
['RAV4', 3],
['Corolla', 1],
['Carina', 4],
['Land Cruiser', 5]
]
}]
},
legend: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true
},
shadow: false
},
pie: {
size: '80%'
}
},
series: [{
name: 'Overview',
colorByPoint: true,
data: [{
name: 'Fruits',
y: 10,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 12,
drilldown: 'cars'
}, {
name: 'Countries',
y: 8
}]
}]
};
// Column chart
options.chart.renderTo = 'container1';
options.chart.type = 'column';
var chart1 = new Highcharts.Chart(options);
}
I make the highcharts config to a function. when I alert(datan), its shown the data from ajax response, but when I put on Drilldown option data (see sign #* above), the highchart config cant read it..

PHP runs on server not on client so the thing you asking is possible only on server. You have to customize this code for your need it gives framework.
$.ajax({
url: 'process.php',
type: 'POST',
async : true,
data: form_data,
dataType: 'text',
success: function(resp){
// $('#content').html(resp);
createChart(resp);
}
});
var chart;
function createChart(data) {
var options = {
chart: {
height: 300
},
title: {
text: 'Highcharts Drilldown Plugin'
},
xAxis: {
categories: true
},
drilldown: {
series: data}
};
options.chart.renderTo = 'content';
options.chart.type = 'column';
var chart1 = new Highcharts.Chart(options);
}

Javascript is a client side scripting. You can't assign the javascript value directly to the php variable.
One way is to set a SESSION variable in PHP. In your case in process.php file.
Another way is to use Database/files.

Well, if you really want to do it this way, you can set a cookie with the desired variable in Javascript and afterwards access it with PHP.
But, there is another way. You can do whatever you want on the client side and when you want to transmit the variable to server-side, just open an ajax connection on the php page which will handle the variable and hand it the actual variable through POST data.

values not updated after an ajax response

I am sending some form data via ajax to a php script in the same page. PHP must process the data and show results in the same page.
I am using this syntax for ajax:
$.ajax
({
type: "POST",
url: "",
data: $("form").serialize(),
success: function(result)
{
updatechart();
console.log(result);
}
});
I am basically trying to update some values in a chart based on data entered in the form and after processed by a php script. I get the whole source of the page when I do console.log(result); and the values are updated in my console after doing this but the chart is not updated. When I view-source the page, the values remain the same. What should I do?
function updatechart() {
var json=<?php echo json_encode($GLOBALS['json']); ?>;
var direct=json['direct'];
var total=json['total'];
var referred=total-direct;
var aid=new Array();
var count=new Array();
for(var i=0;i<json['aid'].length;i++) {
aid[i]=json['aid'][i];
count[i]=json['count'][i];
}
var series = [{
name : "Referred",
data: [referred]
}, {
name: "Direct",
data: [direct]
}];
for(var i=0; i<aid.length;i++) {
series.push({
name: 'AID-'+[aid[i]],
data: [count[i]]
})
}
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'User Source Chart'
},
xAxis: {
categories: ['Users']
},
yAxis: {
min: 0,
title: {
text: 'Total users'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series: series
};
chart = new Highcharts.Chart(options);
}
This is my updatechart() code. The problem is, json value is not updated.

Pass the result as parameter to updatechart()
$.ajax
({
type: "POST",
url: "",
data: $("form").serialize(),
success: function(result)
{
updatechart(result);
}
});
then access the results via parameter.
function updatechart(result) {
//.......
//.......
console.log(result);
}
Hope you're trying something like this.

That is expected behavior. Move your PHP processing to a different page.
$.ajax
({
type: "POST",
url: "anotherphppage.php",
data: $("form").serialize(),
success: function(result)
{
updatechart(result);
}
});
Try this and you'll see what I mean:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#mybutt').click(function() {
$.ajax({
type: "POST",
url: "",
data: 'myVar=Hello',
success: function(data) {
alert(data);
}
});
});
}); //END $(document).ready()
</script>
</head>
<body>
Try this:<br />
<input type="button" id="mybutt" value="Click Me">
</body>
</html>