I'm using a Datetime axis in Highcharts to show a series of columns, and I'd like the date of the data point to appear directly beneath the column rather than a generic time marker as seen in this fiddle: http://jsfiddle.net/4s7t6jg6/2/
$(function () {
$('#container').highcharts(
{"chart":{"type":"column"},"xAxis":{
"dateTimeLabelFormats":{"month":"%m/%e"},
"type":"datetime"
},
"series":[{"data":[{"x":1406332800000.0,"y":358.0},
{"x":1408838400000.0,"y":417.0},{"x":1411344000000.0,"y":358.0},{"x":1416355200000.0,"y":323.0},{"x":1418860800000.0,"y":408.0},{"x":1421366400000.0,"y":280.0},{"x":1423872000000.0,"y":305.0},{"x":1426377600000.0,"y":314.0},{"x":1428883200000.0,"y":331.0},{"x":1431388800000.0,"y":412.0},{"x":1433894400000.0,"y":279.0}]}]}
);
});
To be more specific in case I'm not describing it well, instead of the xAxis reading "09/1, 11/1, 01/1, etc" as it does currently, I would prefer it read "07/26, 08/24, 09/22, etc".
You can use the tickPostions property for this.
Provide your timestamps as an array of values to the property, and it will draw a tick at each stamp.
Example:
http://jsfiddle.net/jlbriggs/4s7t6jg6/3/
Reference:
http://api.highcharts.com/highcharts#xAxis.tickPositions
Related
I have a problem with multiples series data. I have three series data (sometimes two), where the x values are dates and the y values are numbers.
I'm not able to sort the column bar based on date.
I reproduced the issue here: https://playground.anychart.com/WuqV384h
As you can see, the series data are showed as are written inside the "series" key. The dates should be sorted from 2019 to 2020.
A similar issue was asked here.
However, even using the DateTime, I'm not able to visualize the dates in the right order. If I use DateTime, the chart doesn't show the real value of the date (es. x: 2020-02-02), and the chart doesn't fit the container.
Thank you in advance.
The Cartesian Column chart uses an Ordinal scale. It doesn't provide any sorting because the Ordinal scale works with categories (names), it doesn't differ dates or names.
So, there are two available solutions:
Use real dateTime xScale that sorts points automatically. But it is a linear scale. Here is the sample.
Use the ordinal scale, but in this case, you need to preprocess your data to get the sorted array of categories and apply it to the xScale. Here is the sample.
I am trying to implement crossfilter along with highcharts. In the dataset, I have a key called 'date'. The values in the date key is of the form 'yyyy-mm' (for ex, 2018-04).
While implementing, I want the X axis to contain the dates in the format described here: for 2018-04, it should display June-18, and so on.
I was able to implement this by extracting the month and year from the date key. But, whenever the category names in the x axis is different from that given in the dataset, the crossfilter is not working correctly, i.e, whenever I click on any of the bars, every other chart's value is updated to zero. But when I set the x axis's categories back to the form given in the dataset, it works fine.
I was able to implememnt this through xAxis.labels.formatter
I've got a chart that uses time data for both the X and Y axis. I'm able to get both axes to convert my millisecond data into HH:MM:SS. How do I get Y axis tooltip to display HH:MM:SS too? API suggests it's possible, however I'm unable to replicate.
tooltipValueFormat: String
Parallel coordinates only. Format that will be used for point.y and available in tooltip.pointFormat as point.formattedValue If not set, point.formattedValue will use other options, in this order:
yAxis.labels.format will be used if set
if yAxis is a category, then category name will be displayed
if yAxis is a datetime, then value will use the same format as yAxis labels
https://api.highcharts.com/highstock/yAxis.tooltipValueFormat
See my fiddle for example
https://jsfiddle.net/gramlich/jpnsujo8/1/
Not to further complicate things- I am doing this in a Django View, and passing the chart options via JSON to minimize my need for JS. If possible, I'd like to use a solution using only objects found in the Highcharts API; rather than resorting to writing my own Formatter function in JS.
Thank you for your help!
You can use pointFormat passing the formatting string like:
tooltip: {
pointFormat: '{point.y:%M:%S}'
}
Here's a working fiddle: https://jsfiddle.net/w4f9suzb/
I will try to explain my problem as much accurate as possible. I am looking for a javascript chart library filling the two following conditions:
From an ajax request retrieving time series,
display dynamically data when changing the time window.
such as it is perfectly done on highstocks: http://www.highcharts.com/stock/demo/basic-line
And
plot an horizontal line corresponding to the mean,
changing when the user update the time window on the chart.
Actually it is possible to display an horizontal line. But they are fixed on the whole data and do not change accordingly when the time window is modified:
http://www.highcharts.com/stock/demo/yaxis-plotlines
I am quite new to the topic and would like to know if it'sp ossible to modify Highstock classes to have such a result. Or maybe some other js libraries exists?
Using a combination of the answer here:
Highchart, get total of visible series data after setExtremes
And an example of dynamic average using all visible series that I made for a previous question, here:
http://jsfiddle.net/jlbriggs/gweuLegq/
I put together this example, using the afterSetExtremes event, like this:
xAxis : {
events:{
afterSetExtremes:function() {
var ext = this.getExtremes();
getAverage(this.chart, ext.min, ext.max, show, width, avgColor, dashStyle);
}
}
},
Working example here:
http://jsfiddle.net/jlbriggs/c93543yL/
The idea is:
1) capture the afterSetExtremes event
2) get the resulting axis min and max
3) loop through the series data
4) if a point is between the min and max, increment the count, and add the
point's y value to the sum
5) calculate the average accordingly, check for existence of average series, if exists, update, if not, add
It could as easily use a plot line that you add/remove as needed instead of a series, but I like having it as a series so that it has a legend entry.
I have a scatter series with two points that have the same coordinates. Each point has different data associated with it (for example weight and height of different people - two different people can have exactly the same height and weight):
series: [ {
data: [{x:193.5, y:80.7, name:'danny'},
{x:193.7, y:90.7, name:'oren'},
{x:193.7, y:90.7, name:'josef'},
{x:195.5, y:80.3, name:'thomas'}]
}]
Full example at jsfiddle.
When viewing the tooltips of the chart, the tooltip of the second point shows:
Oren: 193.7,90.7
Making the data of josef inaccessible.
I would like to make the data of both josef and oren accessible, for example by putting them inside of the same tooltip.
Oren: 193.7,90.7
Josef: 193.7,90.7
How would you achieve this effect?
assume a very large data set - iteration over the entire series each time is not an option.
You could use the Tooltip formatter ( http://api.highcharts.com/highcharts#tooltip ) to manually format your tooltips.
In the formatter compare x and y value of all other points in the series(this.series) If the values are the same, add the name of these points to the tooltip.