How can i fill a flot line graph with no opacity?
lines: {
show: true,
fill: true,
lineWidth:1
}
I think you've mixed-up the terms 'opacity' and 'transparency'. It sounds like what you actually want is no transparency, i.e. a solid color that doesn't allow anything in the background to show through.
To control transparency in Flot, change the 'fill' option from 'true' to a number from 0 to 1, where 0 is fully-transparent and 1 is fully opaque. See customizing the data series in the API docs for more info.
Flot documentation agrees with DNS's answer, but at least in current stable version (0.8.1) I couldn't make it work.
Checking the Flot source I came up with this solution:
'bars': {
show: true,
fill: 1.0,
fillColor: 'rgba(255,230,230,0.5)',
lineWidth: 1,
}
I didn't test it for lines, but it should work with them too.
If you're using flotr2, you'll notice that none of these solutions work. Instead, try:
lines: {
fillOpacity:1.0,
show: true,
fill: true,
lineWidth:1
}
Related
I am Japanese, and I want to write Japanese words vertically in Fabric.js.
Japanese language has small letters, and the positions of the them are top-left corner in vertical writing.
So, I want to change the position of a small letter in iText.
I thought that I can change the position of a character by using "styles" parameter of iText, so I wrote as follows.
var iTextSample = new fabric.IText('h\ne\nl\nl\no', {
left: 50,
top: 50,
fontFamily: 'Helvetica',
fill: '#333',
lineHeight: 1.1,
styles: {
1: {
0: { textDecoration: 'underline', ←★ WORK
fontSize: 80, ←★ WORK
top:-10, ←★ NOT WORK
transformMatrix: [ 1, 0, 0, 1, 18, -50 ] ←★ NOT WORK
},
},
}
});
https://jsfiddle.net/uemon/tLy9eqj6/77/
The 'textDecoration' and 'fontSize' worked, but the 'top' or 'transformMatrix' didn't work.
Can't I use 'top' or 'transformMatrix' in the "styles" parameter ?
How can I change the position of one character ?
Thank you in advance.
So from the use of textDecoration property i guess you are on the 1.7 or similar version.
You should really move to the 2.0 version that has integrated support for multibyte languages and composition.
Said that, there is no support for vertical text in fabricjs at all.
This may change in the future.
You should really go here:
https://github.com/kangax/fabric.js/issues/511
refresh the request and maybe add some detail about it, because the actual mantainer may have no clue on how vertical text should work regarding input, decorations, multiple columns and so on.
I have been using flot for a couple days and its great, but I can't seem to find an answer to this:
Is it possible to display the xaxis/timeline ticks on both the top and bottom of my chart?
My chart has a large height and it's hard for the user to know which date the points are on when scrolling away from the top where the time ticks are currently displayed.
I searched around and all I found was this one issue on github which appears to have never been implemented:
https://github.com/flot/flot/issues/1040
Thanks in advance!
You can't do that with the default options, but it is possible with a workaround:
Duplicate your data series, use the normal options plus xaxis: 1 for the first one while making the second one invisble with this options:
points: {
show: false
},
lines: {
show: false
},
xaxis: 2
Use this options for the x axes:
xaxes: [{
position: "top"
}, {
position: "bottom",
alignTicksWithAxis: 1
}],
See this fiddle for a full example.
How to fill color below or above the threshold. currently threshold plugin changes the line of the color but i need to fill the color on the dataseries (eg: below : 5 or above :5 ) when the line is drawing on the canvas using flot line chart. can anyone suggest me. thanks
Are you saying your fill color doesn't change above/below a certain threshold, or that you only want to show fill if it is above/below a certain threshold? If its the former, this works for me just by setting fill to true in the series options:
$.plot("#placeholder", [{
data: d1,
threshold: {
below: 5,
color: "rgb(200, 20, 30)"
}}], {
series: {
lines: {
show: true,
fill: true
}
}
});
See this fiddle for working example.
I can't get rid of vertical line in the end of graph.
I have replicated problem here:
http://jsfiddle.net/63BPw/4/
Color of grid lines is darkred and it's setted only in this part of js code:
grid: {
aboveData: false,
hoverable: true,
clickable: true,
color: "darkred",
borderWidth: {
top: 0,
bottom: 1,
left: 0,
right: 0
}
}
Console do not throw any errors. I don't use any margins from inside javascript file or external css files.
I think this is probably a bug.
The problem isn't in your grid setup, but in the drawing of each axis. Specifically, you setup 2 y-axes, one on the left and one on the right. Deep in the flot code, it decides whether to draw a "bar" to attach the ticks to based on whether the axis is the "innermost" or not. When you have 2 yaxes, it is incorrectly deciding that your right-positioned yaxis is not innermost, and therefore drawing a tick bar.
Relevant code, both bits are called per-axis:
In allocateAxisBoxFirstPhase:
/*note this is only called for axes that have tickLength set
but later it is checked as true/false, not undefined
(which is what you'd get if you set your yaxis tickLength = 0) */
var sameDirection = $.grep(all, function (a) {
return a && a.reserveSpace;
});
innermost = $.inArray(axis, sameDirection) == 0;
In drawGrid:
if (!axis.innermost) {
//in here it draws the tick bar
}
Workaround:
Find that !axis.innermost bit and change it to axis.innermost == false. Set tickLength = 0 in your 2nd yaxis. That's it.
I've implemented those two changes here: http://jsfiddle.net/63BPw/5/
Also, FYI I filed a bug about this: https://github.com/flot/flot/issues/1056
I am using the FLOT charting library to plot calories consumed over time. I would like the y-axis to use autoscaling (to just show values that are +/- the min and max in the dataset).
However, the chart always uses 0 as the minimum for my bar chart rather than autoscaling the y-axis values. Here is my code:
function DrawCalorieChart(calorieData) {
plot = $.plot($("#CalorieHistoryChart"), [calorieData],
{
series: {
bars: { show: true, barWidth: 0.8, align: "center" }
},
legend: {
show: false
},
xaxis: { tickDecimals: 0, tickSize: 1, mode: "categories", tickLength: 0 },
yaxis: { autoscaleMargin: 0.025 },
grid: { labelMargin: 10 }
});
}
I can manually set a minimum value but the problem is that I don't know what the minimum might be after new data is entered. I have tried removing the yaxis spec altogether, setting an autoscaleMargin (as shown) and setting the min to null. But nothing works - the minimum is either a static value or zero! Any help would be greatly appreciated.
Currently there's no way to do this within the library's own API. You'll need to write some JS to iterate over your values and find a min/max manually. This could be done either outside your plot/redraw calls, or in a processRawData hook, which might work better if you're constantly adding values and redrawing.
Addressing this is actually an active project that I expect will be merged into the Github master branch within the next 2-3 weeks. So depending on whether you're able to wait, and willing to use less-stable code, that's another option.
Current answer after the change mentioned in DNS' answer has been implemented:
Set zero: false in the bar options.
From the official documentation:
Area and bar charts normally start from zero, regardless of the data's range. This is because they convey information through size, and starting from a different value would distort their meaning. In cases where the fill is purely for decorative purposes, however, "zero" allows you to override this behavior. It defaults to true for filled lines and bars; setting it to false tells the series to use the same automatic scaling as an un-filled line.