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);
};
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 am using jqplot for plotting piechart,bar and line chart. It is work fine in IE9>=. But it is not working in IE8. It gives me above error when I am using both piechart and bar chart. and it is showing error at piechart plugin at e.jqplot.PieRenderer'. After blocking this plugin bar chart works fine but not piecharts. Below is my code. Please suggest on this.
var optionsObj = {
title: 'Item wise stock',
animate: !$.jqplot.use_excanvas,
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: dates,
label: 'Item'
},
yaxis: {
tickOptions: { showMark: true, formatString: "%d" },
padMin: 0,
label: 'Stock',
angle: -30,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
labelOptions: { fontSize: '11px' }
}
},
grid: {
drawGridLines: true, // wether to draw lines across the grid or not.
gridLineColor: '#cccccc', // *Color of the grid lines.
background: '#e6e6e6', // CSS color spec for background color of grid.
borderColor: '#999999', // CSS color spec for border around grid.
borderWidth: 2.0, // pixel width of border around grid.
shadow: true, // draw a shadow for grid.
shadowAngle: 45, // angle of the shadow. Clockwise from x axis.
shadowOffset: 1.5, // offset from the line of the shadow.
shadowWidth: 3, // width of the stroke for the shadow.
shadowDepth: 3, // Number of strokes to make when drawing shadow.
// Each stroke offset by shadowOffset from the last.
shadowAlpha: 0.07, // Opacity of the shadow
renderer: $.jqplot.CanvasGridRenderer, // renderer to use to draw the grid.
rendererOptions: {} // options to pass to the renderer. Note, the default
// CanvasGridRenderer takes no additional options.
},
series: [
{ label: 'Bar', renderer: $.jqplot.BarRenderer },
{ label: 'Line', renderer: $.jqplot.LineRenderer, color: '#ef8c08' },
],
legend: {
show: true,
location: 'ne'
},
seriesDefaults: {
shadow: false,
rendererOptions: {
barPadding: 0,
barMargin: 10,
barWidth: 25,
highlightMouseDown: true
}
},
highlighter: {
show: true,
sizeAdjust: 7.5,
tooltipContentEditor: function (str, seriesIndex, pointIndex, jqPlot) {
return '<table class="jqplot-highlighter"><tr><td>Item:</td><td>' + data[pointIndex][0].toString() + '</td></tr> \
<tr><td>Stock:</td><td>' + data[pointIndex][1].toString() + '</td></tr></table>'
}
}
};
var plot2 = $.jqplot(location, values, optionsObj);
Include this tag in your html page:
<script type='text/javascript' src="excanvas.js"></script>
IE8 requires excanvas library to create canvas elements because IE8 doen't support canvas elements.
You can download the js file from here: Excanvas library
I am using jqplot charting library to draw the bar chart in my application.
I have used following code to draw the horizontal bar chart.
var plot = $.jqplot('chart', [dataSlices], {
seriesDefaults: {
shadow: false,
renderer: $.jqplot.BarRenderer,
pointLabels: { show: true, location: 'e', edgeTolerance: -55 },
rendererOptions: {
barDirection: 'horizontal',
barMargin: 5,
highlightMouseOver: false,
fillToZero: true
}
},
axesDefaults: {
},
axes: {
grid: {
drawBorder: false
},
xaxis: {
pad: 0,
tickOptions: {
show: true,
mark: 'cross',
thousandsSeparator: ',',
formatString: "%d"
},
numberTicks: null,
min: null,
max: null,
showTickMarks: true
},
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: yAxisLabels,
tickOptions: {
showMark: false,
showGridline: false
}
}
},
grid: {
gridLineColor: '#ffffff', /**/
borderColor: '#509790',
background: 'rgba(0,0,0,0)',
shadowWidth: 0,
borderWidth: 0,
shadow: false
},
series: [{ color: '#f39f02' }]
});
$.jqplot.thousandsSeparator = ',';
//$.jqplot.formatString = "%'d";
gridCanvas = $($('.jqplot-grid-canvas')[0])
seriesCanvas = $($('.jqplot-series-canvas')[0])
gridCanvas.detach();
seriesCanvas.after(gridCanvas);
plot.replot({ resetAxes: true });
I am getting the chart without grid lines.
Is there any idea, how to do this?
Call the following lines after replot, you will get the expected result
gridCanvas = $($(item + ' .jqplot-grid-canvas')[0])
seriesCanvas = $($(item + ' .jqplot-series-canvas')[0])
gridCanvas.detach();
seriesCanvas.after(gridCanvas);
I tried its working fine for me,.
GridLineColor set to white (#FFFFFF) explains why you aren't wiewing vertical lines.
BorderWidth set to 0 explains why you aren't viewing borders of your plot (drawn with a size of 0px)
If you doesn't need particular color and/or size of your grid (vertical lines and border) remove the grid part of your code.
If you need particular color and/or size choose carefully your values (#FFFFFF if your background if already white - or a borderWidth of 0px) :
grid: {
gridLineColor: '#FF0000',
borderColor: '#509790',
background: 'rgba(0,0,0,0)',
shadowWidth: 0,
borderWidth: 2,
shadow: false
},
Please see working example here (I have delete yAxisLabels and add fictional data in order to draw a plot)
I want a pie chat using jqplot which will show the exact number (not percentage) inside each slice of pie chat.
$(document).ready(function(){
var s1 = [['Sony',200], ['Samsumg',40]];
var plot8 = $.jqplot('chart1', [s1], {
seriesColors: [ "#533E6A","#B4150C"],
grid: {
drawBorder: false,
drawGridlines: false,
background: '#ffffff',
shadow:false
},
axesDefaults: {
},
seriesDefaults:{
renderer:$.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
// sliceMargin: 2,
startAngle: -90
// diameter:30
}
},
legend: {
// show: false,
rendererOptions: {
numberRows: 1
},
location: 's'
}
});
});
Below is the jsfiddle(http://jsfiddle.net/JWhmQ/2032/) but it is showing the slice in percentage..instead i want the actual number(like 200 and 40).
You need to add
dataLabels='value'
, in the rendererOptions, as described here. I fixed your jsfiddle here.
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
}
}