set y axis values as zero for nonexisting x axis values in jqplot - jqplot

I am using jqplot to create a graphic.
I have an issue about the nonexisting values.
I create a graphic with 5 lines as shown http://www.popularjava.net/wp-content/uploads/statisticGraphic.png
As you see from the picture, there is only one value for some lines such as orange line.
However, I would like to show such nonexisting values with y=0.
I mean, I want to put y=0 for all dates if there is no point for any date.
Here is my code.
var minGraphicXValue = response.minGraphicXValue;
var maxGraphicXValue = response.maxGraphicXValue;
var dataSeriesList = response.dataSeriesList;
var plot1 = $.jqplot('countGraphicGrid', response.countArray, {
title: 'Count/Time Graphic - ' + selectedItemType + ":" + itemValue + " - " + StatisticGraphic.selectedGraphicPeriod,
axes: {
xaxis: {
label: "Time",
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
labelOptions: {
fontFamily: 'Helvetica',
fontSize: '14pt'
},
renderer: $.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
formatString: StatisticGraphic.tickFormatPattern,
angle: -30
},
tickInterval: StatisticGraphic.tickIntervalTime,
min: minGraphicXValue,
max: maxGraphicXValue,
drawMajorGridlines: false
},
yaxis: {
label: "Count",
tickOptions: {
formatString: '%d'
},
min: 0,
max: 100,
autoscale: true
}
},
legend: {
show: true,
placement: 'outside'
},
seriesDefaults: {
rendererOptions: {
smooth: true,
animation: {
show: true
}
},
showMarker: true
},
series: dataSeriesList,
highlighter: {
show: true,
sizeAdjust: 7.5,
tooltipOffset: 9
},
grid: {
background: 'rgba(57,57,57,0.0)',
drawBorder: false,
shadow: false,
gridLineColor: '#666666',
gridLineWidth: 1
}
});

I think the best way to do it is to format your data before your render them on your plot.
I mean add values for your nonexisting ones. You can use your (min|max)GraphicXValue and set them to 0 if non existing.

Related

jqplot: two y axis (decimal & percentage) for line chart

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' }
],
});

jqplot - Unwanted line at the left of the canvas

Does anyone see the problem in my code why this border apears?
I know that asking for the solution of a problem is not "best practice" but I have wasted some hours already and could not fix it...
I'm sure its just a simple config problem I just can not see but someone with more practice in jqplot can find in a few seconds...
Here is the code I'm using:
jQuery.jqplot(this.getNonHasheContainerName(), chartDrawingData, {
animate: false,
seriesColors: barChartColors,
seriesDefaults: barChartSeriesDefaults,
grid: ChartGridDefaults,
series: this.getBarChartSeriesLabels(chartMetadata.series),
legend: barChartLegendDefaults,
title: { show: false },
axes: barChartAxisDefaults(ticks, chartMetadata.showGrid)
});
var barChartColors = ['#9FC0DF', '#EFAD81'];
var barChartSeriesDefaults = {
renderer: jQuery.jqplot.BarRenderer,
rendererOptions: {
barMargin: 10,
highlightMouseOver: true,
animation:
{
speed: 2500
}
},
pointLabels: { show: true },
shadow: false
};
var barChartLegendDefaults = {
show: true,
location: 'e',
placement: 'outsideGrid'
};
var barChartAxisDefaults = function (ticks, showGrid) {
return {
xaxis: {
show: false,
renderer: jQuery.jqplot.CategoryAxisRenderer,
tickRenderer: jQuery.jqplot.CanvasAxisTickRenderer,
ticks: ticks,
tickOptions: {
angle: 45,
fontSize: "11px",
showGridline: false,
showMark: true,
//labelPosition: 'end',
mark: 'inside',
markSize: 10
},
},
yaxis: {
show: false,
min: 0,
tickOptions: {
showMark: false,// showGrid,
showLabel: false,// showGrid,
showGridline: false,
tickInterval: 1,
formatString: '%d',
//borderWidth: 1
},
},
x2axis: {
show: false
},
y2axis: {
show: false
}
};
};
var ChartGridDefaults = {
shadow: false,
background: '#ffffff',
borderWidth: 1,
drawGridlines: false,
drawBorder: false
};
var pieChartSeriesDefaults = {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
dataLabels: 'value',
fill: true,
sliceMargin: 2,
lineWidth: 5
},
shadow: false
};
var pieChartLegendDefaults = {
show: true,
location: 'e'
};
I HAVE GOT IT!!!
There is an other hidden (or i have overseen it in the documentation...) setting for the renderer:
yaxis: {
show: false,
min: 0,
tickOptions: {
showMark: false,// showGrid,
showLabel: false,// showGrid,
showGridline: false,
tickInterval: 1,
formatString: '%d',
},
**rendererOptions: {
drawBaseline: false
}**
}

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)

jqplot: split the xaxis tick text into words

