Develop Reference

Highchart series is choping

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.

Highstock month dataGrouping with Jalali/Persian dates

I have a Highstock StockChart which uses Persian(Jalali) dates.
I am using dataGrouping on days and months. Although dataGrouping is fine on days, months grouping is not working. Its because of the difference between Jalali and Christian months.
For example 1st of January begins on 10th of month دی of Jalali months. So when I have data from 1st of دی to 30th of دی (the whole month), I want Highcharts to show only one column for دی but instead it shows two columns. One for آذر (a month before دی) and one for دی. It's because it sees December before January (because of the 10 day difference).
Here's a sample : http://jsfiddle.net/SQwGT/9/
Its not a good example specially when most of you don't know Persian language, but it somehow demonstrates the issue.
How can I fix it? Is there a way I can tell Highcharts how to manage its months? Is there any other way around?

I wrote a PersianDate class and implemented every single method in the class Date more importantly set/get UTC Date/Month/... methods. And I used:
Highcharts.setOptions({
global: {
Date: PersianDate
}
});
to change the Date class the Highchart uses. After that the chart knew which month started and ended in which days from the UTC Date format and the dataGrouping worked fine with Jalali months.

You can overwrite default approximation, and prepare your own.

Flot Graph TickLabel and Tick Positioning Issue

I have been using FLOT for many great things. Recently, i have needed to use it for time based plots. It worked perfect last month, but this month, i noticed that my last tick was smaller than the others. Also, i noticed that the tick label was not there.
Here is a JSFIDDLE of the issue for you to look at.
Due to the large amount of Javascript, i will keep all the code inside the Fiddle; unless the information is requested.
However, me and a friend thought of a simple workaround :
if(% 2 === 0) {
/*
Check if the data can be divided by 2
Repeat this for 3 as well (return the value and
plug it in the tickSize: [val, 'day'];
*/
}
The only drawback i see here if for months that have 31 days.
How would i fix this issue, or what did i do wrong that is causing this effect?

How about always making the chart 31 days wide (which means 30 days between first and last day and 15 ticks each 2 days wide)? You get that by setting the x axis maximum if your month does not have 31 days by itself:
xaxis: {
mode: "time",
timeformat: "%b %d",
tickSize: [2, 'day'],
max: 1398902400000
},
See this updated fiddle.

DC.js X-axis hour labels appear as thousandths

Using dc.js to build some charts. The localHour attribute contains numbers between 0 and 23. However, when using this on my axis, all numbers are reported as thousandths instead of the standard hour. 04 PM also appears at the origin.
How can I fix this?
var hourDim = ndx.dimension(function(d){ return d.hour; });
var num = hourDim.group().reduceSum(dc.pluck('count'));
var mainChart = dc.lineChart("#main");
mainChart
.width(500).height(200)
.dimension(hourDim)
.group(num)
.x(d3.time.scale().domain([0,24]))
.yAxisLabel("Count per Hour")

What's actually going on here is that your "hour" measurements are being interpretted as milliseconds. Milliseconds are the default Javascript time unit if you don't specify otherwise. Specifically, you're getting milliseconds after the Javascript zero time, which is sometime on Dec 31 1969 or Jan 1 1970 depending on timezone adjustment, and apparently starts at 4pm in your timezone. The rest is just default formatting trying to make things look nice.
Unless you're doing other things that require the hours to be treated as timestamps, it is probably easiest to leave the hours as plain numbers, using a linear scale instead of a time scale.
If you're fine with plain old "1", "2", "3" on the axis labels, that's all you have to do.
If you want those numbers to look like hours, you need to set a tickFormat function on the chart axis.
You could just do something like
mainChart.x(d3.scale.linear().domain([0,24])
.tickFormat(function(h){return h + ":00";})
);
But that causes problems if the axis decides to put ticks at fractional values -- you'll get something that looks like 1.5:00 instead of 1:30. You could fix that with some math and number formatting functions, but at that point you're doing enough work to make it worth using proper date-time formatting.
To get proper hour:minute axis labels, you can use a d3 time formatting function to specify the format, but you're also going to have to translate the number of hours into a valid date-time object.
var msPerHour = 1000*60*60;
var timeFormat = d3.time.format.utc("%H:%M");
mainChart.x(d3.scale.linear().domain([0,24])
.tickFormat(function(h){
return timeFormat(new Date(msPerHour*h) );
})
);
Note that I've specified the time format function to use UTC time instead of local time, so that it treats zero as midnight. It still thinks it's midnight, Jan 1 1970, but you're also specifying the formatting to only include hours and minutes so that shouldn't be an issue.

Highcharts data off by one day

I have a Highchart that I cannot seem to fix. The dates on the xAxis are correct but the dates on the labels are off by one day. No matter what data I pass to my chart it is always off by one day. I have been pulling my hair out trying to figure this out. Any tips would be appreciated.
You can see my code here:
http://jsfiddle.net/brenjt/zxBTG/2/

Just found your question... I think the solution to your problem is to set up the UTC timezone option to false. This will set up the chart timezone to be local and not UTC.
Highcharts.setOptions({
global : {
useUTC : false
}
});
See: http://api.highcharts.com/highcharts#global.useUTC

Well, I added time info to the axis and tooltip see http://jsfiddle.net/gATfu/
It looks like your timestamps are from 10pm but the axis labels are showing 0am ... thats why the points look about one day shifted.

it's because of the timezone. You should convert you date in UTC format with Date.UTC(..). It will work

The global HighCharts option for UTC worked quite good. I cannot yet vote that one up :(
I also figured out that HighCharts moves my bar chart according to the exact time stamp as described by dgw. I.e. a date from the 1st of May can be shown in the near of 30th of April depending on the scaling. That confused me because there were two 30th of April entries and no 1st of May.