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
}
}
});
Related
Hi I am trying to add date to X-Axis in the bubble chart in jqplot, but x-axis is not getting plotted. below the jqplot script i am using.
$(document).ready(function () {
var arr = [['2008-07-30 8:00AM', 123, 1236, "Acura"],
['2008-08-30 8:00AM', 92, 1067, "Alfa Romeo"],
['2008-09-30 8:00AM', 104, 1176, "AM General"]];
plot1 = $.jqplot('chart2', [arr], {
title: 'Transparent Bubbles',
axes: {
xaxis:{
renderer: $.jqplot.DateAxisRenderer
}
},
seriesDefaults: {
renderer: $.jqplot.BubbleRenderer,
rendererOptions: {
bubbleAlpha: 0.6,
highlightAlpha: 0.8
},
shadow: true,
shadowAlpha: 0.05
}
});
});
please help me out in solving this. TIA.
I need to generate a horizontal bar chart like given code but with Y-axis as some string not numbers.
What are the changes I need to do to this code for my work. It is working fine with numbers from 1-4 but once I put some string in place of numbers for Y-Axis, graph is not getting plotted.
My Code:
plot4 = $.jqplot('chartdiv', [[[2,1], [6,2], [7,3], [10,4]], [[7,1], [5,2],[3,3],[2,4]]], {
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
shadowAngle: 135,
rendererOptions: {
barDirection: 'horizontal',
highlightMouseDown: true
},
pointLabels: {show: true}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
I need to plot plot4:
$.jqplot('chartdiv', [[[2,'a'], [6,'b'], [7,'c'], [10,'d']], [[7,'a'],
[5,'b'],[3,'c'],[2,'d']]], {
What you want to use for this are the so called "ticks".
You want the data in the plot to stay the same, however you want to edit the yaxis options:
var ticks = ['axis1', 'axis2', 'axis3']; //String array for each axis
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
}
Here a list of the full option list: http://www.jqplot.com/docs/files/jqPlotOptions-txt.html
Hope this was usefull :)
I'm trying to generate a bar chart with jqplot. All of my values are floating numbers as below:
var s1 = [17.1, 18.2];
var s2 = [50.2, 53];
var s3 = [93.9, 93];
var s4 = [34.1, 34];
But it's rounding them to integers.
Here is the working example: http://jsfiddle.net/JkBKs/
How can I fix this?
try this,it works
axes:
{
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
min: 0 ,
tickOptions: {
formatString: '%.1f'
}
}
},
please see the ‘formatString’ content
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
// Show point labels to the right ('e'ast) of each bar.
// edgeTolerance of -15 allows labels flow outside the grid
// up to 15 pixels. If they flow out more than that, they
// will be hidden.
pointLabels: { show: true, location: 'e', edgeTolerance: -15, formatString: '%.1f' },
// Rotate the bar shadow as if bar is lit from top right.
shadowAngle: 135,
// Here's where we tell the chart it is oriented horizontally.
rendererOptions: {
barDirection: 'horizontal'
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
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 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'];