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?
Related
I have a chart to display values across time, but there aren't data points for each day. The chart is just displaying dates on the X axis where data points exist. I want each date to have a vertical line, and the day displayed below for every day in the range (unless overlapping).
I'm using chart.ja version 4.2.1
Extra Points :-)
I would also know how to keep the dates from overlapping when a large range (lots of dates) is being plotted.
Lastly, is it possible to display the dates on three lines, where the top line is the day, the second line shows the month name (once) in the middle of the month, and the third line shows the year in the middle of the year.
I have an nvd3 line chart that needs to display every date in a month on the x axis. For the current month (July) I have generated 31 x,y pairs. However, the chart omits a couple of those data points. Most data points, actually, have the y coordinate set to null (because not all dates have data, but I still need to display every date).
This is how it looks now:
As you can see, there are some dates missing: 07/08/2018, 07/15/2018, 07/22/2018, 07/30/2018 and 07/31/2018.
This is my code:
chart.xAxis.ticks(weightData.length); // this is 31
chart.xAxis.rotateLabels(-35);
chart.xAxis.showMaxMin(false); // if this is true, even less data is displayed
Is there a way to force the chart do display all the data on the x axis?
I have found the answer here:
NVD3 Line Chart X Axis Ticks Are Missing
The point is to use tickValues() instead of ticks() as the answer on the post in link says.
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.
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
I'm working with a time-based scatterplot and am using data which only parses times by month, hour and day. On my axis labels, I'm getting "1901". D3 seems to be choosing a year and displaying it. How can I easily get rid of this? I don't want any year displayed:
1901 example http://lmnts.lmnarchitects.com/wp-content/uploads/2014/04/2014-04-01-09_31_30-127.0.0.1_8020_Climate3_seattle-winter-temps.html.jpg
you need to set the tickFormat of your axis to display only months and days. The tickFormat receives a function that takes a date and returns a string. You can use d3.time.format to set the tick format:
var axis = d3.svg.axis()
// ... set more attributes
.tickFormat(d3.time.format('%b %d')); // Abbreviated month and decimal day (Apr 01)
Regards,