Develop Reference

Unable to display name of every row in heatmap

I am creating a heat map using html, and JavaScript.
My x axis is having 24 hours, and y axis is having all the days of year, 365 days.
But on the y axis I am unable to display the name of every date. It is displaying the name with some step size. Can anyone solve this?

Highcharts: Synchronise irregular data series from same day different year

I am comparing temperatures today with the same day last year. I am retrieving the data from a database (via json) and each series has different times (and timestamps). Today's series has datapoints every 10 minutes, last year has data points at 00 and 50 minutes past the hour.
I cannot get both series to plot accurately on the x axis.
I have played about with the pointInterval for last years data to try to get it right but it only ends up looking approximately right.
pointInterval: 3600 * 1000 / 2.05
Is there a way to accurately plot points in both series against the x axis?
Please see jsfiddle

I've managed it.
I needed to remove the pointStart and pointInterval from each series, change the year of the 'last year' series to reflect this year and then change to tooltip to show only the hour and minute.

Highcharts tickinterval set to one minute shows only one date

I have a highcharts graph of speed(y axis) and time( x axis), each second posts a new speed, which means in an hour I will have 3600 data point, and that is a lot. I found out about tickInterval and the ability to shorten the amount of time drawn on the x axes, but as soon as I set it the ticks labels disappear and it shows only the first minute label
Here are two graph comparison of how it look like with tickInterval and without
without tickInterval:
With tickInterval:
I would have expected to see a tick label on x axis every minute but instead I see only this ? hmm ?
here is my code with less data points than I have:
http://jsfiddle.net/cyc89zop/1/
How can I fix this problem ?

2 things:
1) You have specified your axis type as "Time" which is not a valid option. What you want is datetime.
2) You have then specified categories for the x axis. categories and datetime axis types are mutually exclusive - you must use only one or the other, not both.
To get the proper dates with a datetime axis type, you specify either
1) an x value for each data point,in millisecond epoch time, or
2) a pointStart and pointInterval property for the series
http://api.highcharts.com/highcharts/plotOptions.series.pointStart
http://api.highcharts.com/highcharts/plotOptions.series.pointInterval

Highcharts Xaxis formatting issue

I have been facing this issue for a while and had found a fix too, but apparently this same issue has popped up again
So my visualization has a few drop downs and a chart (highcharts.js) which keeps changing dynamically depending on drop down selections
Xaxis - date and yaxis - Metric value and YOY value (column and line charts)
There is one dropdown namely "Daily" and "Hourly" which is in sync with my backend
For daily - data is for 14 days, and for hourly it's for 14*24 hours
So, with my codes used here, Xaxis comes correctly for the daily part showing 14 days(bars) there
But for Hourly, xaxis gets messed up and it counts each hour as a day and therefore shows me days for 14*24 like in the image below
So, I had already solved this problem by adding the following code in another tab :
xAxis: {
type : 'datetime',
min : Date.UTC(new Date(processed_json[0][0]).getYear(),new Date(processed_json[0][0]).getMonth(),new Date(processed_json[0][0]).getDate()),
max : Date.UTC(new Date(processed_json[processed_json.length - 1][0]).getYear(),new Date(processed_json[processed_json.length - 1][0]).getMonth(),new Date(processed_json[processed_json.length - 1][0]).getDate()),
dateTimeLabelFormats : {
second : '%H:%M',
minute : '%H:%M',
hour : '%H:%M',
day : '%e %b',
week : '%e',
month : '%b',
year : '%e'
},
plotOptions: {
series: {
pointStart: Date.UTC(new Date(processed_json[0][0]).getYear(),new Date(processed_json[0][0]).getMonth(),new Date(processed_json[0][0]).getDate()),
pointInterval : 3600 * 1000, // 3600*1000 for hourly
tickInterval : 3600 * 1000,
}
},
The "min","max" and "pointstart" take care that the graph comes like this as follows :
But, now I am using the same code in a new tab and getting Wrong graph again even after using - min, max and pointstart same as above.
I really am unable to understand this, if everything (processed_json, others etc) are exactly same, why am I getting this issue again?
Can someone suggest another method or tell me what I am doing wrong.
EDIT :
Also, I would like to add this functionality that when it zooms in the correct graph (2nd one), then it should show each hour in the xaxis. Is this feasible? If yes, how?

Highchart js max 15 plots to be plotted

I have been trying a lot in Highchart js and still cant find a way to reduce the number of elements in the series.
If i get more than 15 days data i have to reduce it back and show to user as 15 days data so that user can see the data without crowding of data. Max 90 days will be given in the series which i have to reduce to 15 days.
check my current code here in http://jsfiddle.net/MULZL/
can any one give me a solution for it ?
P.S: I dont want to reduce it to first 15 days or last 15 days. I want to do it just because getting 90days in the chart looks crowded and i dont want zoom functions to apply. I want the solution for ignoring some data (days) to make it 15days if it is more than 15 days

You can programmatically zoom into the required time range using the Axis.setExtremes method. In your case you may want to do it on load
Here is how you would do it, if you want to zoom into the 1st 15 days of the given data, you can easily modify to zoom into last 15 days.
function zoomTo15Points(chart){
var points=chart.series[0].points;
if(points.length<15) return;
var min=points[0].x;
var max=points[14].x;
// If you wish to zoom to 15 days and not 15 points, you can modify max as
// var max=min + 1000*60*60*24*14
chart.xAxis[0].setExtremes(min,max);
chart.showResetZoom();
}
If you do not want to let the user zoom out, you can disable the last line, but you also will have to disable zooming, else the button would appear if user zooms inside the 15 days.
Highchart Zoom on Load # jsFiddle

You can try dataGrouping feature of highStock
var dataGrouping = {
groupPixelWidth: 40,
units: [[
'day',
[1, 2, 3,4,5,6]
]]
};
Highcharts would make sure all your columns are at least the specified width (40), if the number of coulmns is large, such that it's not possible to have that width, it will group data using the units, so it will group data of 1 day into 1 column or 2 days into 1 column and so on.
Not sure if you really want exactly 15 plots, but I think you concern was to avoid crowding of data, this does exactly that, but the number of columns will vary based on the width you specify, the width of the plotArea and allowed units and its multiples. Tweak the values as per your data and width of your chart.
jsFiddle