I am using JQplot Pie Chart. I need the labels to appear outside the chart. How can I make that possible?
If you mean data labels then you need to set the dataLabelPositionFactor to appropriate value greater than 1.0 and you are done.
Example sample available here.
To do that yuo need to specify the placement propertie :
legend: {
show:true; placement: "outsideGrid"
}
Example :
$.jqplot('YOUR_DIV_ID', [['LABEL_1',2],['LABEL_2',232],['LABEL_3',22], {
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
}
},
//Make legend visibile, outside the chart
legend: {
show:true, placement: "outsideGrid"
}
}
);
Related
My program is drawing a graph with the following (comparable) source code from the jqplot page. The goal is to draw a vertical line at position x in the graph. I followed up the guide an examples on the jqplot page, but it didn't draw the line, just the graph.
Is someone experienced with that? Or could tell me how the options/calls should be to get the line in the graph?
Example-code:
$(document).ready(function(){
var plot2 = $.jqplot ('chart2', [[3,7,9,1,4,6,8,2,5]], {
// Give the plot a title.
title: 'Plot With Options',
// You can specify options for all axes on the plot at once with
// the axesDefaults object. Here, we're using a canvas renderer
// to draw the axis label which allows rotated text.
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
// An axes object holds options for all axes.
// Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
// Up to 9 y axes are supported.
axes: {
// options for each axis are specified in seperate option objects.
xaxis: {
label: "X Axis",
// Turn off "padding". This will allow data point to lie on the
// edges of the grid. Default padding is 1.2 and will keep all
// points inside the bounds of the grid.
pad: 0
},
yaxis: {
label: "Y Axis"
}
}
});
});
Adding this to your existing code should help you draw a vertical line.
CODE:
canvasOverlay: {
show: true,
objects: [
{verticalLine: {
name: 'stack-overflow',
x: 4, // x-axis position where you want to draw the vertical line.
lineWidth: 6,
color: 'rgb(100, 55, 124)',
shadow: false
}}
]
}
You can set the 'x' to a desired value of your choice.
IMP: In order for the canvasOverlay to work, you must include the jqplot.canvasOverlay.min.js file, else it will not work.
Here's a working fiddle: jqPlot - Draw vertical line on the graph
I included the following files in code above(JS Fiddle). You can also refer to the External Resources section on the left pane in JSFiddle.
jquery.jqplot.min.js
jquery.jqplot.min.css
jqplot.canvasOverlay.min.js
jqplot.canvasAxisLabelRenderer.min.js
jqplot.canvasTextRenderer.min.js
jqPlot Example here - jqPlot Canvas Overlay
Hope it helps :-)
To plot my data I'm using jqplot. I wish I could set a specific color on my pie chart according to the label values.
For example, I have this set of labels: "wood", "plastic" and I would like to set the color for "Wood" to brown and every time that category shows up in a graph.
Here is my current code:
switch(attrs.type) {
case 'pie': return $.extend(config, {
seriesColors:['#4bb2c5', '#EAA228', '#c5b47f', '#579575', '#839557', '#958c12', '#953579', '#4b5de4', '#d8b83f', '#ff5800', '#0085cc', '#c747a3', '#cddf54', '#FBD178', '#26B4E3', '#bd70c7'],
seriesDefaults: {
shadow: false,
renderer: $.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
varyBarColor: true
},
}
}
);
Thanks in advance!
You can use the dataLabels, seriesColors and labels property(of legends) to achieve this.
Refer below for jqPLot docs
dataLabels
seriesColors
legend labels
I have created a fiddle. Is this something that you are looking out for?
Follow this link: jqPLot Pie Chart - Series labels and colors
Regards,
Anish
I figured it out:
I was not including the jqplot.CategoryAxisRenderer. Once I included that, I was able to get it working.
Thanks, everyone!
UPDATE:
My code works in JSFiddle, so it's a CSS problem I'm having. Please disregard.
I'm trying to create a fairly simple bar chart in jQPlot. I'm expecting two horizontal bars, one on top of the other. Both are equal to 1 on the X axis. I want the Y axis to have the labels 'In Progress' for the top bar, and 'Apr 2014' for the bottom bar. I have tried numerous combinations. If I do not specify Ticks, then I see the two bars. Specifying Ticks, or using the desired labels as the Y axis data point just shows both labels overlapping with no bars. (ignore the setTimeout) Thanks in advance.
Here's the code:
var data = [[1,1],[1,2]];
var ticks = ['In Progress','Mar 2014'];
$(function () {
setTimeout(function(){
var plot1 = jQuery.jqplot ('chartdiv', [data],
{
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal'
},
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
}
});
},
100);
});
I have modified the JsFiddle given by Batu Zet previously adding following lines in order to label your bar chart here :
series: [
{
pointLabels:{
show:true,
labels:['Apr 2014', 'Apr 2014']
}
},
{
pointLabels:{
show:true,
labels:['In Progress', 'In Progress']
}
}
]
P.S : The labels are duplicated for each serie in order to display the same label for two points in a serie.
If the area is very small then the labels are getting overlapped in the donut chart.
How to place the data labels outside the donut chart with lines.
Currently I am able to draw the labels inside the chart. Find the sample code from here:
$(document).ready(function(){
var s1 = [['a',6], ['b',8], ['c',14], ['d',20]];
var plot3 = $.jqplot('chart4', [s1], {
seriesDefaults: {
// make this a donut chart.
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
// Donut's can be cut into slices like pies.
sliceMargin: 3,
// Pies and donuts can start at any arbitrary angle.
startAngle: -90,
showDataLabels: true,
// By default, data labels show the percentage of the donut/pie.
// You can show the data 'value' or data 'label' instead.
dataLabels: 'value'
}
}
});
});
fiddle
This is my expected output:
Helps much appreciated
Ok, what you need to set is:
dataLabelPositionFactor: 2
Please see jsFiddle here:
http://jsfiddle.net/9gXc3/1/
And further info here:
http://www.jqplot.com/docs/files/plugins/jqplot-donutRenderer-js.html
Update
I'd also set the padding too to avoid overlap i.e.
padding: 50
http://jsfiddle.net/9gXc3/3/
Use, dataLabelPositionFactor: 1.2, inside rendererOptions.
Below is an example I used in a project:
rendererOptions: {
padding: 8,
showDataLabels: true,
dataLabels: percentage,
dataLabelFormatString: '%s%%',
diameter: 300,
dataLabelPositionFactor: 1.1,
sliceMargin: 4,
startAngle: -90,
color: '#DCDCDC'
}
I have javascript code as:
var plot1 = jQuery.jqplot ('chartdiv', [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,
dataLabels: 'value'
}
},
legend: { show:true, location:'e'}
});
var handler = function(ev, gridpos, datapos, neighbor, plot) {
if (neighbor) {
alert('x:' + neighbor.data[0] + ' y:' + neighbor.data[1]);
}
};
$.jqplot.eventListenerHooks.push(['jqplotClick', handler]);
Now by using dataLabels: 'value' I am able to show values but shown value is 51 instead of 50.667.Value is rounded.But I need to show exact value.How to this??
My second question is that When I have mouse pointer on any region of the chart I want to show something.Is that would be done using jqplotDataMouseOver But how to use it?
Your first question can be solved with the dataLabelFormatString property:
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,
dataLabels: 'value',
dataLabelFormatString:'%.4f'
}
},
The '%.4f' would show 4 decimal places.
Your second question is more difficult. Apparently events on bar charts are not quite ironed out with jqplot. But the last suggestion in that link works for me:
$('#chartdiv').bind('jqplotDataMouseOver', function (ev, seriesIndex, pointIndex, data) { alert('series: '+seriesIndex+', point: '+pointIndex+', data: '+data)});
Here's a jsfiddle, remember to cache the JS files since jqplot does not allow hotlinking.