Hi im using jqplot graph. I need to hide the Circular points that are currently displayed on the plot chart for each value in the array except the last point.
I use the following code to display the chart. I used "show marker : false" option, but it hides all circular in the graph. Please help me how to show only one circular point in the graph.
<div id="chart2"></div>
var line2 = [['2012-10-02', 20],['2012-10-03', 45],['2012-10-04', 35],['2012-10-05', 32],['2012-10-06', 30],['2012-10-07', 25]];
var plot1 = $.jqplot('chart2', [line2], {
seriesDefaults: {
showMarker: false
},
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -90,
formatString: '%m/%d/%Y'
},
}
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
highlighter: {
show: true
},
cursor: {
show: false
}
});
I want to achieve the below screen as my output. please help me how this could be done. Any help will be appreciated.
There is no direct way of doing this using jqplot. but you can achieve this by making the following changes: jsFiddle link
$(document).ready(function(){
var line2 = [['2012-10-02', 20],['2012-10-03', 45],['2012-10-04', 35],['2012-10-05', 32],['2012-10-06', 30],['2012-10-07', 25]];
var line3 = [['2012-10-07', 25]];
var plot1 = $.jqplot('chart1', [line2, line3], {
series: [
{
showMarker: false
},
{
showMarker: true
}
],
axes:{
xaxis:{
renderer:$.jqplot.CategoryAxisRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -90,
formatString: '%m/%d/%Y'
},
}
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
highlighter: {
show: true
},
cursor: {
show: false
}
});
});
Related
I am writing the code for bar chart using jqplot. When i run the below function :
problem: Only one color is displayed in all three data(the first color)
how do display different color for ticks?
$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
var d1=${likes[0]};
var d2=${comonelikes[0]};
var d3=${comtwolikes[0]};
var a=[d1,d2,d3];
var ticks = [${myorg},${compOne},${compTwo}];
plot1 = $.jqplot('chart1',[a], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true },
},
seriesColors :[
'#57c1b4','#bd66a9',
'#abb3b6'
],
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks:ticks,
tickOptions: { mark: null,
fontSize: 0
}
},
yaxis: {
min:0,
max:3000000,
tickOptions: {formatString: '%d'},
numberticks:6
}
},
highlighter: { show: true }
});
$('#chart1').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
Is there any solution to this?
You need to tell the plot to paint the bars in your colors, using the varyBarColor Renderer Option.
Add it to your seriesDefaults:
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true },
rendererOptions: {
// Set varyBarColor to true to use the custom colors on the bars.
varyBarColor: true
}
},
Here is a working jsfiddle example with your code and the additional bar colors.
New to jqPlot and am struggling with the data and labels for Horizontal charts.
Here is the problem. My desired chart should look like this:
http://www.ifthen.biz/DesiredChart.png
My actual chart however, looks like this:
http://www.ifthen.biz/ActualChart.png
Cannot seem to get the point labels (in this case Yes and No) to correspond to the data for each question.
Each question has a Yes or No answer. For each Yes or No I tally the answers so that i can get the desired chart.
Please see the Code below:
<script>
$(document).ready(function() {
var q1 = [20, 58];
var q2 = [5, 21];
var plot1 = $.jqplot('quickStatsChart', [q1,q2], {
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
shadowAngle: 60,
showMarker: false,
rendererOptions: {
barDirection: 'horizontal'
},
pointLabels:{
show: true,
location: 'e',
labels: ['Yes','No']
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ['Question 1', 'Question 2']
}
}
});
});
</script>
Any ideas how I can make this work?
++Tx
Here is the new code that I tried:
<script>
$(document).ready(function() {
// [ tally question 1, tally question 2]
var sX = [[[2,'q1'], [4,'q2']], // Yes'
[[5,'q1'], [1,'q2']]]; // No's
var plot1 = $.jqplot('quickStatsChart', sX, {
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
shadowAngle: 60,
showMarker: false,
rendererOptions: {
barDirection: 'horizontal'
},
pointLabels:{
show: true,
location: 'e',
labels: ['Yes','No']
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
});
</script>
The outcome is the same as the Actual Chart above.
Check this link As you can see the second number of the variables is the name of the yaxis
$(document).ready(function(){
var plot2 = $.jqplot('chart2', [
[[2,1], [4,2], [6,3], [3,4]],
[[5,1], [1,2], [3,3], [4,4]],
[[4,1], [7,2], [1,3], [2,4]]], {
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
shadowAngle: 135,
rendererOptions: {
barDirection: 'horizontal'
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
});
Try deleting it is the only difference. If works change q1 with Yes and q2 with No
pointLabels:{
show: true,
location: 'e',
labels: ['Yes','No']
}
I'm working with jqplot, and am seeing some odd series label behavior.
If the value is too large, the labels don't show. I can't find a setting that preserves canvas area for the labels. Any thoughts?
[example fiddle] http://jsfiddle.net/abenrob/nDcPB/11/
$(document).ready(function(){
optionsObj = {
grid: {
background: "rgba(0,0,0,0.0)",
drawBorder: false,
shadow: false
},
seriesColors: ["#6699FF"],
seriesDefaults:{
shadow:false,
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
barWidth:15,
barMargin: 5
}
},
series:[
{pointLabels:{
show: true
}}],
axesDefaults: {
rendererOptions: {
drawBaseline: false
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions:{
showGridline:false,
markSize:0
}
},
xaxis:{
tickOptions:{
show: false,
showGridline:false,
markSize:0
}
}
}
};
// labels not shown
plot = $.jqplot('chart1', [[[507740000000,'Budget'],[496740000000,'Forecast'],[506740000000,'Expended']]], optionsObj)
// labels shown
plot2 = $.jqplot('chart2', [[[50774000,'Budget'],[49674000,'Forecast'],[50674000,'Expended']]], optionsObj)
});
Doesn't seem like jqPlot will render them if there's not enough space to the right of your bars. You can use the xaxis pad option to provide more space but I also had to throw a min: 0 in there to get the auto-scaling to behave a little saner:
...
xaxis:{
tickOptions:{
show: false,
showGridline:false,
markSize:0
},
min: 0,
pad:1.8
}
...
Updated fiddle here.
I want to draw chart dynamically..
depends of selection by user. below is screen shot for that..
in this I have doing something line this..
var plot2 = $.jqplot(div, mainArray, {
title:chartValue[1],
seriesDefaults: {
lineWidth:1,
markerOptions: { show:true, size:3 },
rendererOptions: {
smooth: true
}
},
axesDefaults: {
labelOptions:{textColor:'#313233', fontSize:'11px',fontWeight:'Bold', fontFamily:'Arial'}
},
axes:{
xaxis:{
renderer: $.jqplot.DateAxisRenderer,
rendererOptions:{
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickInset:0
},
//tickRenderer:$.jqplot.CanvasAxisTickRenderer,
tickOptions:{
autoscale:true,
fontSize:'10px',
fontFamily:'Arial',
angle:-90,
formatString: dFormat
},
//min: minDate,
//max: maxDate,
tickInterval:timeInterval
},
yaxis:{
min: 0,
max: maxV.length > 1 ? parseInt(maxV) + ((parseInt(maxV)/10)): parseInt(maxV)+2,
tickOptions: {
formatString: '%d',
fontSize:'10px',
fontFamily:'Arial',
showGridline: true,
showLabel: true
},
base: Math.E,
forceTickAt0: true
}
},
legend: {
show: true,
labels: legendNames,
//placement: 'outsideGrid'
renderer:$.jqplot.EnhancedLegendRenderer,
location: 'ne', // compass direction, nw, n, ne, e, se, s, sw, w.
xoffset: 10, // pixel offset of the legend box from the x (or x2) axis.
yoffset: 10 // pixel offset of the legend box from the y (or y2) axis.
},
cursor:{
show:true,
style:'auto',
followMouse:true,
zoom:true,
looseZoom:true,
showTooltip:false
}
});
in this starting of time from 12.00. but i want it near to data. how that`s possible?
Note:
mainArray = data
dFormat = string format for date time
I think you just need to set the min property that you have commented out under xaxis.
Depending on how your mainArray is formatted you may be able to get the first date value with mainArray[0][0][0] or mainArray[0][0]. Or, you may have to set/pass the variable minDate.
I have a figure including two lines (one horizontal line, and one parabolic curve), and I would like to show the value of the crossing over point as well as label it with text "MSY". I tried to use the option pointLabels, but it seemed like I did not find the right way. Can anyone give me some hints? Here is the demo of the problem.
jquery code:
$(document).ready(function() {
$.jqplot.config.enablePlugins = true;
var s1 = [[0.0, 0.0], [1.0, 0.036], [2.0, 0.064], [3.0, 0.084], [4.0, 0.096], [5.0, 0.1], [6.0, 0.096], [7.0, 0.084], [8.0, 0.063], [9.0, 0.036], [10.0, 0.0]];
$.jqplot('chart1', [s1], {
seriesDefaults: {
showMarker: false,
pointLabels: {
show: false
}
},
axes: {
xaxis: {
label: 'X label',
pad: 0
},
yaxis: {
label: 'Y label',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
},
legend: {
show: true,
location: 'ne',
placement: 'inside',
fontSize: '11px'
},
canvasOverlay: {
show: true,
objects: [
{
horizontalLine: {
y: 0.1,
color: 'rgb(100, 55, 124)',
show: true,
}}
]
},
pointLabels: {
show: true,
labels: [[5, 0.10]],
hideZeros: true
}
})
})
There is no straight solution but assuming the parabola to be uniform. I just made some assumptions to calculate the vertex of a parabola. Its just an approximation .And prepared an array that could be feeded to Series label.
var k = Math.round(s1.length / 2); //Assuming your Parabola to be uniform
var l = [];
var i=0;
while(i<(k-1))
{
l.push("");
i++;
}
l.push('MSY');
Now we have the l array now I would feed it to the series option so as to get the required result.
series: [
{
pointLabels: {
show: true,
labels: l
}}],
I have made the necessary changes in fiddle and updated it http://jsfiddle.net/JWhmQ/292/ .
I would recommend you to find a small plugin or build a small script which would give you the tip or vertex of the parabola and use the above for that. It would solve your problem.