I have a project that uses the flot plotting package and I have everything working except that my x-axis (which is time) displays the time in my localized time but I want it to display unlocalized.
For example: The data being fed to flot has the time 7:45AM (from the server as milliseconds from the Unix Epoch) but the x-axis displays 12:45AM (which makes sense since I'm in MST-700).
I know the data being sent down is correct as I stepped through that code and make sure it was correct. I know that the JavaScript has the correct time as I told it to output the date that it was given and it was correct (correct being it display 7:45AM and not 12:45AM). I'm very confident that my issue has to do with time zones as I set my time zone to -1200 and the data at 7:45AM would show as 20:45PM. Here is my plot configuration:
var plotOptions = {
series: { shadowSize: 0 }, // drawing is faster without shadows
yaxis: { ticks: 5 },
xaxis: { position: "bottom", mix: minX, max: maxX, mode: "time", timeformat: "%y/%m/%d %H:%M:%S"},
yaxes: yAxes
};
Where maxX is the most current time reading from the server in milliseconds since the unix epoch and minX is some number of minutes less than maxX in milliseconds.
I have tried setting timezone to null and that seemed to have no effect as well as timeZoneOffset. The date and times must stay as they are, as in I can't add/subtract some specified timezone to them.
TL;DR How can I get flot to show time without any localization (no timezone)?
Any help would be greatly appreciated :)
Edit 1:
Upon doing some testing dealing with the time library (jquery.flot.time.js) I found that the tickGenerator and tickFormatter functions aren't being called. I put an alert inside both functions that would display the date that it calculated but I never get the alerts.
Have you looked at the API docs?
https://github.com/flot/flot/blob/master/API.md#customizing-the-axes
It seems you should be able to pass in timezone:"MST-700" or similar, depending which library you chose to include for time formatting. A search through the same page for "timezone" should yield even more information.
Not too sure of exactly why this worked but I managed to fix the issue my self. I took out the jquery.flot.time.js file and now the x-axis is displaying correctly.
I have a feeling that the library was disregarding my timezone options.
Related
First, I want to apologise for any mistakes in asking the question properly according to the site rules, it's my first time doing it and I tried my best.
So I have the following issue:
Let's say I have that data (consider it - date / value):
I then init a chart with it, the only relevant option to that moment is:
xaxis: { mode: "time" }
and I get the following result:
("Дек" == December)
Now my problem is that there are mid-day hours in the legend which I don't want. I want only days in it. I tried adding this to the xasis:
tickSize: [1, "day"]
but it creates a legend entry for each day of the whole timespan (01.12, 02.12, 03.12 and so on to 06.12) and I want only the days for which I have some data present.
After a while spent in searching in documentation and google I found that there is actually another property for this:
minTickSize: [1, "day"]
That does the trick.
Having trouble with Highcharts heat map; trying to somewhat imitate the example large-heatmap with my own data in a slightly different format yet can't manage to get it to draw properly.
Image snip of the problem
Demo here:
https://jsfiddle.net/17jsrxfk/1/
yAxis: {
type: 'datetime',
labels: {
format: '{value:%H:%M}'
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
}
As can be seen, the tooltip manages to find and respond to the correct data at that point, and even changes colour; along with the colour axis at the bottom responding correctly.
[1456444800000, 2700600000, 54.18855218855219], etc
The data is in milliseconds, the first value being the date of record (d,m,y) and the second value being a date (m,h,d,m,y) with a dummy Day Month Year of 0,0,1970; the third value being the actual reading.
I'm not sure if this is a problem with Highcharts somewhere, or if I've made a rookie mistake as i am fairly new to Highcharts.
I haven't been able to find any reproductions of this problem elsewhere, and have spent a good few hours trying to find a solution.
Hints and Tips appreciated too!
Thanks
It looks like the problem is connected with the plugin you are loading on the beginning, without this plugin everything works fine, if you will set colsize and rowsize of your columns: jsfiddle.net/17jsrxfk/2 – Grzegorz Blachliński
Thanks to this guy for solving my problem!
I have a set of data for dates. What value should I provide the X axis values? How do I make Rickshaw display the X data values as dates?
I looked around the docs and examples and cannot find anything.
I've just started using Rickshaw and was in the exact situation.
But, before I go any further, Rickshaw documentation is virtually nonexistent which is very upsetting because the performance of Rickshaw compared to other JS graphing libraries is outstanding.
The best way to find examples is to dig into the source code and example code on their github page try to make sense of things (not the way documentation should be).
That being said, let's try and build a strong base of questions/answers here on StackOverflow!
So, back to the question :) It looks like you've already found your own solution to the question, but I'll provide my solution as well.
Rather than using Rickshaw.Graph.Axis.Time, I've used Rickshaw.Graph.Axis.X and set the tickFormat accordingly.
var data = [ { x: TIME_SINCE_EPOCH_IN_SECONDS, y: VALUE },
{ x: NEXT_TIME_SINCE_EPOCH_IN_SECONDS, y: NEXT_VALUE } ]
var xAxis = new Rickshaw.Graph.Axis.X({
graph: graph,
tickFormat: function(x){
return new Date(x * 1000).toLocaleTimeString();
}
})
xAxis.render();
toLocaleTimeString() can be any of the Javascript date functions, such as toLocaleString(), toLocaleDateString(), toTimeString(), or toUTCString(). Obviously, because the tickFormat takes a function as an argument one can supply their own formatter.
Koliber, I'd be interested to understand your answer if you could provide more detail as well.
Additional to Lars' reply, I found by default Rickshaw is calling
.toUTCString(x.value*1000) //(just ctrl+F to find where =) ).
In my case, I saw different time label on X between Graphite and Rickshaw for this reason, and it works beautifully once I changed it to
.toLocaleString(x.value*1000).
Plus, you may need modify this in two places : Rickshaw.Graph.Axis.Time and the ...HoverDetails
I have finally figured out that the X axis values should be epoch time values. Then, using the code from the examples I was able to show a proper time scale.
I still have a problem because I would like to show the tick marks on weeks on the X axis. However, setting timeUnit to 'week' causes JavaScript errors. It works with other time units though.
None of this worked for me. What worked with angularjs was:
'x' : d3.time.format.iso.parse(date).getTime(), 'y' : 10
Code
Example of my problem: http://jsfiddle.net/x46RQ/
Goal
I want the graph to be a bar graph like so: http://jsfiddle.net/Lbd85/ but obviously with dates as the x axis. If I add my data into that fiddle, it messes up like the one listed above as seen here: http://jsfiddle.net/73G7Z/
Questions
Why are all 3 days provided in the data variable not displaying?
Why are the bars not lined up with their appropriate x-axis ticks?
Why does changing the data and mode to time totally mess up what would otherwise be a functional and accurate bar graph?
Environment
jQuery 1.7.1
jQuery Mobile 1.0.1
Flot 0.7
Thanks
Let me know if any additional information is required.
Part #1, You specified a min y value of 0 in your flot options, and your data point #2 has a value of zero. So it's there but just very small, almost invisible.
Part #2, you have to offset your dates by the users timezone:
Something like this:
var tzOffset = new Date();
tzOffset = tzOffset.getTimezoneOffset()*60*1000;
data.push([(new Date("2012/02/20").getTime()-tzOffset), 1]);
Part #3, Your graph is a mess because you specified a width when in fact the option you were looking for is barWidth and you need to specify the width in terms of time, i.e. milliseconds. See here for how. Something like barWidth: 12*60*60*1000 looks OK.
So in summary, this is what it will look like: http://jsfiddle.net/ncTd3/
I am having a difficult time getting my data to display inside of a Flot chart with the x-axis serving as the timeline. Here is an abbreviated copy of my JSON file:
{
"label": "ServiceReport",
"data": [[1328983200, 53], [1328986800, 53], [1328990400, 60]]
}
I've followed the tutorials on the Flot API page, as well as this one on stackoverflow
without any luck.
When modifying the x-axis, this gets the graph to display just fine, but the x-axis is blank.
xaxis: { mode: "time", minTickSize: [1, "hour"]}
This displays 8 through 8 values (not correct according to data file), but no graph data:
xaxis: { mode: "time", minTickSize: [1, "hour"],
min: (new Date("2000/01/01")).getTime(),
max: (new Date("2000/01/02")).getTime()
}
Basically, I just want to display the hours in (really any format: 5:00, 5 AM, doesn't matter) on the x-axis, and have the y-axis correlate to the Service Values. There are 24 total timestamps in each data file (one day's worth of data).
Any help from you Flot and JavaScript/jQuery experts would be greatly appreciated!!!
First for the time to display, use :
xaxis: { mode: "time",minTickSize: [1, "hour"],timeformat: "%H:%I:%S"}
I had the same problems with JSON data, caused by a bad JSON encoding file.
Are you sure that your JSON file is really a JSON file ?
Let's try something ike that to test it (with jquery for example) :
$.getJSON('yourJSONpage.php',
function(data) {
testData=data.pop();
alert(testData[0]);
});
Last point, your timestamp is not correct, correct time stamp is like that "1328983200000" not like that "1328983200", if you use PHP to generate your JSON data, make sure you do something like that for the dates :
$hour=mktime($h+1,$i,$s,$m,$d,$y)*1000;