I am trying to change series column width and height dynamically in amChart JS Radarchart, but it is not working. Please find the below code and let me know the suggestion.
var series = chart.series.push(new am4charts.RadarColumnSeries());
series.columns.template.adapter.add("width", function(text, target, key) {
console.log('hit');
return am4core.percent(10);
});
series.columns.template.adapter.add("height", function(text, target, key) {
console.log('hit');
return am4core.percent(10);
});
Related
I have 10 visuals in my embedded report. I want to remove the some specific visuals and want to set the height and width of the remaining visuals to make the fit to the report. Is it possible to set the height and width of visuals after removing or hiding visuals?
You can do this by applying custom layout to your report. You can hide all the visuals and then show only the required visuals with updated height and width. To hide the visuals you can set the mode as Hidden in page Layout.
Please find the below code snippet:
Hide all the visuals and set height and width of report page:
const defaultLayout = {
width: "Required_Width",
height: "Required_Height",
displayState: {
mode: models.VisualContainerDisplayMode.Hidden
}
};
Update height and width of your required visual:
const pageLayout = {
defaultLayout: defaultLayout,
visualsLayout: {
"Required_Visual_Name": {
x: "Required_Width",
y: "Required_Height",
displayState: {
mode: models.VisualContainerDisplayMode.Visible
}
},
}
};
Update the settings:
const settings = {
layoutType: models.LayoutType.Custom,
customLayout: {
displayOption: models.DisplayOption.FitToPage,
pagesLayout: {
"Your_Report_Id": pageLayout
}
},
}
Apply the settings:
await report.updateSettings(settings);
You can refer the Personalize top insights showcase in Power BI Playground:https://playground.powerbi.com/showcases-gallery/personalize-top-insights
You get the code reference for this showcase here:
https://github.com/microsoft/PowerBI-Embedded-Showcases/tree/main/Personalize%20top%20insights
Please find the reference here:
https://learn.microsoft.com/javascript/api/overview/powerbi/custom-layout
Not able to get straight and curved lines in the same graph,made both the datasets bezierCurve:false and ,bezierCurve :true for them but not getting it, here is the file:http://fiddle.jshell.net/2omjx9dn/44/
need these two graph lines of the two different graphs in a single graph:
http://fiddle.jshell.net/2omjx9dn/42/
any help would be great !!!!
bezierCurve is a chart level (not a dataset level) option. So you need to override the chart to do this. The easiest way would be to plug in to the hasValue function (it gets called right before the dataset line is drawn)
Chart.types.Line.extend({
name: "LineAlt",
initialize: function (data) {
Chart.types.Line.prototype.initialize.apply(this, arguments);
var options = this.options;
this.datasets.forEach(function (dataset, index) {
var originalHasValue = dataset.points[0].hasValue;
dataset.points[0].hasValue = function () {
// change option by dataset index here
options.bezierCurve = (index === 0) ? true : false;
return originalHasValue.apply(this, arguments)
}
})
}
});
and then
...
var myLineChart = new Chart(ctx).LineAlt(data);
i had already done adding a click handler to each Segment of my doughnut chart with adding the following Code :
$("#myChart").click(
function(evt){
var activePoints = myNewChart.getSegmentsAtEvent(evt);
var chartelementid = activePoints[0].label;
alert(chartelementid);
//$('.details div').css("display", "none");
//$('#' + chartelementid).show();
}
);
This works fine, when finished it should display an additional Div with Details for this segment.
Unfortunality my labels are more then just Single Words, so i'm struggeling to create div ID's with the same name...
My Idea is to add to every Segment an additional Data like value,label, etc. so it could be an ID. but if i just add the ID information to the Segment it will not exist as variable.
Add DataType:
var dataImprove = [
{
value: 30,
color:"#001155",
highlight: "#1c2f7c",
label: "KnowHow Erhalt / Transfer & Aufbau",
id:"test"
}
]
where can i add in chart.js an additional dataType like shown above my ID to be accessible in the DOM?
kind regards Marco
As an alternative pass a JSON string as your label, then intercept to render. For example:
var canvas = document.getElementById(id);
var d = canvas.getContext("2d");
var chart = new Chart(d).Pie(json, {
segmentStrokeWidth: 1,
tooltipTemplate: "<%=label%>", //default the label
customTooltips: function (tooltip) {
// Hide if no tooltip
if (!tooltip) {
return;
}
var tooltipObj = JSON.parse(tooltip.text);
// etc
already found : between line 999 and 1023 in chart.js before drawing - i've added the line
id: ChartElements[0].id,
so the Data with the name ID is in the DOM avaiable.
I'm trying to do a chart using google api, but i have a problem on the bottom of the chart, because i want to show all bars with they respective numbers, there is my code.
I need to describe all the bars with they respective "legends".
var data = new google.visualization.DataTable();
data.addColumn("number", "x");
data.addColumn("number", "y");
for (var i = 0; i < response.x.length; i++) {
data.addRows([[response.x[i], response.y[i]]]);
}
var options = {
colors: ["#30c0cd", "#ee5f3e"],
title: "title"
};
var chart = new google.visualization.ColumnChart($("#dholder")[0]);
chart.draw(data, options);
If your x and y axis are continuous (and not discrete) the google chart api will try to find the best values and will not show every label. Try:
data.addColumn("string", "x");
I have an APEX tabular form, all columns of which are standard report columns.
Is it possible to display a tooltip on mouse over of a particular cell of the report?
In the report column attributes look for the region named Column Formatting. Inside this section is a text box for an "HTML Expression". Here you can add html to the report column contents e.g., <span title="My tooltip text">#COLUMN_NAME#</span>
The tooltip text could be from another column, you would just replace the contents of the title attribute with the column name surrounded by hashes.
SOLUTION 1:
If your record needs to be editable then this solution works:
Under column attributes go to LINK
For Target: Type - URL and URL is just a hashtag
URL: #
Link Text: &COLUMN_NAME.
Link Attributes: title="&COLUMN_NAME." class="column_name_class"
Then in your inline CSS add the following
.column_name_class{
text-decoration: none !important;
}
Solution one I definitely prefer. But here is solution 2 anyways.
SOLUTION 2:
See here for the solution on JSDoc: Widget Grid
You can also initialize the grid with the tooltip option specified.
function( options ) {
options.defaultGridViewOptions = {
tooltip: {
content: function( callback, model, recordMeta, colMeta, columnDef ) {
var text;
// calculate the tooltip text
return text;
}
}
};
return options;
}
} );
Calculating the tooltip :
config.defaultGridViewOptions = {
tooltip: {
content: function( callback, model, recordMeta, colMeta, columnDef ) {
return model.getValue( recordMeta.record, "COLUMN_NAME");
}
}
}