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.
Related
I created Flot time series with pan functionality. Now i want my initial x-aixs hold only 10 data, when scrolled remaining will appear.
This is possible by adding max to x-axis.
In normal chart if i pass max: 10 then first 10 records will appear first and rest available when scrolled.
But in timeseries am not able to understand what to pass as max. Please give some solution.
xaxis: {
mode: "time",
timeformat: "%m/%d",
tickSize: [1, "day"],
panRange:[min_date,max_date],
max: ???,show: true
}
,pan: {interactive: true}
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.
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
}
Is there a way I can get the x-axis to switch from showing hour, to e.g. week days, months .. when zooming out?
Currently my x-axis is configured as such:
xaxis: {
mode: "time",
minTickSize: [1, "second"],
timeformat: "%H:%M:%S",
}
My default the graph looks nice, but when I zoom out enough times, the labels on the xaxis just display "00:00". How can I change the timeformat so that the date is included also? E.g. Tue 27 00:00 or similar.
Here's an example of when the graph is zoomed out a lot (obviously I need to remote some datapoints to make it look smoother..)
You can add a date using the standard specifiers, like %Y-%m-%d. A full list can be found in the API docs under the Time Series Data section.
To get the format to update based on the range, i.e. show HMS when zoomed in but YMD when zoomed out, is trickier. You'll need to listen for the 'plotzoom' event and check the range to see whether the format needs to change. If so, use getOptions() to retrieve and update the plot's options, then call setupGrid & draw to redraw the plot using the new format.
I solved this by making a custom tickFormatter for the X-axis:
In your xaxis options put:
xaxis: {
mode: "time",
tickFormatter: customXAxisFormatter,
...
}
Then your customXAxisFormatter could be eg. :
function customXAxisFormatter(val, axis)
{
var d = new Date(val);
// If time difference is more than 24 hours
if ((axis.max - axis.min) > (24*3600*1000))
return d.strftime("%a<br>%H:%M");
else
return d.strftime("%H:%M");
}
I hope this helps :)
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.