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]);
}