I am using jqplot CategoryAxisRenderer for my x-axis data. I need zooming also. But I am able to zoom only y axis. Please suggest a solution. I am new to charts. I searched a lot but didnt get a proper answer. Please provide an answer.
This is my code.
function renderBarChart(){
barChartData = [["abcd",56], ["efgh",60], ["ghij",79],["klmn",20],["opqr",34],["stuv",67],["wxyz",42],["adfg",77],["ghjy",29]];
plot2 = $.jqplot('barChart', [barChartData], {
seriesColors: ["#4fb3ce"],
animate: !$.jqplot.use_excanvas,
highlighter: {
show: true,
showMarker:false,
tooltipLocation:'n',
tooltipOffset: 6,
tooltipContentEditor:tooltip_formatter_bar
},
grid: {
background: '#f7fafa',
drawBorder: false,
shadow: false,
gridLineColor: '#eceeee',
gridLineWidth: 1
},
legend: {
show: false
},
seriesDefaults:{
showMarker:false,
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barPadding: 0,
barMargin: 0,
barWidth:20,
shadowAlpha: 0.04,
shadowOffset:1.5,
highlightMouseOver: false,
dataLabels: 'percent'
},
pointLabels:{
show: true,
ypadding : 5,
color: '#7c7c7c',
}
},
axesDefaults: {
rendererOptions: {
baselineWidth: 1,
baselineColor: '#eceeee',
drawBaseline: true
}
},
axes: {
xaxis: {
showMark: false,
renderer: $.jqplot.CategoryAxisRenderer,
//ticks: barTicks,
//pad: 0,
label:'Associate ID',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
labelOptions: {
fontFamily: 'Arial',
fontSize: '12px'
},
tickOptions: {
angle: 0,
textColor: '#7c7c7c',
showMark: false,
fontSize: '10px'
}
},
yaxis: {
tickOptions: {
showMark: false,
fontSize: '10px'
},
min:0,
max:100,
tickInterval:10,
label: 'Incident',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
labelOptions: {
fontFamily: 'Arial',
fontSize: '12px'
}
}
},
cursor:{
show: true,
zoom:true
}
});
}
Have you tried using contrainZoomTo: 'x'.
cursor: {
show: true,
showTooltip: true,
zoom: true,
constrainZoomTo: 'x'
},
Related
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.
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' }
],
});
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
}**
}
I have recently started using jqplot library for rendering graphs in our web app. I have downloaded version 1.0.8r1250. I am working with version 1.7 of jquery. I am trying to draw one bar graph and one line graph in the same canvas. Based on the documentation and the examples in the jqplot distribution, here is how I have configured it.
function drawGraph(data) {
$("#char1").empty();
$.jqplot.config.enablePlugins = true;
var lockinsByMarkup = [];
var lockinMarkupData = 'N/A':0, '<=10':16, '>10-20':15, '>20-30':1, '>30-40':0, '>40-50':3, '>50-60':10, '>60-70':0, '>70-80':12, '>80-90':0, '>90-100':0, '>100':0;
for (var prop_name in lockinMarkupData) {
lockinsByMarkup.push([prop_name, lockinMarkupData[prop_name]])
}
var recommendations = [1,2,3,4,5,6];
var plot1 = $.jqplot('chart1', [lockinsByMarkup, recommendations], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
title: 'Current Customer Item Prices (CIP)',
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions: {
showGridline: false
}
},
seriesDefaults:{
pointLabels: { show:true, hideZeros:true}
},
axes: {
xaxis: {
label:'Markup %',
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontFamily: 'Georgia',
fontSize: '10pt',
angle: -30
}
},
yaxis: {
label: '# of CIP Records',
showTicks: false
}
},
series: [
{
renderer: $.jqplot.BarRenderer
},
{
renderer: $.jqplot.LineRenderer, // this is the default, but specifying just in case
showMarker: false,
showLine: false,
pointLabels: {labels: ['CFP', 'Min', 'Peer', 'Start', 'Default', 'Upper Limit']}
}
],
grid:{
drawBorder: true,
shadow: false
}
});
}
I have the following div on the page -
<div id="chart1" style="height:400px;width:500px; "></div> and I am executing the above function on the click of a button.
What is happening is, I am getting this error - Uncaught illegal access in jquery.jqplot.min.js.
If I just have one series, it is working fine. I have been struggling with error since yesterday afternoon. Can somebody please tell me what I am doing wrong?
I have included following js and css files on my page
jquery-1.7.min.js
jquery.jqplot.min.js
jqplot.barRenderer.min.js
jqplot.categoryAxisRenderer.min.js
jqplot.pointLabels.min.js
jqplot.canvasTextRenderer.min.js
jqplot.canvasAxisTickRenderer.min.js
jqplot.canvasAxisLabelRenderer.min.js
jquery.jqplot.min.css
Thanks for your help.
here is the solution: jsFiddle link
$(document).ready(function(){
function drawGraph(data) {
$("#chart1").empty();
$.jqplot.config.enablePlugins = true;
var lockinsByMarkup = [];
var recommendations = [];
var lockinMarkupData = {'N/A':0, '<=10':16, '>10-20':15, '>20-30':1, '>30-40':0, '>40-50':3, '>50-60':10, '>60-70':0, '>70-80':12, '>80-90':0, '>90-100':0, '>100':0};
for (var prop_name in lockinMarkupData) {
lockinsByMarkup.push([prop_name, lockinMarkupData[prop_name]]);
recommendations.push([prop_name, Math.round(Math.random()*10)]);
}
var plot1 = $.jqplot('chart1', [lockinsByMarkup, recommendations], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
title: 'Current Customer Item Prices (CIP)',
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions: {
showGridline: false
}
},
seriesDefaults:{
pointLabels: { show:true, hideZeros:true}
},
axes: {
xaxis: {
label:'Markup %',
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontFamily: 'Georgia',
fontSize: '10pt',
angle: -30
}
},
yaxis: {
label: '# of CIP Records',
showTicks: false
}
},
series: [
{
renderer: $.jqplot.BarRenderer
},
{
renderer: $.jqplot.LineRenderer, // this is the default, but specifying just in case
showMarker: true,
showLine: true,
// pointLabels: {labels: ['CFP', 'Min', 'Peer', 'Start', 'Default', 'Upper Limit']}
}
],
grid:{
drawBorder: true,
shadow: false
}
});
}
drawGraph();
});
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