Using the Org Chart in the Google Visualization API, is there a way to flip the chart to a vertical layout instead of horizontal.
Unfortunately no. It is not possible at the moment.
This feature has been requested in Issue #47 on the Google Visualization API issue tracker.
You may want to star the issue to let Google know about your interest in this feature.
GetOrgChart jQuery widget has oeriantation option to show vertical org chart
Orientation of the GetOrgChart widget.
getOrgChart.RO_TOP
getOrgChart.RO_BOTTOM
getOrgChart.RO_RIGHT
getOrgChart.RO_LEFT
Default value: getOrgChart.RO_TOP
Code examples:
$("#people").getOrgChart({
orientation: getOrgChart.RO_LEFT,
dataSource: [
{ id: 1, parentId: null, Name: "Amber McKenzie"},
{ id: 2, parentId: 1, Name: "Ava Field"},
{ id: 3, parentId: 1, Name: "Evie Johnson"}]
});
JSFIDDLE Demo
Related
Say, I want to chart CPU usage metric for each pod in my system, with Podname being the dimension. Can I specify a widget in CDK like this, and expect it to get all pods in one widget:
const podcpumetric = new cloudwatch.Metric({
namespace: 'chkk',
metricName: 'CPU Metrics with podName as dimension',
period: Duration.days(1),
// dimensionsMap: {}, // not specified so that all pods are in the widget
statistic: 'maximum',
});
dashboard.addWidgets(
new GraphWidget({
title: 'Pod Cpu Usage',
width: 12,
left: [podcpumetric],
}),
);
I tried something like the above without specifying the dimension and hoping that it will get all pods' data. This does not seem to work.
I can however, declare one metric per pod, and then add it in the left array, but that doesn't seem a comprehensive solution. As I will have to update this widget, if I add a new pod in the future and want to chart its data.
I found out that this is possible. Domain is the only dimension in its dimensionSet.
const CompanyLogins = new MathExpression({
label: 'NumberOfDailyLoginsPerDomain',
expression: `SEARCH(' {namespace, Domain} MetricName="NumberOfDailyLoginsPerDomain" ', 'Maximum', 1440)`,
usingMetrics: {},
});
dashboard.addWidgets(
new GraphWidget({
title: 'Number of Logins per Domain (sum of logins by all users of the domain)',
width: 12,
view: cloudwatch.GraphWidgetView.BAR,
left: [CompanyLogins],
}),
);
We are trying to get a PowerBi report embedded in a Powerapps portal to show the mobile view of the report.
As described here, I’m testing with a report which only have mobile enabled pages.
This is the code I use to request the mobile version, as documented here.
let report = (await powerbi.get($('.portal-pbi-embedded')[0]))
let page = (await report.getPages()).find(i=>i.isActive);
console.log(await page.hasLayout(window['powerbi-client'].models.LayoutType.MobilePortrait))
// true
console.log(await report.updateSettings({layoutType: window['powerbi-client'].models.LayoutType.MobilePortrait}))
// {statusCode: 202, headers: {…}, body: undefined}
It appears that PowerBi can see that there is a mobile layout for the active page, and the updateSettings commands executes without errors, but nothing happens.
I also tried embedding the report again, where I request the mobile layout upfront, this gives the same behaviour (only showing the desktop version).
I recognized that the powerbi client version that powewrapps portals uses is a bit old (version 2.6.5). Even though that we are running the latest version of the portal that are available to us (9.3.2205.12).
Question 1: How do we show the mobile version of the report in the portal?
Question 2: Is there a way to update the powerbi client in the portal?
First Question
you should note the following (from docs):
after the report initial load, changing to report mobile layout is
supported only if mobile layout (portrait/landscape) has been set into
the initial embedding configuration object. Otherwise, you must first
call powerbi.reset(HTMLElement) to remove the iframe. Then, you have
to call powerbi.embed(...) using the same container with the mobile
layout setting defined on the embedded configuration object.
So basically, you are facing two options:
First Option - In your Configuration, use the following concept to control your visuals:
let models = window['powerbi-client'].models;
let embedConfig = {
type: 'report',
id: reportId,
embedUrl: 'https://app.powerbi.com/reportEmbed',
tokenType: models.TokenType.Embed,
accessToken: 'H4...rf',
settings: {
layoutType: models.LayoutType.Custom
customLayout: {
pageSize: {
type: models.PageSizeType.Custom,
width: 1600,
height: 1200
},
displayOption: models.DisplayOption.ActualSize,
pagesLayout: {
"ReportSection1" : {
defaultLayout: {
displayState: {
mode: models.VisualContainerDisplayMode.Hidden
}
},
visualsLayout: {
"VisualContainer1": {
x: 1,
y: 1,
z: 1,
width: 400,
height: 300,
displayState: {
mode: models.VisualContainerDisplayMode.Visible
}
},
"VisualContainer2": {
displayState: {
mode: models.VisualContainerDisplayMode.Visible
}
},
}
}
}
}
}
};
...
// Embed the report and display it within the div container.
let report = powerbi.embed(embedContainer, embedConfig);
The second option - use the reset method:
powerbi.reset(HTMLElement)
powerbi.embed(...)
Second Question
I'm not sure that I understood your question correctly, but if I did - take a look here (https://learn.microsoft.com/en-us/javascript/api/overview/powerbi/update-settings)
I am using chart js annotations plugin in Bar Chart. I am trying to rotate the label to align it vertically with the bar but it is not working. Can anyone please suggest how to use the rotation property?
annotation: {
annotations: [{
type: 'line',
// drawTime: 'afterDatasetsDraw',
mode: 'vertical',
scaleID: 'x-axis-0',
value: "0-25%",
borderWidth: 1,
label: {
xAdjust: 6,
enabled: true,
content: 'Highly Mobile',
rotation: 0
}
},
{
type: 'line',
// drawTime: 'afterDatasetsDraw',
mode: 'vertical',
scaleID: 'x-axis-0',
value: "26-50%",
borderWidth: 1,
label: {
xAdjust: 6,
enabled: true,
content: 'Highly Mobile',
rotation: 90
}
}]
Latest update: We can put git link of the same in package.json.
I found the answer. The chartjs annotation plugin cdn has not included the rotation property. We need to download the zip of master branch and extract it to our project folder. Then npm install ./{folder-name}.
I had the same issue withe the 0.5.7 version i suggest you to move to newer version or add this rotation file https://github.com/chartjs/chartjs-plugin-annotation/files/4988167/chartjs-plugin-annotation-rotation.zip, all this if you don't want to use nodejs.
I tried to setup WSO2 EMM V2.0.1 and added few same model Android mobiles to EMM. But I feel hard to identify the mobiles, since all mobiles are showing same information in EMM device management console. I need to select the mobile and jump to specify mobile to see the details(such as IEMI) one by one. The following screen capture which is captured from my testing environment Capture from testing environment. When I search from internet, I watched a demo from youtube and found the console display is different with the my testing environment, the mobile IEMI information is showed on the device management console page and very easy to identify the mobile. The following screen capture is captured from youtube.Capture from youtube. May I know any brother have experience about this?
I had a look at code and it can be easily customized like this. Here is the diff of <EMM_HOME>/repository/deployment/server/jaggeryapps/emm/units/device-listing/public/js/device-listing.js
228c228,229
- { targets: 3, data: 'enrolmentInfo.status', className: 'fade-edge remove-padding-top' ,
---
+ { targets: 3, data: 'deviceIdentifier', className: 'fade-edge remove-padding-top'},
+ { targets: 4, data: 'enrolmentInfo.status', className: 'fade-edge remove-padding-top' ,
247,249c248,250
- { targets: 4, data: 'type' , className: 'fade-edge remove-padding-top' },
- { targets: 5, data: 'enrolmentInfo.ownership' , className: 'fade-edge remove-padding-top' },
- { targets: 6, data: 'enrolmentInfo.status' , className: 'text-right content-fill text-left-on-grid-view no-wrap' ,
---
+ { targets: 5, data: 'type' , className: 'fade-edge remove-padding-top' },
+ { targets: 6, data: 'enrolmentInfo.ownership' , className: 'fade-edge remove-padding-top' },
+ { targets: 7, data: 'enrolmentInfo.status' , className: 'text-right content-fill text-left-on-grid-view no-wrap' ,
263a265
+ var imei = data.deviceIdentifier;
278a281,285
+ $(this).attr('data-grid-label', "IMEI");
+ $(this).attr('data-search', imei);
+ $(this).attr('data-display', imei);
+ break;
+ case 4:
283c290
- case 4:
---
+ case 5:
288c295
- case 5:
---
+ case 6:
It will look like this.
I believe these are two different EMM versions. If you need to show more details you will have to customize EMM. In EMM 2.0.1 same information is already there, you need a small customization to render these information.
Per my company's requirements, we want our column labels to be along the bottom of the chart. In Google Charts, you can accomplish this with the following:
view.setColumns([0,
{ calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation" },
1,
]);
Notice that the annotation role comes before the bars that it will be labeling. Thus, the annotation is annotating the horizontal axis, and voila! Your annotations are along the bottom of the chart.
Here's where my problem comes in. I actually want this particular chart to have TWO annotations. One for my columns (along the bottom), and another annotation for a second line. I thought this would be a simple matter of something like this:
view.setColumns([0,
{ calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation" },
1,
3,
{ calc: "stringify",
sourceColumn: 4,
type: "string",
role: "annotation" },
]);
However, doing this seemingly simple setup resulted in "Failed to execute 'replaceChild' on 'Node'" error from Google Charts. With a little testing I realized that the failure was the combination of trying to have the first annotation on the horizontal axis + have a second annotation.
Unfortunately, my work demands that this be exactly how these charts look. How can I have two annotations on the same chart where one annotation is along the horizontal axis, and the other annotation is in its usual spot?