Remove the time between the dates in highstock - highcharts

My graph is having time between dates.I want to display just the date.
As Highstock is responsive,the time is removed once I minimize the browser and only dates are shown.
I have tried dateTimeLabelFormats in xAxis and tickInterval.
Those doesn't seem to work.
Help is appreciated

Related

How do I show data for 4 weeks on a Google Sheets chart by week day?

I want to show data for 4 weeks on a Google Sheets chart.
I have tried to do this and it is mostly ok as this is correct:
The X-axis shows the days of the week
The Y-axis is the weight number
Issues I have with my current implementation are:
I had to make a separate series for each week when I wanted it automatically group the data by week number. (I then can't name each series)
The data is off by one day. Monday's data doesn't show which means Tuesday's data is showing in place of Monday and so on.
Here is a link to the google sheet and a screenshot below: https://docs.google.com/spreadsheets/d/147RMW2JE7MoWz53EZuB-nHj-p_xeKez_ze_0mqq8NGA/edit?usp=sharing
My expected result would look more like this:
Here the lines are shown grouped by each week AND data is shown for each day
The reason why you are missing the first day of every week is that you have checked the Use row 1 as heeaders so every series will remove the first datapoint (monday in your case) and insert it as the label for that series (you can see that in the legend).
If you uncheck that checkbox and change your range for the X-axis so it goes from Monday to Sunday you get the correct graph.
The problem with the previous graph is that although all its datapoints are correct there is no legend. But unfortunately there is no way to insert a legend easily because you cannot go and change this manually, the label for each series has to come from the cells.
What you can do to work around this limitation is change your data so the label for each series sits on top of your data and keep the Use row x as headers checked:
Of course this is not the only solution, you can go on multiple ways here, copy the table in a single sheet for every week, or just live without labels. Stack the weeks horizontally so everyone has its week number on top of the weight column, etc

I'd like to sometimes see the year in the x-axis in a HighStock chart

I have a HighStock chart with the usual date/time on the x-axis. The chart might include multiple years of data.
When the user zooms in, HighCharts automatically formats the labels on the x-axis appropriately, showing month/year, or date/time, etc. It does a good job.
But when the user zooms in there is no indication of what year the data is they are looking at. See the following image:
It would be nice to show the year without having to make use of a formatter function (HighCharts is 99% there, why re-invent the wheel?). I guess this is as much a feature request as it is a question.

Highstocks ordinal xAxis formatting

My case: Plot a stockchart with stock data for 5 days without weekends displaying, each day should have equal space even though data can be irregular.
What i need to do is plot an xAxis with static intervals of one day, however i cant display weekends and the data can be very irregular between the days. I've tried tinkering with tickInterval, tickPositioner but so far no luck.
I can hide weekends with:
ordinal: true,
My current fiddle:
http://jsfiddle.net/svedino/h9448fk0/1/
Setting the ordinal to false gives me correct interval but with the weekends included.
An example of this kind of graph seems to be working can be found here:
https://www.avanza.se/aktier/om-aktien.html/229675/jays

Highcharts - date on xAxis label difference on tooltip

I have a problem with HighCharts xAxis label. Date on xAxis label difference on tooltip and there are have 2 gridLine on a tick point. I thing have problem with json data but I don't know why.
Here is my code http://jsfiddle.net/jevgzgjx/1/
My data as a json array with timestamp:
var json = [[[1362783600000,5691],[1362870000000,6503],[1362956400000,15574],[1363042800000,16211],[1363129200000,16427],[1363215600000,16486],[1363302000000,14737],[1363388400000,5838],[1363474800000,5542],[1363561200000,15560],[1363647600000,18940]],[[1362783600000,4346],[1362870000000,4112],[1362956400000,11356],[1363042800000,11876],[1363129200000,11966],[1363215600000,12086],[1363302000000,10916],[1363388400000,4507],[1363474800000,4202],[1363561200000,11523],[1363647600000,14431]]];
The problem here is that your timestamps are all for 23:00 (11pm). Therefore the point is being drawn slightly to the left of each grid line (since the gridline is for 00:00 each day). It also causes the tooltip of each point to show the day before, since the point is in fact not on the day that the gridline displays, but one hour prior to that.
You can visualize this problem by modifying dateTimeLabelFormats, so that the hours are shown in the tooltip, like this (see this JSFiddle):
dateTimeLabelFormats: {
day:"%A, %b %e, %Y, %H:%M"
}
I'm not sure about the origin of your problem, but it can be solved by adding 3600000 (one hour in ms) to all your timestamps. The problem may be timezone related as timestamps in Highcharts are treated as UTC by default, so look into getting your timestamps in UTC as well.
If you use Date objects you can specify the timezone before getting the timestamp. You can disable using UTC by default with global.useUTC: false (API), but then you'll risk ending up with different results depending on where you are viewing the chart.

How to show Weekly Slider using HighStock

I have a scenario where i have to show chart data weekly for a particular year.
I need to change high-stock slider to display week ranges i.e from 1-52.
Can anyone please suggest how can we customize high stock slider for this scenario.
I'm totally stumped and also not sure is it possible using High Stock.
Thanks in advance!
I managed this using bootstarp two way slider and slicing the series data of highchart according to the week selected.

Resources