How to Scale DateTime values on xAxis

Suite and Optimus Suite 5
#1

I am trying to generate a number of stacked charts dynamically, the xAxis is always over time, and the charts use data from the same grid, which is displayed below the charts, each chart is filtering a different kind of type, type is #data1#, value is #data2#, datetime is #data3#, how do I set the step value for the xAxis (which is datetime not int, also I need the full timestamp in case all values are for the same day), so they use the same scale and the datetime values are nicely displayed with just a few, rather than a million on top of each other?

                            var asType = JSON.parse(oFormProps.Grid[n].getUserData("", "Type"));

                            var sFormBox = "<div id='formbox' style='width:100%;height:100%;overflow:auto;'>";
                            var sContainerChart = "";
                            for (var c = 0; c < asType.length; c++) {
                                sContainerChart += "<div id='chart_container{0}' style='width:100%;height:200px;'></div>".format(c);
                            }
                            var sLine = "<hr>";
                            var sContainerGrid = "<div id='gridbox' style='width:100%; height:49%; background-color:white;'></div>";
                            var sFormBoxEnd = "</div>"
                            var sContainerForm = sFormBox + sContainerChart + sLine + sContainerGrid + sFormBoxEnd;
                            moUI.tabbarContent.setContentHTML(oTabProps.ID, sContainerForm);

                            for (var c = 0; c < asType.length; c++) {
                                oFormProps.Chart = new Array();
                                oFormProps.Chart[c] = new dhtmlXChart({
                                    view: "line",
                                    color: "#66ccff",
                                    tooltip: "#data2#",
                                    gradient: "falling",
                                    radius: 0,
                                    alpha: 0.5,
                                    container: "chart_container{0}".format(c),
                                    value: "#data2#",
                                    item: {
                                        borderColor: "#f38f00",
                                        color: "#ff9600",
                                        type: 's'
                                    },
                                    xAxis: {
                                        template: "#data3#"
                                    },
                                    yAxis: {
                                        start: oGrid.getUserData("", "MinValue"),
                                        step: oGrid.getUserData("", "Step"),
                                        end: oGrid.getUserData("", "MaxValue")
                                    }
                                });
                                oFormProps.Chart[c].parse(oFormProps.Grid[n], "dhtmlxgrid");
                                oFormProps.Chart[c].render();
                                oFormProps.Chart[c].filter("#data1#", asType[c]);

                            }
#2

Template for xAxis can be function. I.e. like in this sample:
dhtmlx.com/docs/products/dht … _axis.html
And you can create your custom one to define it.

#3

following the example I inserted template, value and units function , however behavior is changed, the scale is fixed for each chart, and the xAxis now has dates spaced nicely, however I have absolutely no graph?

                            var asDate = JSON.parse(oFormProps.Grid[n].getUserData("", "Dates"));
                            for (var c = 0; c < asAlarmType.length; c++) {
                                oFormProps.Chart = new Array();
                                oFormProps.Chart[c] = new dhtmlXChart({
                                    view: "line",
                                    color: "#66ccff",
                                    tooltip: "#data2#",
                                    gradient: "falling",
                                    radius: 0,
                                    alpha: 0.5,
                                    container: "chart_container{0}".format(c),
                                    value: "#data2#",
                                     xAxis: {
                                        template: function (obj) {
                                            return dhtmlx.Date.date_to_str("%m/%d/%Y")(obj.$unit);
                                        },
                                        value: function (obj) {
                                            return dhtmlx.Date.str_to_date("%m/%d/%Y")(obj.data3);
                                        },
                                        units: {
                                            start: new Date(dateTimeReader(asDate[0])),
                                            end: new Date(dateTimeReader(asDate[MsgDate.length - 1])),
                                            next: function(d) {
                                                return dhtmlx.Date.add(d, 2, "day");
                                            }
                                        }
                                    },
                                    yAxis: {
                                        start: oGrid.getUserData("", "MinValue"),
                                        step: oGrid.getUserData("", "Step"),
                                        end: oGrid.getUserData("", "MaxValue")
                                    }
                                });
                                oFormProps.Chart[c].parse(oFormProps.Grid[n], "dhtmlxgrid");
                                oFormProps.Chart[c].render();
                                oFormProps.Chart[c].filter("#data1#", asAlarmType[c]);

                            }
#4

Please, provide us completed demo and description of fact and exepting results.
docs.dhtmlx.com/doku.php?id=othe … leted_demo

#5

I made a html file that demonstrates the problem, extract and place the two files and copy the dhtmlx files to a directory called dhtmlx in the same directory.
index.zip (6.39 KB)

#6

I got it to print graphs by changing the boundary values for the xAxis from

[“Mon Jan 14 00:00:03 CST 2013”,“Wed Feb 13 23:59:15 CST 2013”]

to

[“Mon Jan 14 00:00:00 CST 2013”,“Wed Feb 14 00:00:00 CST 2013”]

However it still does not print between unit points on the xAxis, currently it prints all even days on the xAxis and it only plots data from the grid matching that particular day, i.e. no data from odd days. I would expect dhtmlxChart to be able to plot any data falling between units rather than exactly matching the unit, how else would you be able to plot floats or timestamps? The chart seem to have a histogram behavior no matter what chart is chosen, i.e. statistical graph, not a mathematical graph. Can you change behavior to a mathematical graph? i.e. I want to be able to mark dates on the yAxis and then plot any data from the grid between those dates, not just the ones that exactly match the date, is that possible?

#7

You need to include in templatу all the items you need to dislay. By this reason you need to set ‘next’ parameter as every day to display data on odd date.
But you can hide odd date units.
Your xAxis code is the next:

xAxis: {
template: function (obj) {
return obj.$unit.getDate()%2 ? “” : dhtmlx.Date.date_to_str("%m/%d/%Y")(obj.$unit);
},
value: function (obj) {
return dhtmlx.Date.str_to_date("%m/%d/%Y")(obj.data3);
},
lineColor: function(obj) {
return obj.$unit.getDate()%2 ? “#737373”: “transparent”;
},
units: {
start: new Date(MsgDate[0]),
end: new Date(MsgDate[MsgDate.length - 1]),
next: function (d) {
return dhtmlx.Date.add(d, 1, “day”);
}
}
},