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!
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.
I do not know angular js & i am using angular gantt chart from here https://github.com/angular-gantt/angular-gantt & this chart shows dates but not days(Su, Mo,Tu.. etc). Changing the scale is not helping. So what can i do to show days in angular gantt chart.
If i need to make changes in the code please let me know.
Thanks in advance.
This is very similar to this post if not the same.
However, to summarize what was stated there and what I have found by experience, you want to use the headers-formats attribute in combination with the headers attribute on the gantt directive.
var options = {
headers: ['month', 'day'],
headersFormats: {
month: 'MMM',
day: 'dd'
}
}
That should do what you want it to do. The scale just changes the increments of the columns ('days', 'weeks', 'months', etc...).
For more information, see the documentation for angular-gantt and more specifically the documentation for the headers-formats attribute.
I'm trying to use Area Stacked Highchart, here's an example and jsFiddle demo to play with
Unfortunately the chart itself generates ugly gaps at the beginning and at the end of the x-axis.
This question has been asked all over again, and looks like the answer is "don't use categories for xAxis, remove them and replace with type: 'datetime'. Unfortunately I'm getting categories from back end and I can't do nothing about this. And any other setting like margins, paddings, spacing etc. doesn't seem to work with categories at all.
Does anyone have any clue how to fix that? To be honest it looks more like a serious UI / UX bug to me than something that is supposed to happen. Who needs a chart that starts somewhere else than on its edge?! :)
Need 7 more reputation to post an image, sorry for URL: i.stack.imgur.com/lGxo6.png
In short words: [b]try to remove GAPS from jsFiddles example without deleting categories[/b]. Is it even possible?
You are right, that was asked quite a lot, I should prepare auto response for this.
Then answer is to use datetime axis OR linear axis. You have categories from backend? No problem, just store them in some variable and then edit formatter for labels: http://jsfiddle.net/h7Akd/1/
var categories = ['1750', '1800', '1850', '1900', '1950', '1999', '2050'];
...
xAxis: {
tickmarkPlacement: 'on',
title: {
enabled: false
},
tiickInterval: 1, //force to display categories one by one
labels: {
formatter: function(){
return categories[this.value];
}
}
},
Now you can edit min and max, using or xAxis.min/max or 'xAxis.minPadding/maxPadding`.
Extras:
To be honest it looks more like a serious UI / UX bug to me than something that is supposed to happen. Who needs a chart that starts somewhere else than on its edge?! :)
You will be surprised..
For example use columns and you will see. Rather the question is why can't you update backend to return timestamps (as for dates should be)?
So I have a stacked column chart, type of datetime, with minTickInterval of one day. In some cases for my data, my chart displays fine, with each stack in its own day, but for other cases, the column seem to overlap and instead Highchart does a "week of ...". I have no idea what could be wrong in the config. Here is the fiddle
I already tried this with no luck
dataGrouping: {
enabled: false
}
First thing I notice is that your data is not for the same timestamp. This means that the data will not stack as their x-values are different. If you want all data to for a given date to be stacked then you have to give them the same date (and time). The dataGrouping only applies to HighStock. Your toolTip text can be formatted.
The cahrt is displayed correctl,y becasue you have stacked for the same x value, for for different, points are neighbours.
For each series data, I had to use
pointRange: 86400000 // equal to one day
The first answer here solved it.
Highcharts columnchart: How to seperate overlapping columns
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.