JQPlot bar chart OK but pie chart not OK -- using same input data - jqplot

I have the following codes to render a bar chart and a pie chart. Both receives the same set of JSON data from the server as follows:
A: 115.00
B: 55.00
C: 0.00
D: 29.04
For some reasons, the bar chart is able to render it. But nothing appears for the pie chart.
var AjaxDataRenderer = function(url, plot, options) {
var ret;
$.ajax({
async: false, // Needed
url: "getData.php",
dataType:"json",
success: function(data) {
ret = data;
}
});
return ret;
};
var plot = $.jqplot('id-BarChart', [],{
title: "TRIAL",
dataRenderer: AjaxDataRenderer,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {fillToZero: true}
},
series:[{color:'#5FAB78',label:"Actual"}],
legend: {
show: true,
placement: "insideGrid",
rendererOptions: {
textColor: "#FFFFFF",
fontSize: "10pt"
}},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: -30,
fontSize: '10pt'
}
},
yaxis: {
min: 10,
max: 300,
tickOptions: {
formatString: '$%d'
}
}
}
});
var plot = $.jqplot('id-PieChart', [],{
dataRenderer: AjaxDataRenderer,
title: 'Expenditure pattern for this session',
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
padding: 8,
showDataLabels: true
}
},
});
Anybody can help?

Had done some debugging and found the following works.
This is the PHP codes I have:
$rows = array();
$rows1 = array();
$j = 1;
while($category = mysql_fetch_assoc($allCategories))
{
$current = 0 + $category['ExpenditureCurrent'];
$toDate = 0 + $category['ExpenditureToDate'];
$j += 1;
$rows[] = array($category['Name'], $toDate);
$rows1[] = array($category['Name'], $current);
}
echo json_encode(array($rows,$rows1));
For some reasons, the bar chart works with these:
$current = $category['ExpenditureCurrent'];
$toDate = $category['ExpenditureToDate'];
While the pie chart needs these:
$current = 0 + $category['ExpenditureCurrent'];
$toDate = 0 + $category['ExpenditureToDate'];

Related

Bars not displaying in jqplot bar chart

My problem is that bars are not displaying at all in a bar chart, using JqPlot.
Here is the code:
var line = [['Clients' , 15] , ['Prospects' , 8]];
var plot4 = jQuery.jqplot('chartdiv4', [line] ,
{
seriesDefaults:{
renderer:jQuery.jqplot.BarRenderer,
rendererOptions: {
varyBarColor: true
}
},
axes:{
xaxis:{
renderer: jQuery.jqplot.CategoryAxisRenderer,
}
}
});
See the example at http://jsfiddle.net/BpEK2/3/
This shows bars being drawn on the screen. Make sure you look at the included dependencies (external resources) as you'll need all of them. In essence, what you need to do is
var s1 = [15, 8];
var ticks = ['Clients', 'Prospects'];
var plot1 = $.jqplot('chart1', [s1], {
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
fillToZero: true,
varyBarColor: true
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
}
});

jqPlot: show full date and value on highlight, just year on axis?

I'm using jqPlot to graph out some weight data... if I dont specify just showing the year on the xAxis, the display is cluttered... but it seems like I can't get the full date to show when any data point is highlighted. Is there any way to get the highlighter to use a date-aware formatter, rather than the simple printf stuff?
<link rel="stylesheet" type="text/css" hrf="jqPlot/jquery.jqplot.min.css" />
<script>
$(document).ready(function(){
var line1=
[['1999.03.17',205],
['2001.06.15',189],
['2001.10.11',179],
['2004.01.09',192.5 ],
['2006.04.12',221.5],
['2007.12.06',216.5],
['2009.01.26',220],
['2010.06.22',215],
['2011.01.03',210],
['2012.04.20',208],
['2012.05.09',207.8],
['2013.05.03',201.2],
['2014.01.23',190.9]
];
var plot2 = $.jqplot('chart2', [line1], {
highlighter: {
show: true,
formatString: "%s %d",
tooltipAxes:'xy'
},
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%y'},
tickInterval:'1 years'
}
},
series:[{lineWidth:4, markerOptions:{show:false}}]
});
});
Here is the solution: JsFiddle
$(document).ready(function () {
function tooltipeditor(str, seriesIndex, pointIndex, plot) {
var data = plot.data[seriesIndex][pointIndex]
return "<div>" + data[0] + " , " + data[1] + "</div>";
}
var line1 =
[
['1999/03/17', 205],
['2001/06/15', 189],
['2001/10/11', 179],
['2004/01/09', 192.5],
['2006/04/12', 221.5],
['2007/12/06', 216.5],
['2009/01/26', 220],
['2010/06/22', 215],
['2011/01/03', 210],
['2012/04/20', 208],
['2012/05/09', 207.8],
['2013/05/03', 201.2],
['2014/01/23', 190.9]
];
var plot2 = $.jqplot('chart1', [line1], {
highlighter: {
show: true,
tooltipContentEditor: tooltipeditor
},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%y'
},
//tickInterval: '1 years'
}
},
series: [{
lineWidth: 4,
markerOptions: {
show: true
},
}]
});
});

