Hallo liebe Community,
ich bin absoluter html-Neuling und möchte gerne bisschen was ausprobieren. Und zwar gibt es eine Beispiel-Webapp die folgendermaßen ausschaut:
[Blockierte Grafik: http://fs5.directupload.net/images/151025/34h7xj7x.jpg]
Man kann mit der App Dateien empfangen wie z.B. diverse Messwerte. Allerdings beschränkt sich die Anzahl der zu empfangenen Werte auf lediglich eine Quelle. Daher auch nur ein Diagramm. Ich würde gerne mehrere Werte empfangen können und diese auch jeweils auf einem Diagramm wie oben dargestellt visualisieren. Die Diagramme würde ich zudem gerne untereinander anzeigen wollen.
In dem Code meine ich herausgefunden zu haben welcher Teil das Diagramm erstellt, aber ich habe nicht herausgefunden wie man noch ein zweites erstellt und darunter anordnet.
Hier der Code-Abschnitt:
function calculateChartHeight() {
var pageHeaderHeight = 48;
var consumptionPanelHeight = 48;
var pushPanelHeight = 48;
var listHeight = 193;
var margins = 33;
var staticHeight = pageHeaderHeight + consumptionPanelHeight
+ pushPanelHeight + listHeight + margins;
var windowHeight = $(window).height();
return (windowHeight - staticHeight) + "px";
}
function createDimensionFeed() {
return new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid" : "axisLabels",
"type" : "Dimension",
"values" : [ 'Timestamp' ]
});
}
function createMeasureFeed() {
return new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid" : "primaryValues",
"type" : "Measure",
"values" : [ 'Value' ]
});
}
function createDataSet() {
return new sap.viz.ui5.data.FlattenedDataset({
dimensions : [ {
name : 'Timestamp',
value : {
path : 'sensor>C_TIMESTAMP',
formatter : function(oValue) {
//can be a string primitive in JSON, but we need a number
if ((typeof oValue) === 'string') {
oValue = parseInt(oValue);
}
//ensure that UNIX timestamps are converted to milliseconds
var oDate = new Date(oValue * 1000);
return oDate.toLocaleString();
}
}
} ],
measures : [ {
name : 'Value',
value : '{sensor>C_VALUE}'
} ],
data : {
path : "sensor>/"
}
});
}
function createVizFrame() {
var sHeight = calculateChartHeight();
var oVizFrame = new sap.viz.ui5.controls.VizFrame({
width : "100%",
height : sHeight,
vizType : "line",
vizProperties : {
plotArea : {
dataLabel : {
visible : false
}
},
legend : {
visible : false
},
title : {
visible : false
},
categoryAxis : {
title : {
visible : false
}
}
},
xAxis : {
title : {
visible : false
}
},
yAxis : new sap.viz.ui5.types.Axis({
scale : new sap.viz.ui5.types.Axis_scale({
fixedRange : true,
minValue : 0,
maxValue : 100
})
}),
dataset : createDataSet()
});
oVizFrame.addFeed(createDimensionFeed());
oVizFrame.addFeed(createMeasureFeed());
$(window).resize(function() {
var sHeight = calculateChartHeight();
oVizFrame.setHeight(sHeight);
});
return oVizFrame;
}Ich würde mich sehr über eure Hilfe freuen. Vielen Dank schonmal!