The labels I use on axis for my graph contains text with more than one word. Like this:
and it looks bad. I tried (as you can see on the graph) to replace the wit spaces with brs or with \n in order to render the text in multiple lines. The result is not what I was expected to get.
How to split the ticks text into words and to draw each word on a row?
The <br/> is working will trying to split your text into two lines. See a working example here.
In order to make it work, don't forget to load some jqplot plugins : CanvasAxisTickRenderer, CategoryAxisRenderer.
You then need to apply tickRenderer: $.jqplot.CanvasAxisTickRenderer to your serie(s). You need as weel to apply renderer: $.jqplot.CategoryAxisRenderer onto your yaxis.
For me, <br/> didn't work and \n did.
My configuration:
jQuery.jqplot(element, configuration.series, {
stackSeries: true,
animate: false,
captureRightClick: false,
seriesColors: ['green', 'blue', 'yellow', 'orange', 'red'],
seriesDefaults: {
renderer: jQuery.jqplot.BarRenderer,
rendererOptions: {
shadowOffset: 0,
barDirection: 'horizontal',
highlightMouseDown: false,
barWidth: 20,
},
pointLabels: {
show: false
}
},
axesDefaults: {
min: 0,
minorTicks: 0,
tickOptions: {
formatString: '%d'
}
},
highlighter: {
show: false
},
axes: {
yaxis: {
renderer: jQuery.jqplot.CategoryAxisRenderer,
ticks: configuration.labels
},
xaxis: {
ticks: configuration.ticks,
label:'Hours',
labelOptions:{
fontFamily:'Helvetica',
fontSize: '10pt'
},
}
}
});

JQPlot Legend not showing in multiple columns even after setting numberColumns :3

I want to show Legends in multiple columns and just one row, but even after setting these properties in Legend rendererOptions, its not getting changed, and showing in only one column.
This is the code I am using:
$(document).ready(function () {
var obj = JSON.parse("[[65,68],[88,59],[78,68],[68,69],[88,88],[75,66]]");
$.jqplot.config.enablePlugins = true;
plot2 = $.jqplot('chart1', obj, {
animate: true,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barWidth: 25,
barPadding: 2,
shadow: false,
},
pointLabels: {
show: true,
}
},
series: [
{ label: 'English' },
{ label: 'Hindi' },
{ label: 'Maths' },
{ label: 'Science' },
{ label: 'Computers' },
{ label: 'History' }
],
seriesColors: ['#C0504D', '#1F497D', '#4BACC6', '#8064A2', '#9BBB59', '#F79646', '#948A54'],
grid: {
backgroundColor: "#FFFFFF",
gridLineColor: '#000000',
drawBorder: false,
shadow: false,
gridLineWidth: 0.5
},
legend: {
show: true,
location:'s![enter image description here][1]',
placement: 'outsideGrid',
shrinkGrid: true,
rendererOptions: {
numberColumns: 3,
numberRows : 1
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
ticks: ['FA 1', 'FA 2'],
tickOptions: {
angle: -90,
textColor: "#000000",
showGridline: true
},
},
yaxis: {
min: '0',
max: '100',
renderer: $.jqplot.CanvasAxisTickRenderer,
rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
ticks: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
tickOptions: {
textColor: "#000000",
showGridline: true,
formatString: "%d"
}
}
}
});
});
Set renderer: $.jqplot.EnhancedLegendRenderer in Legend options
JSFIDDLE
Code
$(document).ready(function () {
var obj = JSON.parse("[[65,68],[88,59],[78,68],[68,69],[88,88],[75,66]]");
$.jqplot.config.enablePlugins = true;
plot2 = $.jqplot('chart1', obj, {
animate: true,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barWidth: 25,
barPadding: 2,
shadow: false,
},
pointLabels: {
show: true,
}
},
series: [
{ label: 'English' },
{ label: 'Hindi' },
{ label: 'Maths' },
{ label: 'Science' },
{ label: 'Computers' },
{ label: 'History' }
],
seriesColors: ['#C0504D', '#1F497D', '#4BACC6', '#8064A2', '#9BBB59', '#F79646', '#948A54'],
grid: {
backgroundColor: "#FFFFFF",
gridLineColor: '#000000',
drawBorder: false,
shadow: false,
gridLineWidth: 0.5
},
legend: {
renderer: $.jqplot.EnhancedLegendRenderer,
show: true,
location:'s![enter image description here][2]',
placement: 'outsideGrid',
shrinkGrid: true,
rendererOptions: {
numberRows : 1
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
ticks: ['FA 1', 'FA 2'],
tickOptions: {
angle: -90,
textColor: "#000000",
showGridline: true
},
},
yaxis: {
min: '0',
max: '100',
renderer: $.jqplot.CanvasAxisTickRenderer,
rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
ticks: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
tickOptions: {
textColor: "#000000",
showGridline: true,
formatString: "%d"
}
}
}
});
});
If you set numberColumns : 1 the legend is look like this FIDDLE
It will only show first 3 series

Resources