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.)
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 :)
I am creating a heatmap with Highcharts. I tested on a 5x5 map and I get the expected heatmap.
I then tested a larger one and the resulting heatmap is incorrect. I also tried it in CodePen, with same (incorrect) result.
Something strange is also happening somewhere in the large Array when using Codepen: (see this answer for that point, which explains why the highlighting stops)
I have a few possibilities:
it could be a browser problem. I tested with Chrome and Firefox and get the same error
it could be a JavaScript limitation on the size of the Array (the highlighting of the code is chnaging in Codepen so maybe). It looks like it is not.
it could be a bug in JSFiddle and Codepen. I doubt it as the issue is the same in both sandboxes.
it could be a bug with Highcharts. This I do not know - my code is not exotic (even though somehow large) so that should have been caught earlier. But this one looks like the most probable.
This is a fake snippet as the question requires one but it is not useful in this case
CodeMirror (which is the editor of codepen) support the maxHighlightLength, which tells the editor the maximum length of characters the editor should highlight.
The default value of that variable is 10000, and in your specific case the line is longer than this value.
Issue here is that you need to tell highcharts the scale of the yAxis. To do this set it to the min = 0 and max = the number of categories - 1:
...
yAxis: {
categories: ['10.233.86.12', '10.233.84.72', '10.2.0.71', '10.90.13.175', '10.233.84.57', '10.91.66.24', '255.255.255.255', '224.0.0.252', '10.233.86.34', '10.233.80.60', '10.112.0.142', '10.35.24.33', '10.130.37.22', '10.20.3.16', '10.233.84.83', '10.70.1.79', '10.6.41.78', '10.89.3.109', '10.118.68.133', '192.168.0.11', '10.70.0.253', '10.10.68.56'],
title: null,
min: 0,
max: 21
},
...
Note that you should also tell it to show every category which should be done by increasing height of chart so labels do not overlap.
It is not a bug. Simply the number of points exceeds the default value of the turboThreshold property (see the API Reference section). Increase the number of the turboThreshold and heatmap will display correctly.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.turboThreshold
Example:
http://jsfiddle.net/p4z094g9/
Handsontable uses numeral.js to format numbers etc.
If the data type is set to numeric and the data format set to 0.00%, handsontable (numeral) formats it nicely in percentage format. For example, if the value is 0.5, it is automatically formatted to 50%.
But when the user tries to edit the value, they see 0.5 instead of 50%. This makes sense, except Excel doesn't behave that way and my users are heavy users of Excel (Excel shows the actual percentage number). Is there a way to make it show "50" instead of 0.5, while editing? I looked through numeral.js code and found this function formatPercentage that multiplies the number by 100, pads it with the % symbol etc. It is possible to change the way this function works to make it mimic MS Excel. But, is there a way to do it without changing numeral.js?
Here is an example of the above (look at the third column - the price column)
http://jsfiddle.net/suk9g9cm/
{
data: "price_usd",
type: 'numeric',
format: '0,0.00%',
language: 'en' //this is the default locale, set up for USD
},
I ran into a similar problem myself and have an untested solution. Let me tell you what's known so far. Handsontable has an Editor and a Renderer. The Editor mimics your data so if you put in 0.5 then whenever you're editing that cell it will display just that. The Renderer is what you see after you leave the cell, in your case you formatted that value so 0.5 will show up as 50%. This value is for show only and as you've pointed out, numeraljs multiplies by 100 and adds a %.
What you're looking for, however, is a way to essentially keep the data array as 0.5, but on editing change it to 50, and on rendering, leave as 50%.
Here is a solution:
Using an event on Edit, look at the value of the cell. If it is below 1, multiply by 100 (this will change the real value so we have to adjust later). On afterChange, if the value is greater than 1, divide by 100, otherwise leave (the user might've blanked out and put in 0.5 again so if you don't have this check, the value will go down to 0.005).
Note that in the other case that Excel provides, the user might've entered 50 to begin with so this method will actually modify this and ALWAYS leave the data array with the value 0.5. If this isn't what you wanted then things get harder to do so let's say this is acceptable for now.
That should do the trick though I haven't tested it and there may be edge cases that I'd love to hear about.
Let me know if it worked and in the meantime
What is the proper way to limit out NaN values from dc.js figures?
Let's say these values are checked on the dimension function and converted to a numerical value -1000, when the legal numerical range in my case is [0,Inf). Then, I draw a bar chart (histogram) and set the x axis limits to start from 0 onwards. In this manner I can avoid the -1000 peak, but only if the option elasticX is disabled.
Is there a renderlet solution or another approach that would allow me to use the elasticX option and in the same time omit the -1000 peak?
I do not want to address this by using crossfilter, as this would filter out the whole sample row, as the sample might have a defined value for a different variable, but on Dc.js figure-by-figure basis.
Use the "fake group" technique described here:
https://github.com/dc-js/dc.js/wiki/FAQ#filter-the-data-before-its-charted
... to remove unwanted groups before drawing/updating the chart.(Really .data() is designed for this but it doesn't work for all charts, yet.)
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