I am creating a pie chart using chart.js; however, the value I want in the pie chart is a PHP variable. How do I add it to the pie chart? Currently I have this for the data for the pie chart:
var pieData = [
{
value: 40,
color:"green"
},
{
value : 40,
color : "red"
}
];
However, I need to replace the two 40s with PHP variables.
You can use PHP echo function for this. You can concatenate your PHP variables into the echo statement. Note: If you want to send an array to the JS, just use json_encode() like shown below.
PHP section:
<?php
echo '
<script type="text/javascript">
var v1=40;
var c1="green";
var v2=40;
var c2="red";
var jsArray =' . json_encode($phpArray) . '; // Remove this if not needed...
</script>';
?>
Javascript section:
var pieData = [
{
value: v1,
color: c1
},
{
value : v2,
color : c2
}
];
You can wrap everything in a function for cleaner code. Hope it helps.
Related
I want to use gmaps.js to add map markers onto a map on my site. I'm using a PHP Script to get the latitude and longitude from my DB, however I'm using
while($dbrowinfo = mysqli_fetch_assoc($rowfields))
Therefore the information comes to an end after the Database query has been ran. Per page there will be a maximum of 10 sets of data, both with a long and lat value (therefore 20 individual variables).
Is there any way to use the variables from PHP to pass to jQuery before the script is ran? Can't really get my head around it as jQuery is client and PHP is serverside...
Thanks for your time
If you are asking if there is a way to pass variables from PHP to JavaScript before the JQuery script has run, the answer is yes, definitely. All the PHP will run before any of the JavaScript, so, you can simply output the data you want as JavaScript variables, like so:
<html>
<?php
// Load the data into your PHP variables
$dataA = "some data";
$dataB = "some more data";
$dataC = 245; // numeric data
?>
<body>
<!-- now open a script tag -->
<script>
var jsVar1 = "<?= $dataA ?>";// If outputting string, you need to add quotes for js
var jsVar2 = "<?= $dataB ?>";
var jsVar3 = <?= $dataC ?>; // No quotes needed for a number
$(document).ready(function(){
console.log("data from php: " + jsVar1 + " " + jsVar2 + " " + jsVar3);
});
</script>
</body>
</html>
Put the values in a PHP array, and then encode them into a Javascript array with json_encode
$coords = array();
while ($row = mysqli_fetchassoc($rowfields)) {
$coords[] = array('lat' => $row['lat'], 'lng' => $row['lng']);
}
echo '<script>var coords = ' . json_encode($coords) . ';</script>';
This defines a Javascript variable coords that contains an array of objects, like:
var coords = [
{ lat: 50.0, lng: 101.1 },
{ lat: -20.8, lng: 55.3 },
...
];
You can then use this array in your jQuery code.
How I can insert array value in php and mysql from variable Var s1, s2, s3:
$(function () {
var s1 = [100, 200, 300]; //How to Get Value from mysql database
var s2 = [30, 80, 90]; //How to Get Value from mysql database
var s3 = [120, 90, 80]; //How to Get Value from mysql database
// Can specify a custom tick Array.
// Ticks should match up one for each y value (category) in the series.
var ticks = ['2010', '2011', '2012'];
var plot1 = $.jqplot('chart3', [s1, s2, s3], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
seriesDefaults: {
shadow: true, // show shadow or not.
renderer: $.jqplot.BarRenderer,
rendererOptions: {
fillToZero: true
}
},
// Custom labels for the series are specified with the "label"
// option on the series option. Here a series option object
// is specified for each series.
series: [
{label: 'Hotel'},
{label: 'Event Regristration'},
{label: 'Airfare'}
],
// Show the legend and put it outside the grid, but inside the
// plot container, shrinking the grid to accomodate the legend.
// A value of "outside" would not shrink the grid and allow
// the legend to overflow the container.
legend: {
show: true,
placement: 'outsideGrid'
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis: {
pad: 1.05,
tickOptions: {
formatString: '$%d'
}
}
},
grid: {
borderColor: '#000', // CSS color spec for border around grid.
borderWidth: 2.0, // pixel width of border around grid.
shadow: true // draw a shadow for grid.
}
});
// Bind a listener to the "jqplotDataClick" event. Here, simply change
// the text of the info3 element to show what series and ponit were
// clicked along with the data for that point.
$('#chart3').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: ' + seriesIndex + ', point: ' + pointIndex + ', data: ' + data);
});
});
2 ways:
Ajax
Use: $.getJSON ( http://api.jquery.com/jQuery.getJSON/ )
var ses = {};
$.getJSON('page_adress.php', {variable_you_want_to_pass1: 'its value', variable_you_want_to_pass2: 'var 2 value'}, function(data) {
ses = data;
});
In your PHP:
<?php
$passed_var_1 = $_REQUEST['variable_you_want_to_pass1'];
//.... etc
//Here you get your data from mysql, cast it into array
header('Content-type: application/json');
echo json_encode($dbdata);
?>
So basically after request finishes you will have exact array you had in PHP transferred in JavaScript. Have in mind that this technique uses AJAX. If you want to avoid that, you will have to use second technique.
Dynamically Creating JS
Make PHP generate your javascript. In this case you would have in your main page
<script src="js_data.js.php" type="text/javascript"></script>
In your js_data.js.php file:
<?php
header("content-type: application/x-javascript");
$s1 = array(100,200,300);
//....
var s1 = [<?=implode(', ', $s1)?>],
s2 = [<?=implode(', ', $s2)?>],
s3 = [<?=implode(', ', $s3)?>];
?>
First method (w/o ajax & json)(untidy-way)
First fetch the value from database and have it in PHP variable.
Then put html element in page and assign the value to it.
Then use it in javascript using document.getElement method.
// assume that you have got value from database in $valueFrmDB.
$valueFrmDB;
Now, take html element(you might have to take more than one)
<input type="hidden" id="something" name="something" value="echo value of $valueFrmDB here" />;
Then, in javascript
var vfd = document.getElementById('something').value;
convert string to array
Second method(with ajax and json)(simple & correct but must know ajax and json)
Use ajax to fetch the values from database
Then use json to pass that values to javascript
simply you can do this by:
<?php
$query = mysql_query("SELECT * FROM attendence");
$results = array(array());
while($line = mysql_fetch_array($query)){
$results[] = $line;
}
?>
Javascript
<script type="text/javascript">
$(document).ready(function(){
var data = <?php echo json_encode($results); ?>; //array uses here
var plot1 = jQuery.jqplot ('chart1', [data],
{
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true}
},
legend: { show:true, location: 'e' }
});
});
</script>
I am having problems plotting my pie chart using jqplot.
After getting my results from php i have converted it to json using json_encode. The output is
{"a":2,"b":1,"c":5,"d":650}
Now when i try to put these results into my javascript
<script class="code" type="text/javascript">
$(document).ready(function(){
// method 1
//var data1 = document.getElementById("dataArray").value;
//eval('data1 = '+data+';');
// method 2
var data1 = <?php echo json_encode($data); ?>;
var plot1 = jQuery.jqplot ('Chart', [data1],
{
seriesDefaults: {
// Make this a pie chart.
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
showDataLabels: true
}
},
legend: { show:true, location: 'e' }
}
);
});
</script>
I've tried two methods, the first to put it inside a hidden field, and the second to retrieve straight from PHP. Both of which result in Uncaught. No plot target specified errors in my Chrome console.
What is it I am doing wrong here?
Thanks guys.
As Asad mentioned, my stupid mistake was that Chart was not specified as an element. So yeah if anyone else ever comes into the same problem, be sure to check that out. :)
I am trying to plot a chart (Spline) using data that is dynamically generated from PHP. The JavaScript library I am using for this purpose is HighCharts.
The PHP generates an array of values in the format like
array(
array("1304294461000",69,"1304899261000",28),
array("1304294431000",3,"1304899161000",32)
)
which I am then passing onto a javascript array using json_encode. However, when I push these values as data, it doesn't seem to be working.
For example, here's an example with relevant code snippets like -
var namesArr = <?php echo json_encode($namesArr); ?>;
var progressTrendsData = <?php echo json_encode($progressTrendsData); ?>;
var chart;
var options = {
chart: {
renderTo: 'trendsDiv',
type: 'spline'
},
series: [{
name: '',
data: []
}]
};
for(var i=0;i<namesArr.length;i++) {
options.series.push({
name: namesArr[i],
data: progressTrendsData[i]
});
}
chart = new Highcharts.Chart(options);
The options contain other relevant data needed for the chart of course.
However, the only thing the above code is doing is plotting a single value at the date January 1 irrespective of the actual data that is being pushed.
I would tend to agree w/Mark on this. It is hard to tell exactly your data is supposed to end up looking like though. Try looking at the data loading portion of the ajax data example on the highcharts demo page.
UPDATE:
Try the following pseudocode:
var chart;
var options = {
chart: {
renderTo: 'trendsDiv',
type: 'spline'
},
series: [{
name: '',
data: []
}]
};
var seriesInfo=[];
seriesInfo[0]={"name":"Series A","data":[]};
seriesInfo[1]={"name":"Series B","data":[]};
//Loop over the series and populate the data
seriesInfo[0].data.push({x:<insert Series A timestamp>,y:<insert Series A y value>});
seriesInfo[1].data.push({x:<insert Series B timestamp>,y:<insert Series B y value>});
options.series.push(seriesInfo[0]);
options.series.push(seriesInfo[1]);
chart = new Highcharts.Chart(options);
I am trying to split the values of an array i'm generating through an autosuggest.
The output of the values are as such:
[
{"value":"12","name":"Solid Fuel Fire Installers"},
{"value":"11","name":"Oil Engineers & Boiler Fitters"}
]
I want to extract the values 12 & 11 and store as a variable so I can save these to a database through php. This is what I have tried so far and to no success:
<script type="text/javascript">
var arr = $(".as-values").val().split(",");
var category_1=arr[0];
var category_2=arr[1];
var category_3=arr[2];
</script>
I only have 3 categories as I have set a limit on the amount they can add (3).
Many thanks in advance.
That looks like json. Why not just access it as a native JS structure?
var json = $(".as-values").val();
data = jquery.parseJSON(json)
alert(data[0].name); // solid fuel fire installers
The array is an array of objects, not strings, so why not treat them as such?
<script type="text/javascript">
var arr = $(".as-values").val();
var category_1=arr[0].value;
var category_2=arr[1].value;
var category_3=arr[2].value;
</script>
Not sure what you're trying to do. Does this sound like it?
var values = '[{"value":"12","name":"Solid Fuel Fire Installers"},{"value":"11","name":"Oil Engineers & Boiler Fitters"}]';
values = $.parseJSON(values);
var submitValues = {};
$.each( values, callback(i, element){
submitValues[element.value] = element.name;
});
The string you're trying to use is valid json so you should be able to just decode the string with native functions in js that would be JSON.parse(json_string, reviver) in php you would use json_decode($json).
Decoding the string will give you an object/array you should be able to work with easily.
(This is what you want right?)
Is your question how to access an element by value of its property? You could do this:
var elements = [
{"value":"12","name":"Solid Fuel Fire Installers"},
{"value":"11","name":"Oil Engineers & Boiler Fitters"}
]; // Retrieve however you want
var element;
for(var i = 0; element = elements[i]; i++) {
if(element.value == 11) {
// It's number 11, for example
}
}
Of course you should probably put that in a function:
function findByProperty(elements, property, value) {
var i, element;
for(i = 0; element = elements[i]; i++) {
if(element[property] === value) return element;
}
return null;
}
// ... define 'elements' as before
var numberEleven = findByProperty(elements, 'value', "11");
Since you already have an array of a valid json you dont need to parse it. Just try this.
var arr = [
{"value":"12","name":"Solid Fuel Fire Installers"},
{"value":"11","name":"Oil Engineers & Boiler Fitters"}
]
var category_1=arr[0].name;
var category_2=arr[1].name;