jqplot - getting error while using multiple series with different renderers

I have recently started using jqplot library for rendering graphs in our web app. I have downloaded version 1.0.8r1250. I am working with version 1.7 of jquery. I am trying to draw one bar graph and one line graph in the same canvas. Based on the documentation and the examples in the jqplot distribution, here is how I have configured it.
function drawGraph(data) {
$("#char1").empty();
$.jqplot.config.enablePlugins = true;
var lockinsByMarkup = [];
var lockinMarkupData = 'N/A':0, '<=10':16, '>10-20':15, '>20-30':1, '>30-40':0, '>40-50':3, '>50-60':10, '>60-70':0, '>70-80':12, '>80-90':0, '>90-100':0, '>100':0;
for (var prop_name in lockinMarkupData) {
lockinsByMarkup.push([prop_name, lockinMarkupData[prop_name]])
}
var recommendations = [1,2,3,4,5,6];
var plot1 = $.jqplot('chart1', [lockinsByMarkup, recommendations], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
title: 'Current Customer Item Prices (CIP)',
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions: {
showGridline: false
}
},
seriesDefaults:{
pointLabels: { show:true, hideZeros:true}
},
axes: {
xaxis: {
label:'Markup %',
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontFamily: 'Georgia',
fontSize: '10pt',
angle: -30
}
},
yaxis: {
label: '# of CIP Records',
showTicks: false
}
},
series: [
{
renderer: $.jqplot.BarRenderer
},
{
renderer: $.jqplot.LineRenderer, // this is the default, but specifying just in case
showMarker: false,
showLine: false,
pointLabels: {labels: ['CFP', 'Min', 'Peer', 'Start', 'Default', 'Upper Limit']}
}
],
grid:{
drawBorder: true,
shadow: false
}
});
}
I have the following div on the page -
<div id="chart1" style="height:400px;width:500px; "></div> and I am executing the above function on the click of a button.
What is happening is, I am getting this error - Uncaught illegal access in jquery.jqplot.min.js.
If I just have one series, it is working fine. I have been struggling with error since yesterday afternoon. Can somebody please tell me what I am doing wrong?
I have included following js and css files on my page
jquery-1.7.min.js
jquery.jqplot.min.js
jqplot.barRenderer.min.js
jqplot.categoryAxisRenderer.min.js
jqplot.pointLabels.min.js
jqplot.canvasTextRenderer.min.js
jqplot.canvasAxisTickRenderer.min.js
jqplot.canvasAxisLabelRenderer.min.js
jquery.jqplot.min.css
Thanks for your help.
here is the solution: jsFiddle link
$(document).ready(function(){
function drawGraph(data) {
$("#chart1").empty();
$.jqplot.config.enablePlugins = true;
var lockinsByMarkup = [];
var recommendations = [];
var lockinMarkupData = {'N/A':0, '<=10':16, '>10-20':15, '>20-30':1, '>30-40':0, '>40-50':3, '>50-60':10, '>60-70':0, '>70-80':12, '>80-90':0, '>90-100':0, '>100':0};
for (var prop_name in lockinMarkupData) {
lockinsByMarkup.push([prop_name, lockinMarkupData[prop_name]]);
recommendations.push([prop_name, Math.round(Math.random()*10)]);
}
var plot1 = $.jqplot('chart1', [lockinsByMarkup, recommendations], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
title: 'Current Customer Item Prices (CIP)',
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions: {
showGridline: false
}
},
seriesDefaults:{
pointLabels: { show:true, hideZeros:true}
},
axes: {
xaxis: {
label:'Markup %',
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontFamily: 'Georgia',
fontSize: '10pt',
angle: -30
}
},
yaxis: {
label: '# of CIP Records',
showTicks: false
}
},
series: [
{
renderer: $.jqplot.BarRenderer
},
{
renderer: $.jqplot.LineRenderer, // this is the default, but specifying just in case
showMarker: true,
showLine: true,
// pointLabels: {labels: ['CFP', 'Min', 'Peer', 'Start', 'Default', 'Upper Limit']}
}
],
grid:{
drawBorder: true,
shadow: false
}
});
}
drawGraph();
});

