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
Related
I wonder if there's an alternative way of displaying the negative values on the column chart.
The bottom most value on the y axis should be the lowest value. The columns on the graph should grow from the bottom and upward to their corresponding values.
See images below with the current and expected behavior.
Current
Expected
It will be best if you use threshold property:
series: [{
...
threshold: -20
}]
Live demo: http://jsfiddle.net/BlackLabel/0moe5q2y/
API Reference: https://api.highcharts.com/highcharts/series.column.threshold
I'm not into highcharts really, but I've lurked a bit and figured out this little, lets call it, hack ;p
Check this out please: https://jsfiddle.net/4goq1x6c/
If you want the min value to be set dynamically you could calculate it based on some condition and update every 0 element of the data's arrays and the min value of yAxis. (i.e. you could use some variable for simplification)
It's dirty (but not as much when I've looked again on it) I know it, but I haven't found anything native in highcharts docs. I hope it will be useful :)
b.yAxis().setLFormat('{value|' + parseInt(myvalue[7],10)+ '}');
Above code snippet returns values as "0.2" and increments by 0.2,0.4,0.6 but I need this whole number like 1,2,3,4....Found allowDecimals: false option but not sure how to pass to get the round value.Can somehelp me.
I had missed it: you want to display only the integer ticks in the graph, not to round off your float values. That's a different matter. You need to check on the documentation for the library you're using.
First off, you need to tell us what library you're using. From what you say (setLFormat, allowDecimals, javascript) I believe you're using HighStock.
Then you check either the documentation or the user forums for the relevant software. In this case you're in luck, the documentation is exhaustive. You may have already checked out that page, but possibly you did not notice the links to the examples.
Also, the structure of the property JSON is given on the left hand side of the page; as you can see the allowDecimals for yAxis must be supplied on the HighChart container call, not on each single value.
You can see its use from this fiddle (click here).
You need to specify, for Y axis,
yAxis: {
title: {
text: 'Flats'
},
allowDecimals: false
},
If you need BOTH effects (integer points and integer grid), then you need apply both methods: set allowDecimals to false, and use Math.floor(value) or Math.round(value) instead of value on each value.
If my guesses are correct and this answer works, apart from accepting it :-), you may want to edit your title to reflect the fact that you're using HighStock JS library and you want it to use an integer grid. This is possibly the reason why you got downvoted; you may want to check out this page. (None of us started out asking good questions - I know that I definitely did not.)
I am currently using Flotcharts plugin on my website.
I want to use one of the charts. However, I am unsure how the information is being plotted in order to change the information.
Can someone please advise me on how the following coding works / broken up:
d1 = [
[1262304000000, 5], [1264982400000, 200], [1267401600000, 1605], [1270080000000, 1129],
[1272672000000, 1163], [1275350400000, 1905], [1277942400000, 2002], [1280620800000, 2917],
[1283299200000, 2700], [1285891200000, 2700], [1288569600000, 2100], [1291161600000, 1700]
]
Thank you in advance! :)
Not a lot of context in your question, so it's hard to offer much information in an answer, but your array d1 consists of a set of data points. Each data point has an x-value and a y-value. It looks the x-value is a date/time value and the y-value is a number. (The large numbers such as 1262304000000 look like native JavaScript date/time values; 1262304000000, for example, is midnight on January 1, 2010.) Other than that, there's not much else we can offer unless you want to add more context.
I've searched in the official d3.js documentation, as well as, here in stackoverflow to find a way to add custom tickValues to a time scale axis; However, i haven't stumble across any documentation that confirms that something like that is possible.
So in essence, i have a time scale axis and i would like to show specific hours
e.g. i'd like to do something like this :
xHourAxis
.ticks(d3.time.hours, 2)
.tickFormat(d3.time.format('%I %p'))
.tickValues(2, 4, 6, 8, 10, 12) ;
So i want to display tick values every 2 hours, but not including the first (12 am) and the last (12 pm).
Does anyone know if there is any workaround for that?
Nearly there, but your code has two problems: First the tick values must be specified in an array, and second those values should be Javascript date objects. i.e. you just provide an array of dates to tickValues so your code would looks something like this:
xHourAxis
.tickFormat(d3.time.format('%I %p'))
.tickValues([new Date(2000,10,5), new Date(2005,2,7), new Date(2007,11,11)]);
Also, note that you needn't call the ticks() if you are going to later specify custom values.
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/