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']
}
Related
I a trying to plot some information using a flot graph but I can not get the values to appear on the graph. This code was part of a demo file included in a template and so i have modified it to plot the data rather than using a randomise for the values, i am getting no errors but the chart isn't working and was hoping somebody could point me in the right direction.
My code is here:
init: function()
{
// apply styling
charts.utility.applyStyle(this);
this.plot = $.plot(
$("#chart_simple"),
[{
label: "Jobs",
data: this.data.d1,
lines: {fillColor: "#dd3333"},
points: {fillColor: "#dd3333"}
},
{
label: "Resumes",
data: this.data.d2,
lines: {fillColor: "#282b30"},
points: {fillColor: "#282b30"}
}], this.options);
}
},
// lines chart with fill & without points
chart_lines_fill_nopoints:
{
// chart data
data:
{
d1: [[1,100], [2,150], [3,100]],
d2: [[1,100], [2,150], [3,100]]
},
// will hold the chart object
plot: null,
// chart options
options:
{
grid: {
show: true,
aboveData: true,
color: "#3f3f3f",
labelMargin: 5,
axisMargin: 0,
borderWidth: 0,
borderColor:null,
minBorderMargin: 5 ,
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 20,
backgroundColor : { }
},
series: {
grow: {active:false},
lines: {
show: true,
fill: true,
lineWidth: 2,
steps: false
},
points: {show:false}
},
legend: { position: "nw" },
yaxis: { min: 0 },
xaxis: {ticks:11, tickDecimals: 0},
colors: [],
shadowSize:1,
tooltip: true,
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
}
},
So, digging a bit, I see you are using javascript from here. Looking at a working example here, you've broken their code in the following ways:
1.) You no longer seem to have a parent charts object, so
charts.utility.applyStyle(this);
isn't going to work.
2.) The init function is part of the chart_lines_fill_nopoints object, in your cut/paste code it isn't anymore.
3.) In your sample code you never actually call the init function to draw the plot.
4.) In the options backgroundColor : { } is invalid for flot (maybe this is part of the missing charts.utility.applyStyle).
Taking all this into account here's a fiddle which makes this code work.
Generating flot plots with the above code feels unnecessarily convoluted. Perhaps it makes sense when using these templates, but if you just using this as an example of how to call flot it's not very straightforward.
Also, please next time you post a question, include all relevant information (like where you found this code and how you changed it). Taken out of context this code makes little sense.
This code is working
//Defining data for the chart
var data=
{
d1: [[1,100], [2,150], [3,100]],
d2: [[1,100], [2,150], [3,100]]
};
//Defining options for the chart
var options=
{
grid: {
show: true,
aboveData: true,
color: "#3f3f3f",
labelMargin: 5,
axisMargin: 0,
borderWidth: 0,
borderColor:null,
minBorderMargin: 5 ,
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 20,
backgroundColor : { }
},
series: {
grow: {active:false},
lines: {
show: true,
fill: true,
lineWidth: 2,
steps: false
},
points: {show:false}
},
legend: { position: "nw" },
yaxis: { min: 0 },
xaxis: {ticks:11, tickDecimals: 0},
colors: [],
shadowSize:1,
tooltip: true,
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
}};
// shorthand for document.ready
$(function(){
this.plot = $.plot(
$("#chart_simple"),
[{
label: "Jobs",
data: data.d1,
lines: {fillColor: "#dd3333"},
points: {fillColor: "#dd3333"}
},
{
label: "Resumes",
data: data.d2,
lines: {fillColor: "#282b30"},
points: {fillColor: "#282b30"}
}], this.options);
});
Check out the working example here on jsfiddle.
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
}
});
});
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 am expecting pretty weird problem with flot v.0.7. I have multiple axes, configured like that:
var plotData = [
{ data: data1 },
{ data: data2, yaxis: 2 }];
var options = {
selection: { mode: "x" },
xaxis: { mode: "time" },
yaxis: [
{ min: 0 },
{
min: 0,
position: "right",
zoomRange: false,
alignTicksWithAxis: 1,
tickFormatter: formatter,
}
],
grid: { markings: weekendAreas },
zoom: { interactive: true },
grid: {
clickable: true,
hoverable: true,
borderWidth: 1,
},
legend: { show: false },
};
var plot = $jq.plot(container, plotData, options);
But what I get is that both Y series are located on the right (not only second Y series). There is no formatter for my second series tick. Y values can be less then zero, if zooming. If I don't use array type for yaxis and define it as it would only be one series, then everything works fine. What am I doing wrong?
Instead of yaxis: [ ... ], use yaxes: [ ... ].
See the section of the docs entitled Multiple Axes for more info.
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.