Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1055
date x axis
posted

Hallo,

the datasource of my chart is an array of array. The first item in the array is a date value.

I want to have an X-axis with given minimum and given maximum. The interval should be one hour. How can I do this?

Currently minumum and maximum determined from the data. I am not able to set the interval to one hour.

 

Here is my current definition:
name: "XAxis",                        
type: "categoryX",                        
minimumValue: currentStart,                        
maximumValue: currentEnd,                        
formatLabel: formatXAxisLabel

  • 30692
    Verified Answer
    Offline posted

    the categoryX axis is for if your data should all be equidistant. Each point is the same distance from the previous as the next. It does not insert missing values. You can use it with Dates, but they are basically just being treated as strings.

    If you want to treat the dates as dates, then you should use the categoryDateTimeX axis or the numericX axis. If you use the numericXAxis you would be converting your dates to numbers to bind along that axis, and you can set the minimumValue, maximumValue and interval to set up the grid line and label display. And you would probable want to specify a formatLabel method to convert the number used back into a date time for displaying in the labels.

    If using the categoryDateTimeX axis, then you need to also set a dateTimeMemberPath to the location of the date column, which should be a JS Date, and you can set JS Dates to be the minimumValue, maximumValue, and interval as the numeric timespan that you want to divide up the time range into. You would also want to specify a formatLabel method here to indicate what date time format you want to use with the labels. Here is an example of using the categoryDateTimeX axis:

     

    $(function () {
                
                var currData = [{
                    Date: new Date(2011, 1, 1),
                    Value: 1
                }, {
                    Date: new Date(2011, 1, 2),
                    Value: 2
                }, {
                    Date: new Date(2011, 1, 4),
                    Value: 3
                }, {
                    Date: new Date(2011, 1, 5),
                    Value: 4
                }, {
                    Date: new Date(2011, 1, 8),
                    Value: 5
                }];
    
    
                $("#container").igDataChart({
                    width: "500px",
                    height: "500px",
                    dataSource: currData,
                    axes: [{
                        name: "xAxis",
                        type: "categoryDateTimeX",
                        formatLabel: function (item) {
                            var ret = '';
                            ret += item.getMonth() + 1;
                            ret += "/";
                            ret += item.getDate();
                            ret += "/";
                            ret += item.getFullYear();
    
                            return ret;
                        },
                        dateTimeMemberPath: "Date",
                        labelAngle: 45,
                        labelExtent: 50,
                        markerType: "circle",
    					interval: new Date(2011, 1, 4).getTime() - new Date(2011, 1, 2).getTime()
                    },
                    {
                        name: "yAxis",
                        type: "numericY"
                    }],
                    series: [{
                        name: "series1",
                        title: "Test Series",
                        type: "line",
                        xAxis: "xAxis",
                        yAxis: "yAxis",
                        valueMemberPath: "Value"
                    }],
                    horizontalZoomable: true,
                    verticalZoomable: true,
                    windowResponse: "immediate",
                    overviewPlusDetailPaneVisibility: "visible"
                });
    
                //            $("#container").bind("igdatachartrefreshcompleted", function () {
                //                    alert("here!");
                //                
                //            });
            });