I want to create chart for 24 hrs data using highcharts , but Its seems first two data is not rendering properly, its rendering 11 column in place of 12,
Can someone help me.. I have create example here
Remove this from your code
min: Date.UTC(year,month,perviousDay),
max: Date.UTC(year,month,todayDate),
In your series data the first timestamp refers to the date 22nd January and as per your min parameter Date.UTC(year,month,perviousDay) which is referring the date of 23rd January so your graph is ommiting the first record of 22nd January because of the minimum value of the axis and same will apply with max parameter.
So either you can remove min and max parameters or based on your series data you can set min and max in such a way that it doesn't omit any data. Hope this helps.
Related
It's quite straight-forward to get them (eg. looping through data) if ticks are always every week (d3.time.weeks). I would like to know is there a generic solution, if tick intervals (d3.time.months, d3.time.weeks, etc) are different based on period length of data.
In the example below the value 6 is the maximum value of the week (January 1 - January 7).
Trying to show the name of very first and last month on x-axis.
Plus, the x axis has the following option
minTickSize: [2, "month"] .
So , basically the x axis shows Feb, April, June, ... and so on.
I would like it to start with the first month value in the data set.
How could I enable that ?
Fiddle: http://jsfiddle.net/shamaleyte/6gL1wzsL/6/
Your data has one datapoint per month but always at 19:44 on the 14th.
The tick for your first month (December) would be on December 1th which is not in your data range. Possible solutions:
Change min and max values to the first day of a month (example fiddle):
min: 1417388400000,
max: 1427925600000
Change the dates in your data to the first day of the month.
Use the category plugin / mode instead of time mode.
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,
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
I have a HighChart chart which contains a series which is made up of date/value pairs. Each date in the pairs is different. When there are data pairs which have dates which are not within the same week they dates are displayed as they should (mm/dd/yyyy) but when the data set contains only a view pairs which are all within the same week or days right next to each other instead of displaying dates in the (mm/dd/yyyy) format the chart switches to what looks like a time display and shows 00:00, 08:00, 16:00 instead of the full dates.
I already scoured the HighCharts forum and cannot find nor get an answer to this strange behaviour. Maybe someone here can help.
You can see the chart at http://jsfiddle.net/schleichermann/DkgVr/
This is a foible of the auto-scaling algorithm.
Basically, it starts with the smallest unit and stops looking too soon in some cases (like yours)1.
If you know, in advance, the timescale of interest, you can tweak the xAxis settings to compensate.
In this case adding:
day: '%b %e',
hour: '%b %e',
May be adequate. See: jsfiddle.net/DkgVr/4/ .
Or setting tickInterval: 24 * 3600 * 1000 (one day) might be good enough.
See: jsfiddle.net/DkgVr/5/ .
1 It should probably work largest to smallest. Consider making a feature-request or bug report.