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
25
categoryX use date string
posted

We face the following problems how to fix that like showing in sample snapshot?

  1. How to set date string for categoryX?
  2. Why the x axis does not display properly?
  3. Why the time of currData is different from the time of currData1, but the chart looks the same?

$(function () {

var currData = [{
Date: "\/Date(1487920800000+0800)\/",
Value: 1
}, {
Date: "\/Date(1487921400000+0800)\/",
Value: 2
}, {
Date: "\/Date(1487922000000+0800)\/",
Value: 3
}, {
Date: "\/Date(1487922600000+0800)\/",
Value: 4
}, {
Date: "\/Date(1487923200000+0800)\/",
Value: 5
}];


var currData1 = [ {
Date: "\/Date(1487922600000+0800)\/",
Value: 6
}, {
Date: "\/Date(1487923200000+0800)\/",
Value: 7
}, {
Date: "\/Date(1487923800000+0800)\/",
Value: 1
}];


$("#container").igDataChart({
width: "500px",
height: "500px",
dataSource: currData,
axes: [{
name: "xAxis",
type: "categoryX",
formatLabel: function (item) {
var val = new Date(parseInt(item.Date.substr(6)));
ret = val.getHours();
ret += ":";
ret += val.getMinutes();
ret += ":";
ret += val.getSeconds();
return ret;
},
label: "Date",
labelAngle: 45,
labelExtent: 50,
markerType: "circle",
interval: 600
},{
name: "xAxis1",
type: "categoryX",
formatLabel: function (item) {
var val = new Date(parseInt(item.Date.substr(6)));
ret = val.getHours();
ret += ":";
ret += val.getMinutes();
ret += ":";
ret += val.getSeconds();
return ret;
},
label: "Date",
labelVisibility: 'collapsed',
markerType: "circle",
interval: 600
},
{
name: "yAxis",
type: "numericY"
}],
series: [{
name: "series1",
title: "Test Series1",
type: "line",
xAxis: "xAxis",
yAxis: "yAxis",
valueMemberPath: "Value"
},
{
name: "series2",
title: "Test Series2",
type: "line",
dataSource: currData1,
xAxis: "xAxis1",
yAxis: "yAxis",
valueMemberPath: "Value"
}],
horizontalZoomable: true,
verticalZoomable: true,
windowResponse: "immediate",
overviewPlusDetailPaneVisibility: "visible"
});

});

Parents
No Data
Reply
  • 960
    Suggested Answer
    Offline posted

    Hello Liao Hao-Hsiang,

    Thank you for posting to our forum.

    categoryX treats each data in order in equal distance. That means, the first data in datasource is the first data and the second data is the second data. And interval also works in the same way.

    For example, in your datasources, currData's first data is
        {
            Date: "\/Date(1487920800000+0800)\/",
            Value: 1
        }

    and currData1's first data is
        {
            Date: "\/Date(1487922600000+0800)\/",
            Value: 6
        }

    Therefore, these two datapoints are treated as the data and plotted on the same X position.

    And you set interval to 600. That means labels are displayed every 600 data. That's why only the first label is displayed.


    If you want to make igDataChart take Date values into consideration as X values, you should use categoryDateTimeX or numericX axes. Whichever you use, you need to convert the serialized date strings to appropriate types before you bind JSON datasource to igDataChart; convert them to date type values if you use categoryDateTimeX and to number type values if you use numericX.

    You can see a similar discussion in http://es.infragistics.com/community/forums/t/75280.aspx

    Best Regards,

    Noriko I.
    Developer Support Engineer
    Infragistics, Inc.

Children
No Data