I want to render a very simple horizontal stacked bar with only two facts. Without any axes.
Like this: My target.
But the only thing i could do is this: My actuell Version.
The Problem is that when i only insert two values (e.g. "2" and "7") it only shows me one bar for the "7".And the second problem is the tick on the left side with these little lines. Dont know how to solve this. Any ideas ?
My Code:
$(document).ready(function(){
var s1 = [2];
var s2 = [7];
var s3 = [10];
plot3 = $.jqplot('chart1', [s1, s2, s3], {
// Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
// Put a 30 pixel margin between bars.
// barMargin: 30,
// Highlight bars when mouse button pressed.
// Disables default highlighting on mouse over.
highlightMouseDown: true
},
pointLabels: {show: true}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
},
xaxis: {
// Don't pad out the bottom of the data range. By default,
// axes scaled as if data extended 10% above and below the
// actual range to prevent data points right on grid boundaries.
// Don't want to do that here.
padMin: 0,
//max: 15,
}
},
axesDefaults:{
showTicks: false,
showTickMarks: false,
},
legend: {
show: false,
location: 'e',
placement: 'outside'
},
grid:{
drawGridlines: false,
borderWidth: 0,
shadow: false,
background:'#ffffff',
gridLineColor: '#FFFFFF',
},
});
// Bind a listener to the "jqplotDataClick" event. Here, simply change
// the text of the info3 element to show what series and ponit were
// clicked along with the data for that point.
$('#chart3').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
It looks like the padMin: 0 setting on xaxis is causing the second series to be incorrectly displayed. If you remove that altogether it works as you want.
As for removing the grid line ticks, try adding this to the axesDefaults settings
tickOptions: {
markSize: 0,
}
So it will now look like this:
axesDefaults:{
showTicks: false,
showTickMarks: false,
tickOptions: {
markSize: 0,
}
},
If it doesn't work with just that, try using the canvasAxisTickRenderer, more details here: http://www.jqplot.com/tests/rotated-tick-labels.php
Related
I am using RGraph in our angular 7 application.
and able to show the 3d graphs and all.
I have a requirement to get index when user clicks on x axis labels.
Some times not able to update the graph data dynamically.(this issue is producing in when we deploy code in server but as a developer I have to fix it.)
please find in the below image.
Is it good way to remove and add same 3d graph for every user action so that overlapping will not come again.
I need x axis title and y axis title also.
If any one know kindly help me.
1.That's possible for a 2D chart by using two charts - the second positioned over the labels of the first. See this example:
https://codepen.io/rgraph/full/poEJKKm
There's an example of a 3D chart there too with the axes enabled.
<script>
labels = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
bar = new RGraph.Bar({
id:'cvs',
data: [8,4,6,3,5,4,2,8,6,4,2,2],
options: {
marginInner: 10,
xaxisLabels: labels,
xaxis: false,
yaxis: false,
backgroundGridVlines: false,
backgroundGridBorder: false
}
}).draw();
bar2 = new RGraph.Bar({
id:'cvs',
data: [1,1,1,1,1,1,1,1,1,1,1,1],
options: {
xaxis: false,
yaxis: false,
backgroundGrid: false,
marginBottom: 10,
marginTop: 215,
colors: ['transparent'],
variantThreedXaxis: false,
variantThreedYaxis: false,
yaxisScale: false,
tooltips: '\0',
tooltipsHighlight: false
}
}).draw().on('click', function (e, shape)
{
alert(shape.dataset);
});
</script>
bar = new RGraph.Bar({
id:'cvs2',
data: [8,4,6,3,5,4,2,8,6,4,2,2],
options: {
variant: '3d',
marginInner: 10,
xaxisLabels: labels
}
}).draw();
(Use the "change view" button to see the code)
Updating is just a case of setting the new data on the object:
myBar.data = [4,8,6,3,5,4,8,7,8,4,6,9];
And then calling the redraw method:
RGraph.redraw();
If you don't call the redraw method it won't change.
If you removing the chart from the ObjectRegistry too and there's not 1000 user actions then I suppose it would be OK. You can clear the ObjectRegistry with:
RGraph.ObjectRegistry.clear();
There are properties for that:
https://www.rgraph.net/canvas/bar.html#xaxis-properties
https://www.rgraph.net/canvas/bar.html#yaxis-properties
I've been tinkering with this and this code should work on the v5.26 libraries:
<script>
labels = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
bar = new RGraph.Bar({
id:'cvs1',
data: [8,4,6,3,5,4,2,8,6,4,2,2],
options: {
variant: '3d',
marginInner: 10,
xaxisLabels: labels,
backgroundGridVlines: false,
backgroundGridBorder: false
}
}).draw();
bar2 = new RGraph.Bar({
id:'cvs1',
data: [1,1,1,1,1,1,1,1,1,1,1,1],
options: {
xaxis: false,
yaxis: false,
backgroundGrid: false,
marginBottom: 10,
marginTop: 215,
colors: ['transparent'],
variantThreedXaxis: false,
variantThreedYaxis: false,
yaxisScale: false,
tooltips: '\0',
tooltipsHighlight: false
}
}).draw().on('click', function (e, shape)
{
alert(shape.dataset);
});
</script>
I am using flotchart JS for showing bar graphs. However, I can't seemed to fix the spacing between bars.
I have enabled panning already. However, sets the width of the bar according to the placeholder. How can set each bar's spacing according to its label?
this is my code:
$.plot("#graph", [ data ], {
series: {
bars: {
show: true,
barWidth: 0.6,
align: "center"
}
},
xaxis: {
mode: "categories",
showTicks: false,
gridLines: false,
panRange: [0,null],
},
yaxis: {
panRange: [0, null],
plotPan: false //pan axis is allowed for plot pan
},
pan: {
interactive: true,
mode: "smart",
active: true
}
});
An alternative solution to your problem could be to rotate the tick labels for example by using the tickrotor plugin:
xaxis: {
mode: "categories",
showTicks: false,
gridLines: false,
panRange: [0,null],
rotateTicks: 90
},
You may need to increase the height of the chart since the labels now take up more space. See this fiddle for a full example.
You can achieve this by limiting the number of bars shown at once by giving a max property for the xaxis:
xaxis: {
mode: "categories",
showTicks: false,
gridLines: false,
panRange: [0,null],
max: 7, // set according to your needs, maybe dynamic depending on chart width
min: 0
},
You then have to use panning to see the other bars. See this fiddle for an example.
http://www.humblesoftware.com/flotr2
I am trying to modify the default font size, weight, and color for the Flotr2 radar chart. I could change this in the flotr2.js file but I want to leave the source file alone.
Currently when I set a larger fontSize in the Flotr.draw call it just spaces out the labels further.
function drawGraph(container, series, ticks)
{
Flotr.draw(container, series, {
colors: colors,
HtmlText: true,
fontSize: 30,
radar: {
show: true
},
grid: {
circular: true,
minorHorizontalLines: true
},
yaxis: {
min: 0,
max: 7,
minorTickFreq: 1,
showLabels: false
},
xaxis: {
ticks: ticks,
titleAlign: 'right'
},
legend: {
position: 'ss',
container: document.getElementById("legendItems")
}
});
}
I'm not sure what else to try...
Accessing the variables from the window object before drawing the graph seems to work well.
window.Flotr.defaultOptions.fontSize = 8;
window.Flotr.defaultOptions.xaxis.color = '#000000';
Couldn't find a way to change the font weight.
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.
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.