jqPlot horizontal bar chart with tick label at top of bar

I have a jqPlot hor. barchart like this one. jq plot - getting linear x axis ticks
I want to be able to put y-axis tick labels (like software and services, israel in the pic)
on top of respective bars using some parameters or renderer instead of fiddling with css.
Is there an easy way to do that? Thanks in advance.
so far, my code looks like below.
`
function drawChart() {
var data = new Array(3);
for (var i = 0; i < data.length; i++) {
data[i] = new Array(2);
data[i][0] = Math.random() * 100;
data[i][1] = 'text-' + (i + 1);
}
var plot2 = $.jqplot('votingresult', [
data,
], {
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
shadow: false,
rendererOptions: {
barDirection: 'horizontal',
barPadding: 20,
barMargin: 0,
barWidth: 20,
varyBarColor: true,
}
},
gridPadding: { top: 0, right: 0, bottom: 0 },
grid: {
drawGridLines: false,
drawBorder: false,
shadow: false
},
axesDefaults: {
showTicks: false,
shadow: false
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontSize: '10pt',
mark: 'inside',
showLabel: false
}
}
}
});
}`
I want jqplot like one shown in the right side in this flickr picture.
http://www.flickr.com/photos/surajshrestha/7455033636/sizes/l/in/photostream/
Jeroen: I have looked into point labels. But, here, I am talking about axis label to be inside the graph.
I had the same challenge and ended up just writing a function to append content to the graph DIV rather than try and fiddle with JQPlot. You just have to adjust the barMargin option to account for the spacing.
function makeSectionLabels(jsonObject, domObject, topPadding, spacing) {
var html = "<div class='bar-chart-sections' style='padding-top:"+topPadding+"'>";
$.each(jsonObject, function(index, value){
html += "<h5 style='margin-bottom:"+spacing+"'>"+value+"</h5>"
});
html += "</div>"
$(domObject).append(html);
};

I am using Date Axes Renderer, When there is only one point the graph canvas is plotted, with the x axis tick but the y axis value is not shown

I am using Date Axes Renderer When there is only one data the graph is
plotted, with the x axis tick but the y axis value is not shown !
Please help me out ! Below is my code :-
function plotgraph(data)
{
var mydata = [];
var dateticks = [];
$.each(data, function (index, value) {
var date = formatdate(data[index].TextColumnString);
dateticks.push([date]);
mydata.push([date, s]);
});
$.jqplot.config.enablePlugins = true;
plot1 = $.jqplot('newgraph', [mydata], {
title: 'Revenue',
legend: { show: true, location: 'ne' },
grid: {
drawBorder:false,
borderWidth: null,
background: '#ffffff',
gridLineColor: '#e0e0e0',
shadow:false
},
axes:
{
xaxis:
{
label: 'Dates',
numberTicks: dateticks.length,
ticks:dateticks,
renderer: $.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions:{
fontSize: '10px',
fontFamily: 'Arial',
angle:-30
},
},
yaxis: { label: 'Revenue(in $)', autoscale:true,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions: { formatString: '$%.2f'} }
},
series:[
{ showLabel: true, lineWidth: 3.5, label:
'Revenue', markerOptions: { style: 'circle'}}],
highlighter : { show : true, sizeAdjust : 7.5},
cursor : { show : false }
});
}
}
//this function is used to format the date from the given to required format.
function formatdate(date) {
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
date = date.replace(',', '');
var fdate = date.split(' ');
var day = fdate[0];
var month = months.indexOf(fdate[1], 0);
month = Number(month) + 1;
var year = fdate[2];
var mydate = year + '-' + month + '-' + day;
return mydate;
}
Thanks in advance !

Resources