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.
Related
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.
I have two graphs in Excel, but I want to merge the charts into one graph. As you can see, I have reduced the size of the chart in graph1 and I want to move the chart in the graph2 into the empty space in graph1
I think there are many ways to do this in basic excel like jrichall showed you but If you are willing to use an excel add-in to create this double chart, you could try FunFun.
It allow you to code javascript in excel, merging two charts in one is pretty easy in programming languages such as javascript.
Here is a working code I have written for you:
https://www.funfun.io/1/#/edit/5a3d0933b848f771fbcdec96
As you can see, I use a Json file to acquire the data used in the spreadsheet. Once the data is "stored", I can use it with javascript and create my charts.
I use Chart.js library to create those two charts, I basically copied this code twice to get two chart (I just changed the data and the word "bar" by "line"):
var barChart = new Chart(ctx, {
type: "bar",
data: {
// x axis represented by labels
labels: [1, 2, 3, 4, 5, 6],
datasets: dataset
},
options: {
legend: {
display: false
},
scales: {
yAxes: [
{
ticks: {
min: 0,
max: 10
}
}
]
}
},
animation: false
});
The documentation of Chart.js is pretty good and has a lot of examples for different type of charts.
Once you are satisfied with your chart, you can load it in excel by pasting the URL in the Funfun add-in. Here is how it looks like:
I used a css file to correctly align the title (.label).
Disclosure : I’m a developer of funfun
I think a little more info would help. How is your data set up? Are you using pivot tables / pivot charts? I think I can help once I get a better idea of where your data is coming from and how you have it set up.
Edit to add example of how I work with charts:
Multi-graph chart
Second Edit:
Multi Chart 2
Unless I missed something above, I think that we can make this a bit simpler by editing your chart as follows:
Select Chart Tools in the ribbon
Select 'Change Chart Type` icon
Select Combo (last option)
Change one of the axes to be a Secondary axis and change type to Line instead of Bar.
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}
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
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 :)