I am trying a splitApp, I have used the BulletChart in the details page, I want to show the BulletChart (Actual value should be taken from the master page selected item).
My Master.Controller:
itemSelected: function () {
var app = sap.ui.getCore().byId("appid");
var list = sap.ui.getCore().byId("listid");
var sitem = list.getSelectedItem();
var spath = sitem.oBindingContexts.data.sPath;
var oitem = sap.ui.getCore().getModel('data').getProperty(spath);
var Model = new sap.ui.model.json.JSONModel(oitem);
sap.ui.getCore().setModel(Model, 'item');
app.toDetail("detailsid", "show");
}
My Details Page View:
var oBCTmpl = new sap.suite.ui.commons.BulletChart({
//id:"bullet",
size: sap.suite.ui.commons.InfoTileSize.Auto,
scale: "INR",
actual: [{
value: "{item>/Amount}",
color: sap.suite.ui.commons.InfoTileValueColor.Error
}],
targetValue: 2500,
thresholds: [
{value: 0, color: sap.suite.ui.commons.InfoTileValueColor.Good},
{value: 1000, color: sap.suite.ui.commons.InfoTileValueColor.Good},
{value: 2000, color: sap.suite.ui.commons.InfoTileValueColor.Good},
{value: 3000, color: sap.suite.ui.commons.InfoTileValueColor.Good},
{value: 4000, color: sap.suite.ui.commons.InfoTileValueColor.Error}
],
showActualValue: true,
showTargetValue: true,
showDeltaValue: true,
showValueMarker: false,
mode: sap.suite.ui.commons.BulletChartMode.Actual
});
Output:
Why is the Actual value not showing in the chart?
Your data binding in "My Details Page View" seems OK.
Some of your code is missing. So it has to be something with either the list implementation you've chosen and/or binding info/data you use from the selected item.
One of the recomendation is to use the following:
sitem.getBindingContext().getPath();
instead of:
sitem.oBindingContexts.data.sPath;
See an example with SplitApp and sap.m.SelectList in jsfiddle here (click on an arbitrary item on the left).
Related
I know this may seem as a dupplicate and by all means, show me which one, 'cause I have spent 2 days looking for a similar question but to no avail.
I have a table in which the user can select rows by checking them and the option "View Record".
My problem is the navigation buttons inside the "View Record"-pane are disconsidering the selected rows completely.
If I have four rows and check rows 1 and 3 because I want to see the records of only those two, I click on the next button after I saw record 1 and row 2 is then showed, not the thrird. This is not the wanted behaviour.
Anyone has an ideea how to make it so that the navigation buttons of the "view record" only allows the navigation between the selected rows?
Many thanks in advance.
Oh, here is my code:
var resultItems = [
{
customerId: 20000001,
customerName:"Customer 1",
},
{
customerId: 20000002,
customerName:"Customer 2",
},
{
customerId: 20000003,
customerName:"Customer 3",
} ,
{
customerId: 20000004,
customerName:"Customer 4",
}
];
var fields = [
{name: "Id", label: "Id", search: true, key: true}, //, hidden:true
{name: "customerName", label: "Kunde", search: true, sortable: true,prefix:null,},
{name: "customerId", label: "Customer-ID", search: true, sortable: true,prefix:null,}
];
$(function () {
"use strict";
$.jgrid.guiStyles.jQueryUI.dialog.window = "dijitPopup ui-jqgrid-jquery-ui ui-widget ui- widget-content ui-corner-all ui-front";
$("#enhancedReportingGrid").jqGrid({
datatype:"local",
colModel: fields,
data: resultItems,
iconSet: "fontAwesome",
loadonce: true,
viewrecords: true,
width: 780,
height: 200,
multiselect:true,
pager: "#enhancedReportingGridPager",
});
$('#enhancedReportingGrid').jqGrid('navGrid', '#enhancedReportingGridPager',
{add: false, edit: false, del: false, search: false, view: true}, {width: 500});
});
I suggest you to switch to the supported commercial Guriddo jqGrid version.
I have just added in Guriddo jqGrid a option viewselected in viewGridRow method, which allow you to view only selected rows in multiselect mode. The option editselected do the same for edit mode. This option (editselected) also exists in older releses.
This feature will be available in the upcoming release which is scheduled for a September 1, 2020
Here is a working Guriddo demo
I want to adda the predict data and the actual data in real time in the same graph to get something like that:
my code is like that:
xArr.push(jsonRes[i].timestamp)
yArr.push(jsonRes[i].deplacement)
yMax.push(3)
yMin.push(-3)
yPredict.push()
// draw chart
let canvas = document.getElementById("myChart");
let ctx = canvas.getContext('2d');
myChart = new Chart(ctx, {
type: 'line',
data: {
labels: xArr,
datasets: [{
label: 'Déplacement cumulé de la chaine inclinométrique (mm)', // Name the series
data: yArr, // Specify the data values array
fill: false,
borderColor: '#2196f3', // Add custom color border (Line)
backgroundColor: '#2196f3', // Add custom color background (Points and Fill)
borderWidth: 1 // Specify bar border width
}, {
label: 'Déplacement max toléré', // Name the series
data: yMax, // Specify the data values array
fill: true,
borderColor: '#b30000'
}, {
label: 'Déplacement min toléré', // Name the series
data: yMin, // Specify the data values array
fill: true,
borderColor: '#b30000'
}, {
label: 'ML', // Name the series
data: yPredict, // Specify the data values array
fill: true,
borderColor: '#b30000'
}
]
},
options: {
responsive: true, // Instruct chart js to respond nicely.
maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height
}
});
I want to get an unique graph where I will have a part of actuel data in real time and the next part of predict data. All these datas come from a database as timeseries.
you can use plugin and chagne the chartLineStlyle from where you want to dashed.
https://www.chartjs.org/docs/latest/developers/plugins.html
Use plugin available hook
var chart = new Chart(ctx, {
plugins: [{
beforeInit: function(chart, options) {
//..
}
}] });
I am using sap.m.Table to display some documents as a sap.m.Dialog.The UI looks as below:
Everything works as expected but when I scroll to the last Item (growing=true) the table rerenders and moves back to the top. Ideally that would happen only when I refresh a model. I am using bindAggregation to bind the odataModel to the UI. Please see a snippet below (Note:Partial snippet).
var dialog = new Dialog({
title: title,
buttons: [
new sap.m.Button({
text: "{i18n>close}",
press: function(oEvt) {
dialog.close();
}
})
]
});
var table = new sap.m.Table({
width: "100%",
inset: true,
growing: true,
growingThreshold: 100,
growingScrollToLoad: true
})
dialog.addContent(table);
if (!dialog.isOpen()) {
dialog.open();
}
var oDModel = new ODataModel(kmURL, {
json: true
});
oDModel.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay);
table.setModel(oDModel);
var mParams = {
path: "/DocumentQuerySet",
template: template,
};
table.bindAggregation("items", mParams);
I think that bindAggregation internally refreshes the model which forces the table to rerender after every data call. How can I avoid the model to refresh/rerender the table so that it does not scroll to the top every time the user scrolls down to see more data.
Appreciate any help.
Thanks.
You could fix this problem by placing the Table control within a ScrollContainer. The ScrollContainer will handle the growing feature of the table, which causes the change in height of the control. This will retain the current position without moving back to the top.
....
var table = new sap.m.Table({
width: "100%",
inset: true,
growing: true,
growingThreshold: 100,
growingScrollToLoad: true
})
var oScroll = new sap.m.ScrollContainer({
width: "100%",
height: "500px",
vertical: true,
content: table
})
dialog.addContent(oScroll);
....
Morning,
I am using Sencha Touch 2.3, Sencha Cmd 4.0.2.67
Unfortunately, I do not know enough about Sencha to be able to explain and diagnose my problem, so please forgive any omissions.
When I try to run my app, which creates several gauges and bar charts, before any charts have been drawn, the app crashes and console.log give the following error message:
Uncaught TypeError: Object [object Object] has no method 'getDirection'
It says the error is on line 683 of chart.series.Series.js, which looks like this (this is how it came out of the box):
for (i = 0, ln = axes.length; i < ln; i++) {
axis = axes[i];
if (!directionMap[axis.getDirection()]) {// <-- line 683
directionMap[axis.getDirection()] = [axis];
} else {
directionMap[axis.getDirection()].push(axis);
}
}
I have checked axis.Axis.js, and I can see that line 543 has the following:
getDirection: function () {
return this.getChart().getDirectionForAxis(this.getPosition());
},
console.log(axes[i]) shows the following:
Class {titleStyle: Class, labelStyle: Class, gridStyle: Class, initConfig: function, initialConfig: Object…}
_chart: Class
_fields: Array[0]
_labels: Array[0]
_margin: 10
_maximum: 10
_minimum: 0
_position: "gauge"
_steps: 10
_title: false
axisId: "ext-axis-12"
config: objectClass
eventDispatcher: Class
getEventDispatcher: function () {
getObservableId: function () {
getUniqueId: function () {
gridStyle: Class
id: "ext-chart-axis-gauge-1"
initConfig: function (){}
initialConfig: Object
labelStyle: Class
managedListeners: Object
observableId: "#ext-chart-axis-gauge-1"
titleStyle: Class
usedSelectors: Array[1]
__proto__: Object
My app generates both gauges AND bar charts. If I disable the gauges then I no longer get this error. So, the problem lies with the function which creates my gauges. Here it is:
var gaugeTitle = thetabs[tt].Entries[tt2].Title;
var currentValue = (thetabs[tt].Entries[tt2].CurrentValue > 0)?thetabs[tt].Entries[tt2].CurrentValue:0;
var baseValue = thetabs[tt].Entries[tt2].BaseValue;
var centreValue = thetabs[tt].Entries[tt2].CentreValue;
var generated = thetabs[tt].Entries[tt2].Generated;
var gaugeData = thetabs[tt].Entries[tt2];// this data populates the gauge store
// now we create a store for the gauge
var gaugeStore = Ext.create('Ext.data.Store', {
storeId: 'gaugeStore',
fields: [{'name':'BaseValue','type':'int'},
{'name':'CentreValue','type':'int'},
{'name':'CurrentValue','type':'int'},
{'name':'Generated'},
{'name':'Title'},
{'name':'Type'}],
data: gaugeData
});
gaugeStore.setData(gaugeData); // Use the add function to add records or model instances.
// set the maximum value on the gauge, then round it to whole number
var gaugemax = (thetabs[tt].Entries[tt2].CentreValue>10)? thetabs[tt].Entries[tt2].CentreValue*2:10;
// ensure gauge max is never less than currentValue
if(gaugemax < currentValue){
gaugemax = currentValue+(currentValue*.1); // use 110% of currentValue
}
// show whole numbers only
gaugemax = Math.round(gaugemax/10)*10;
//set gauge colour
gaugeColor = setGaugeColour(siteName);
/// new gauge
var chartgx = {
cls: 'thegauge',
itemId: 'gauge'+tt2,
xtype: 'chart',
shadow: true,
store: gaugeStore,
width : 'auto',
animate: true,
insetPadding: 50,
axes: [{
type: 'gauge',
position: 'gauge',
minimum: 0,
maximum: gaugemax,
steps: 10,
margin: 10
}],
series: [{
type: 'gauge',
minimum: 0,
maximum: gaugemax,
steps: 10,
margin: 10,
angleField: 'CurrentValue',
donut: 30,
colorSet:[gaugeColor,'#e1e1e1']
}]
};
`
Can someone please advise me how to correct.
Removing the axes from the gauge seems to have fixed this problem, but now I am presented with another :-(
My problem is that the datagrid does not appear I need it to be empty so I can add items to do a relation with a existing FilteringSelect Formatter.
function formatter1() {
var x = new FilteringSelect({
name: "Account Select",
//value: "1",
store: remoteData,
searchAttr: "name",
onChange: function () {
console.log("EI");
}
});
x._destroyOnRemove=true;
return x;
}
// Relations data grid
var DataRelations = { identifier: "id", items: [] };
storeRelations = new Write({data: DataRelations, clearOnClose: true });
var layoutRelations = [
{'name': "Words", field: "word", width: 40 },
{'name': "Account", field: "id", width: 40, formatter: formatter1 }
//,{'name': "Accounts Available", field: "AccountsAvailable", width: 20, formatter: formatter1}
];
var gridRelations = new DataGrid({
id: 'gridRelations',
store: storeRelations,
structure: layoutRelations,
rowSelector: '10px'
});
/*append the new grid to the div*/
gridRelations.placeAt("gridDivRelations");
/*Call startup() to render the grid*/
gridRelations.startup();
here is a working jsfiddle based on your code:
http://jsfiddle.net/LFk8Z/
You need to specify a width and a height for the DIV container of the grid. Maybe that was the initial problem. Also you need to load the grid css resources. Your formatter function did not have a paramater, but you need to specify one:
function formatter1(x) {
// Format cell value (which is in x) in here.
}