jqplot text labels on y-axis - label

I'm trying to make a Gantt like chart in jqplot. I want to make two timelines in the same plot. As you can see by the code and jsFiddel, I've got this working for the most part.
I've added a few series manually (and added a series config) ofcourse this will be in a loop later.
The problem I have now is that on the Y-axis I don't want numbers, but the text labels of the series ("contact" and "Locatie"). It would be nice if this is done dynamically, but 'hardcoding' them is not a problem since I only need two at the moment.
I can't find an example that does this. Any ideas?
here's the jsFiddle: http://jsfiddle.net/NVbjv/1/
var seriesCnf = Array();
var loc = Array();
// add location values
loc.push([[1340877534000, 1, 'lagehaghorst'] , [1340877569000, 1, 'lagehaghorst' ]]);
seriesCnf.push({color: "#941B80", label: "Locatie"});
loc.push([[1340877779000, 1, 'weegnet'] , [1340877869000, 1, 'weegnet' ]]);
seriesCnf.push({color: "#941B80"});
loc.push([[1340877989000, 1, 'lagehaghorst'] , [1340878139000, 1, 'lagehaghorst' ]]);
seriesCnf.push({color: "#941B80"});
// add ignition values
loc.push([[1340877534000, 2, 'uit'], [1340877561000, 2, null]]);
seriesCnf.push({color: "#FF0000", showMarker:false, label: "Contact"});
loc.push([[1340877561000, 2, 'aan'], [1340877779000, 2, null]]);
seriesCnf.push({color: "#00FF00", showMarker:false, pointLabels: {location: 'n'}});
loc.push([[1340877779000, 2, 'uit'], [1340877839000, 2, null]]);
seriesCnf.push({color: "#FF0000", showMarker:false});
loc.push([[1340877839000, 2, 'aan'], [1340878019000, 2, null]]);
seriesCnf.push({color: "#00FF00", showMarker:false, pointLabels: {location: 'n'}});
loc.push([[1340878019000, 2, 'uit'], [1340878139000, 2, null]]);
seriesCnf.push({color: "#FF0000", showMarker:false});
plot1 = $.jqplot('container', loc,{
seriesColors: ["#941B80"],
title: "Tijdlijn",
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
formatString: '%R',
angle: 0
},
},
yaxis: {
min: 0,
tickInterval: 1,
}
},
seriesDefaults: {
showMarker:true,
pointLabels:{
show:true,
location:'s',
labelsFromSeries: true,
formatter: $.jqplot.DefaultTickFormatter,
}
},
series: seriesCnf,
grid: {
background: '#ffffff'
}
});

Related

How to show Profit or loss percentage for each month in a bar chart?

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.

Is it possible to have reqular bar and stacked bar in the same jqPlot chart?

I am trying to build a bar chart where 1st series represent the revenue and the next three represent different kind of expenses. So 1st series to be a single bar and the rest three series as stacked bar. Here is my code for the same.
var s0 = [15, 17, 19, 21];
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 4];
var s3 = [14, 9, 3, 8];
var ticks = ['May', 'June', 'July', 'August'];
var plot3 = $.jqplot('chart1', [s0, s1, s2, s3], {
stackSeries: true,
animate: true,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true,
},
rendererOptions: {
fillToZero: true,
barMargin: 30,
barWidth: 50,
barPadding: 5,
barDirection: 'vertical'
},
},
series: [
{
disableStack: true,
label: 'Revenue'
},
{label: 'Expense1'}, {label: 'Expense2'}, {label: 'Expense3'}
],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontSize: '13pt'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
I have addded disableStack: true for the first series to exclude it from the stack but the chart still considers it as a part of the stack. Here is the output of my code.
Is there a way to fix this ? Thanks.
Yes. It is the order of the series you pass as argument that is not correct.
BEFORE the stacked series
AFTER the single bar series
and not viceversa...
So you have to move the first series as the last argument...
var plot3 = $.jqplot('chart', [s1, s2, s3, s0], {
and then you need to set the disableStack property on 'true' for the last series...
series: [
{label: 'Expense1'}, {label: 'Expense2'}, {label: 'Expense3',label: 'Revenue', disableStack: true}
],
...and you need to adjust the margins, widts and padding of the columns
as you prefer...

jqplot: set x-axis label max-height

How to reduce height of labels for jqplot?
I want to have the label in two "rows" instead of one.
It would have max-height allowed and if label is longer, then it will be broken into more "rows".
var chartData = [[['Portfolio Risk', 1]],
[['Model Risk', 4]],
[['Recovery Risk', 3]],
[['Capability Risk', 1]],
[['Forward flow risk', 5]]];
var ticks = ['Portfolio Risk', 'Model Risk', 'Recovery Risk', 'Capability Risk', 'Forward flow risk'];
plot2 = $.jqplot('chart1', chartData, {
seriesColors: ['#85802b', '#00749F', '#73C774', '#C7754C', '#17BDB8'],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
}
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontSize: '10pt'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
angle: 90
},
},
yaxis: {
tickOptions: {
formatString: '%d'
},
max: 5,
min: 0
}
},
legend: {
show: true,
placement: 'outside',
labels: ticks
},
});
To play in jsfiddle: http://jsfiddle.net/renatevidruska/27EPk/

After replot the chart grid lines are disappear

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)

Get series Label name to display as a text

I have a bar chart. Please find the below code of the bar chart. Also find the attached image which is the result of the given script.
$(document).ready(function(){
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 2];
var s3 = [14, 9, 3, 8];
var tickx = ["aaa", "bbb", "ccc"];
plot3 = $.jqplot('chart3', [s1, s2, s3], {
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
highlightMouseDown: true
},
pointLabels: {show: true}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: tickx
}
}
});
$('#chart3').bind('jqplotDataRightClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
On right click on the bar it will display the value of right clicked bar.
You Right Clicked: series: 2, point: 1, data: 2,9.
Here, the value 2 in the data value (data: 2,9) is the xaxis series number. Instead of series name i would like to get the tick used in the chart.
In this above script tick given is : ["aaa", "bbb", "ccc"];
I want the output displayed as
if the user clicks the series 1 axis. result should be
You Right Clicked: series: 2, point: 1, data: 1,7, series label: aaa.
Please help me to achieve this. Thanks in advance.
Regards,
Antony
Read my comment above. If you are after the xaxis category position on the right-click, use this:
$('#chart3').bind('jqplotDataRightClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data + ' category label: ' + plot3.axes.xaxis.ticks[pointIndex]);
}
);
In your event handler.

Resources