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.
Related
Is it possible for jqplot to have two y axis for one series in line chart: one for decimal values another for percentages?
Here is my code. There are two lines and their values are in percentages. I need to show two y-axis.
var irr1 = [['2008-09-30', -100], ['2008-10-30', -99.81], ['2008-11-30', -95.73],
['2008-12-30', -80.28], ['2009-01-30', -56.67], ['2009-02-28', -41.54],
['2009-03-30', -30.33], ['2009-04-30', -23.31], ['2009-05-30', -19.93],
['2009-06-30', -8.57], ['2009-07-30', 0.14], ['2009-08-30', 11.24], ['2009-09-30', 20.35]];
var irr2 = [['2008-09-30', -100], ['2008-10-30', -99.10], ['2008-11-30', -86.44], ['2008-12-30', -60.00], ['2009-01-30', -34.43],
['2009-02-28', -20.80], ['2009-03-30', -12.54], ['2009-04-30', -7.88], ['2009-05-30', -5.52],
['2009-06-30', -0.96], ['2009-07-30', 2.09], ['2009-08-30', 5.47], ['2009-09-30', 7.92]];
var data = [irr1, irr2];
var plot1 = $.jqplot(elem.attr('id'), data, {
animate: true,
grid: {
backgroundColor: "#FFFFFF",
gridLineColor: '#000000',
drawBorder: false,
shadow: false,
gridLineWidth: 0.5
},
//title: 'Default Date Axis',
seriesDefaults: {
rendererOptions: {
//////
// Turn on line smoothing. By default, a constrained cubic spline
// interpolation algorithm is used which will not overshoot or
// undershoot any data points.
//////
smooth: true
}
},
legend: {
renderer: $.jqplot.EnhancedLegendRenderer,
show: true,
location: 'n',
placement: 'outsideGrid',
//shrinkGrid: true,
rendererOptions: {
numberRows: 1
}
},
//legend: {
// renderer: $.jqplot.EnhancedLegendRenderer,
// show: true,
// rendererOptions: {
// numberRows: 1
// }
//},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: { formatString: '%Y-%m-%d' },
min: '2008-09-01',
tickInterval: '1 month'
}
},
series: [{ lineWidth: 4, markerOptions: { style: 'square' } }],
series: [
{ label: 'IRR' },
{ label: 'MIRR' }
],
});
I have a bar chart where the first three series represent the expenses and the last series represent the revenue. I want to show the profit or loss for each month in percentage. Below is the image of current graph.
Here is my code for the same.
var s1 = [27362, 45273, 77020, 42059, 23764, 12803];
var s2 = [15920, 30220, 32800, 21900, 19500, 17300];
var s3 = [4100, 1800, 7150, 3600, 2400, 2400];
var s0 = [27208, 46371, 169374, 114879, 35692, 37669];
var ticks = ['March', 'April', 'May', 'June', 'July', 'August'];
$.jqplot.config.enablePlugins = true;
var plot3 = $.jqplot('chart1', [s1, s2, s3, s0], {
stackSeries: true,
animate: true,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true,
location: 'n',
},
rendererOptions: {
fillToZero: true,
barPadding: 0,
barMargin: 0,
barWidth: 55,
barDirection: 'vertical',
},
},
series: [
{
label: 'Equipment',
color: '#c5b47f'
},
{
label: 'Salaries',
color: '#eaa228'
},
{
label: 'O&M',
color: '#4bb2c5'
},
{
label: 'Revenue',
color: '#579575',
disableStack: true
}
],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontSize: '13pt'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
I want it to show the profit or loss as shown below
I'm trying to achieve this by three different approaches.
1) First approach is with pointLabels. With pointLabel I have to use 'stackedValue:true' which does not give me individual value of the series in a stack. Secondly, the position of the pointLabel is above the stacked bar and not above the group.
2) Second approach is to add a trendline. But the problem is y-axis values are in absolute number and the values of the trendline will be in percentage. Is it possible to show the percentage series in the same chart ?
2) Third approach is to calculate the % profit or loss for each month and then display it by inserting a div into the graph for each month. Sounds tricky but is it feasible ?
Any different approach from your side most welcome.
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 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 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);
};