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