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.
Related
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
}
}
});
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 am having an issue using a line chart getting the calculated labels in the x-axis to space properly. If I want to have 5 data points with a few missing (e.g. [1,50.1],[2,49.2],[5,20.4],[6,17],[7,23.3]), the x-axis will show 1 then 2 then a space where 3 and 4 should have been then 5, 6, and 7. What I would like is to have the 5th data point beside the 2nd data point (in the position where the 3rd data point would ideally be). Basically I am trying to hide a data point yet keep the x-axis value in the grid.
Any assistance is much appreciated.
Try this:
<script type="text/javascript">
$(document).ready(function () {
var plot2 = $.jqplot('chart2', [[[1,50],[2,49],[5,20],[6,17],[7,23]]], {
title: 'Plot',
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
axes: {
xaxis: {
label: "X Axis",
pad: 0,
ticks:[1,2,5,6,7] //you can create this dynamically
},
yaxis: {
label: "Y Axis"
}
}
});
});
UPDATE:
<script type="text/javascript">
$(document).ready(function () {
var producciones = [];
for (var i = 0; i < 2000; i++) { producciones.push(new Number(i),new Number(i)) }
var plot2 = $.jqplot('chart2', [producciones], {
title: 'Plot',
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
axes: {
xaxis: {
label: "X Axis",
pad: 0,
numberTicks: 100
},
yaxis: {
label: "Y Axis"
}
}
});
});
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);
};