I am new to PHP, javascript and Jqplot. I am making a website where in PHP lets say array1 outputs
Array ( [0] => 0.0024 [1] => 0.0024 [2] => 0.0024 [3] => 0.0024 [4] => 0.00098765432098765 [5] => 0.00098765432098765 [6] => 0.00098765432098765 [7] => 0.001953125 [8] => 0.001953125 [9] => 1 [10] => 1 [11] => 1 [12] => 0.2 [13] => 0.2 [14] => 0.2 [15] => 0.2 [16] => 0.25 [17] => 2 )
array 2 outputs
Array ( [0] => 2013-01-13 14:13:05 [1] => 2013-01-13 14:14:56 [2] => 2013-01-13 14:15:05 [3] => 2013-01-13 14:15:13 [4] => 2013-01-13 14:16:48 [5] => 2013-01-13 14:17:20 [6] => 2013-01-13 14:17:56 [7] => 2013-01-13 14:25:06 [8] => 2013-01-13 14:27:28 [9] => 2013-01-13 14:29:41 [10] => 2013-01-13 14:30:36 [11] => 2013-01-13 14:30:53 [12] => 2013-01-13 14:35:37 [13] => 2013-01-13 14:39:52 [14] => 2013-01-13 14:48:30 [15] => 2013-01-13 14:49:40 [16] => 2013-01-13 14:51:23 [17] => 2013-01-13 14:55:05 )
how to plot this data in jqplot?
I would be gratitude for any help. Thanks
I'm assuming that you want array1 to be the y-axis, and array2 to be the x-axis. Just output javascript lines in a PHP loop and it should do the trick.
<script type="text/javascript">
var lines = [];
<? for ($i=0; $i<count($array1); $i++) { ?>
lines[<?=$i?>] = ['<?=$array2[$i]?>', <?=$array1[$i]?>];
<? } ?>
// The array 'lines' will be plotted into 'chart1' when the document loads
$(document).ready(function(){
var plot1 = $.jqplot ('chart1', [ lines ]);
});
</script>
<!-- This is the div where the graph will be displayed -->
<div id="chart1" style="height:300px; width:500px;"></div>
Plot the above lines
array, and you should get what you are desiring.
i have an example like your problem , You have to create an array like the given line 1 array and you can get your result,
<script class="code" type="text/javascript">
$(document).ready(function(){
var line1=[['2008-06-30 8:00AM',4], ['2008-7-14 8:00AM',6.5], ['2008-7-28 8:00AM',5.7], ['2008-8-11 8:00AM',9], ['2008-8-25 8:00AM',8.2]];
var plot2 = $.jqplot('chart2', [line1], {
title:'Customized Date Axis',
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%b %#d, %#I %p'},
min:'June 16, 2008 8:00AM',
tickInterval:'2 weeks'
}
},
series:[{lineWidth:4, markerOptions:{style:'square'}}]
});
});
</script>
and if you will find any problem then you can also check example code at following link http://www.jqplot.com/tests/date-axes.php
Here is a simple example what I have tried:
there is a mysql table called attendence
and I'm gonna create some arrays of data.
<?php
$query = mysql_query("SELECT * FROM attendence");
$results = array(array());
while($line = mysql_fetch_array($query)){
$results[] = $line;
}
$empNames = array();
$attendence = array();
foreach( $results as $g )
{
$empNames[] = $g[EmpId];
$attendence[] = $g[attendence];
}
?>
Here is the HTML codes:
<div id="content">
<h2>Charts</h2>
<div id="chart1b" style="height:300px; width:500px;"></div>
<br>
<div id="chart1" style="height:300px; width:500px;"></div>
<br>
<div id="chart2" style="height:300px; width:500px;"></div>
</div>
Here is my javascript codes:
<script type="text/javascript">
$(document).ready(function(){
var line1 = <?php echo json_encode($results); ?>;
var plot1b = $.jqplot('chart1b', [line1], {
title: 'Employee vs. Attendence',
series:[{renderer:$.jqplot.BarRenderer}],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
fontFamily: 'Georgia',
fontSize: '10pt',
angle: -30
}
},
axes: {
yaxis: {
autoscale:true
},
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
});
</script>
<!-- End code -->
<!-- Chart Two code -->
<script type="text/javascript">
$(document).ready(function(){
var data = <?php echo json_encode($results); ?>;
var plot1 = jQuery.jqplot ('chart1', [data],
{
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>
<!-- End code -->
<!-- Chart three code -->
<script type="text/javascript">
$(document).ready(function(){
var line1 = <?php echo str_replace('"','',json_encode($attendence)); ?>;
var plot3 = $.jqplot('chart2', [line1], {
title: 'Bar Chart with Point Labels',
seriesDefaults: {renderer: $.jqplot.BarRenderer},
series:[
{pointLabels:{
show: true,
labels:<?php echo json_encode($empNames); ?>
}}],
axes: {
xaxis:{renderer:$.jqplot.CategoryAxisRenderer},
yaxis:{padMax:1.3}}
});
});
</script>
<!-- End code -->
Enjoy It :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.