Using PHP and AJAX
Overview
Passing data via URL variables allows us to create complex charts that stick out from the crowd. In the following examples, we will use PHP and Ajax to create a parent/child chart as well as a chart created from a form.
Parent Child / Chart
There are just a few simple steps that must be taken to create a parent/child chart that uses PHP to pass data via URL. First, we set the "url" attribute to point the series data to our datamonths.php file located in our resources directory. By adding this attribute, we are telling ZingChart where it should send our data when we click on a series item.
series: [
{
values: [81,106,110,114,133,108,
101,120,116,113,123,130,
132,124,128,122,115,104,
123,146,113],
url: "https://us-central1-zingchart-com.cloudfunctions.net/public_pie_datamonths",
//Styling attributes omitted
},
Let's say that we want to display the year associated with the clicked series item. We do this by adding a year variable to our query string. The %scale-key-value ZingChart token will return the scale value (the year) of the clicked item. Information on tokens can be found on the Tokens page.
series: [
{
values: [81,106,110,114,133,108,
101,120,116,113,123,130,
132,124,128,122,115,104,
123,146,113],
url: "https://us-central1-zingchart-com.cloudfunctions.net/public_pie_datamonths?year=%scale-key-value",
//Styling attributes omitted
},
The "target" attribute tells ZingChart where to place the data received back from the data-months.php script. In this example, we're targeting the empty graph object just below our parent chart. The empty graph object has its "id" attribute set to "months". This can be seen by right-clicking the parent/child chart and viewing its source.
series: [
{
values: [81,106,110,114,133,108,
101,120,116,113,123,130,
132,124,128,122,115,104,
123,146,113],
url: "https://us-central1-zingchart-com.cloudfunctions.net/public_pie_datamonths?year=%scale-key-value",
target: "graph=months",
//Styling attributes omitted
},
Our datamonths.php file simply contains our child chart's JSON configuration, with a bit of additional PHP scripting. Clicking on a bar in the parent chart will trigger the injection of the datamonths.php contents into the graph object with id "months". In our script, we use <?php echo $_GET[ 'year' ]; ?> to retrieve the year passed to our script via the URL parameter. The actual data values for the child chart are randomly generated by our script.
labels: [
{
x : 50,
y : 0,
"color" : "#fff",
"background-color" : "#8CB206",
"text" : "Monthly stats for <?php echo $_GET[ 'year' ]; ?>"
}
]
This is just a simple example of how you can use URL parameters, PHP scripts, and the "url" attribute in your charts, but you can craft them to be as simple or as complex as you want!
HTML Form Chart
In the following demo, we have created a form to pass several user entered string variables and pie slice values to an external PHP script to allow the user to create their own personalized pie chart. We've used jQuery, Ajax, and a PHP script for this demo.
<fieldset>
<label for="name" class="form-label">Name:</label>
<input type="text" class="form-input" id="name" name="name"><br>
<label for="slice1text" class="form-label">Slice 1 Text:</label>
<input type="text" class="form-input" id="slice1text" name="slice1text"><br>
<label for="slice1val" class="form-label">Slice 1 Value:</label>
<input type="range" class="form-input" id="slice1val" name="slice1val"><br>
<label for="slice2text" class="form-label">Slice 2 Text:</label>
<input type="text" class="form-input" id="slice2text" name="slice2text"><br>
<label for="slice2val" class="form-label">Slice 2 Value:</label>
<input type="range" class="form-input" id="slice2val" name="slice2val"><br>
<label for="slice3text" class="form-label">Slice 3 Text:</label>
<input type="text" class="form-input" id="slice3text" name="slice3text"><br>
<label for="slice3val" class="form-label">Slice 3 Value:</label>
<input type="range" class="form-input" id="slice3val" name="slice3val"><br>
<input class="btn btn-large btn-primary" type="submit" id="submit_btn" value="Create Chart">
</fieldset>
You may have noticed that we didn't wrap our input fields with <form> tags like a typical HTML form. Since we're using jQuery to collect our field values and Ajax to post our data, <form> tags are unnecessary here.
The following code is pretty self explanatory. First we retrieve the input field values, then we pass the data through some basic validation before using Ajax to post our data to the server and using the PHP script response as our data for our newly rendered chart.
$("#submit_btn").click(function() {
//Get input field values
var user_name=$('input[name=name]').val();
var slice1_text=$('input[name=slice1text]').val();
var slice1_val=$('input[name=slice1val]').val();
var slice2_text=$('input[name=slice2text]').val();
var slice2_val=$('input[name=slice2val]').val();
var slice3_text=$('input[name=slice3text]').val();
var slice3_val=$('input[name=slice3val]').val();
//Simple client-side validation
var proceed=true;
if(user_name==''){
$('input[name=name]').css('border-color','red');
proceed=false;
}
if(slice1_text==''){
$('input[name=slice1text]').css('border-color','red');
proceed=false;
}
if(slice2_text==''){
$('input[name=slice2text]').css('border-color','red');
proceed=false;
}
if(slice3_text==''){
$('input[name=slice3text]').css('border-color','red');
proceed=false;
}
if(proceed){
//Data to be sent to the server
post_data = {
'userName': user_name,
'slice1Text': slice1_text,
'slice1Val': slice1_val,
'slice2Text': slice2_text,
'slice2Val': slice2_val,
'slice3Text': slice3_text,
'slice3Val': slice3_val
};
//Ajax post data to server
$.post('https://us-central1-zingchart-com.cloudfunctions.net/public_pie_builder', post_data, function(response){
//Render new chart with response
zingchart.render({
id: "myPieChart",
output: "svg",
height:380,
width:400,
data:response
});
},'json');
}
});
The post_data gets sent to https://us-central1-zingchart-com.cloudfunctions.net/public_pie_builder which builds the finished chart. The following code is https://us-central1-zingchart-com.cloudfunctions.net/public_pie_builder.
{
type: 'pie',
title: {
text: "___ Pie Chart"
},
series: [
{
values: [<?php echo $_POST[ 'slice1Val' ]; ?>],
text: "<?php echo $_POST[ 'slice1Text' ]; ?>",
id: "slice1"
},
{
values: [<?php echo $_POST[ 'slice2Val' ]; ?>],
text: "<?php echo $_POST[ 'slice2Text' ]; ?>",
id: "slice2"
},
{
values: [<?php echo $_POST[ 'slice3Val' ]; ?>],
text: "<?php echo $_POST[ 'slice3Text' ]; ?>",
id: "slice3"
}
]
}
Summary
This PHP and AJAX tutorial was designed with the intention of showing off the flexibility and dynamic nature of ZingChart. It was designed to embrace the many technologies used on the web today. With a bit of creativity and imagination, ZingChart can help you accomplish virtually all of your charting needs, and we're always here to provide a helping hand when you need it.