Using IcCube V7, we were able to display the legend of an AmChart widget in an external DIV. Very useful for example to show only one common legend for multiple charts with same legend items.
We had to create a html widget to create the div :
<div style="height: 100%; position: absolute; width: 100%; overflow-y: auto!important; overflow-x: hidden;">
<div id="MyLegend"><br /></div>
</div>
Then refer to this DIV in the widget in :
Data render > Legend > General settings > Div Id
Is there a way to do this using new reporting V8?
It's not possible to show the chart's legend in an external div. However, you can add a checkbox widget and set its colors in chart > item > color & selection color. This way, it looks like a legend.
To make sure that the colors in the chart and in the checkbox widget are always the same, you can use a categorical color transformation on the rank of the member. For that, use the following MDX and select the rank column in the categorical color transformation:
-- For the checkbox widget
with
MEMBER [Measures].[rank] as rank([Geography].[Geography].currentMember,[Geography].[Geography].[Continent].allMembers)
SELECT
[Measures].[rank] on 0
[Geography].[Geography].[Continent].allMembers ON "MdxBuilderFilterItems"
FROM [Sales]
-- For the donut chart
// BUILDER GENERATED
WITH
MEMBER [Measures].[rank] as rank([Geography].[Geography].currentMember,[Geography].[Geography].[Continent].allMembers)
SELECT
{[Measures].[#Articles],[Measures].[rank]} ON "value"
[Geography].[Geography].[Continent].allMembers ON "category"
FROM [Sales]
FILTERBY #{continent!∅}
Related
how to get rounded corners in the popup of the dropdown list?
<div class="example-wrapper">
<p>T-shirt size:</p>
<kendo-dropdownlist [data]="listItems"
[popupSettings]="{
popupClass:'[border-round]'
}">
</kendo-dropdownlist>
</div>
where border round is defined in the css as
.border-round
{
border-radius:20px;
}
i tried this and it does not work
In Kendo UI for jQuery, you can override the Kendo CSS class like below:
.k-list-container.k-state-border-up {
border-radius: 15px;
}
If the Kendo UI for Angular uses the same CSS class name, then the above should work.
I've been trying to set a custom label in a line chart's tooltip , e.g., modified number of minutes in HH:mm format (74 min --> 1:14), for quite some time now, but unfortunately without any success. Displaying the value as 1.283(...3) is not an alternative.
Number to HH:mm as tooltip label
Does anybody know how to preserve the x and y axis values (a date and a number respectively), and modify the tooltip display value?
For example: https://swimlane.github.io/ngx-charts/#/ngx-charts/line-chart
Instead of having a tooltip that displays Color, Country name and Number,
--> Color, Country name and String (Number > 3000 ? 'high' : 'low';)
Current behavior
Works as intended.
Expected behavior
To display custom labels.
Reproduction of the problem
Link in the description above
What is the motivation / use case for changing the behavior?
Being able to customize tooltips' contents
Please tell us about your environment:
OS: Win 10 x64, IDE: Eclipse EE
ngx-charts version: 3.0.2
Angular version: 6.0.2
Browser: [all]
Language: [TypeScript 2.3.3]
You can define your own tooltip templates and render any HTML you like in them:
<ngx-charts-line-chart
[scheme]="colorScheme"
[results]="multi" ...>
<ng-template #tooltipTemplate let-model="model">
This is the single point tooltip template
<pre>{{model|json}}</pre>
</ng-template>
<ng-template #seriesTooltipTemplate let-model="model">
This is vertical line tooltip template
<pre>{{model|json}}</pre>
</ng-template>
</ngx-charts-line-chart>
Example: https://swimlane.github.io/ngx-charts/#/ngx-charts/tooltip-templates
Code is here: https://github.com/swimlane/ngx-charts/blob/8ebb3dbcbbea443fefdcafd1f5c9069df0e0c4ae/src/app/app.component.html#L992-L998
The above solution does not work for multi-dimensional charts ( > 3) like Stacked Horizontal/Vertical Bar.
Another simple way which works for all cases is to add the tooltipText as an attribute as part of the model like below:
export let multi = [
{
name: 'Germany',
series: [
{
name: '2010',
value: 7300000,
tooltipText: 't1'
},
{
name: '2011',
value: 8940000,
tooltipText: 't2'
}
]
}
];
Then use the following code in markup,
<ngx-charts-bar-horizontal-stacked
[view]="view"
[scheme]="colorScheme"
[results]="multi"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[legendPosition]="legendPosition"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
(select)="onSelect($event)">
<ng-template #tooltipTemplate let-model="model">
<div class="tooltip">
{{model.tooltipText}}
</div>
</ng-template>
</ngx-charts-bar-horizontal-stacked>
Thank you, once again. Didn't want to leave the issue unresolved.
The problem was the code snippet was inside a svg element.
Here's the final version:
<!-- This is single point tooltip template -->
<xhtml:ng-template #tooltipTemplate let-model="model">
<xhtml:div class="area-tooltip-container">
<xhtml:div *ngFor="let tooltipItem of model | json | durationHhmm" class="tooltip-item" style="text-align: center;">
<a style=" font-size: 1.2em;">{{tooltipItem.series}}</a><a *ngIf="tooltipShowTime==='DAY' || tooltipShowTime==='WEEK'" style=" font-size: 1.2em;"><br />{{tooltipItem.name | date: 'HH:mm'}} Uhr</a><a *ngIf="tooltipShowTime!=='DAY' && tooltipShowTime!=='WEEK'" style=" font-size: 1.3em; font-weight: 600;"><br />·</a><br /><a style=" font-size: 1.2em; font-weight: 600;">{{tooltipItem.name | date: 'dd.MM.yyyy'}} · </a><a style=" font-size: 1.3em; font-weight: 600;">{{tooltipItem.value}}</a>
</xhtml:div>
</xhtml:div>
</xhtml:ng-template>
<!-- Datapoints Y-Axis -->
<svg:g *ngFor="let series of data">
<svg:g ngx-charts-circle-series
[xScale]="xScale"
[yScale]="yScale"
[colors]="colors"
[data]="series"
[scaleType]="scaleType"
[visibleValue]="hoveredVertical"
[activeEntries]="activeEntries"
[tooltipDisabled]="tooltipDisabled"
[tooltipTemplate]="tooltipTemplate"
(select)="onClick($event, series)"
(activate)="onActivate($event)"
(deactivate)="onDeactivate($event)"
/>
</svg:g>
I use Light Gallery (http://sachinchoolur.github.io/lightGallery) for my website and want to make some customization on it.
I want to blur the background image of each and every image items that open in the gallery by using those images in their background-image (in CSS).
Well, Light gallery use much more Java Script references from html tag attributes to view values in the gallery which it’s a little complicated for one like who doesn’t predominate on JS.
The structure of gallery items looks like this:
<ul id="lightgallery">
<li>
<a href="">
<img src="">
</a>
</li>
</ul>
If I blur background-image of (li) tag in CSS, it effects the thumbnails (not gallery thumbnail).
I found the main gallery container class (.lg-backdrop) which can blur the background of my light gallery, but it’s a “class” and the effects applies to all items which is defined by this class.
and its my CSS:
.lg-backdrop:before {
content: "";
position: fixed;
left: 0;
right: 0;
z-index: -1;
display: block;
background-image: url(contents/images/canada/canada_exh_1.jpg);
width:100%;
height:100%;
-webkit-filter: blur(50px);
-moz-filter: blur(50px);
-o-filter: blur(50px);
-ms-filter: blur(50px);
filter: blur(50px);
}
Here is I am asking if there is a way to blur the background of each image item by their own image?
The CSS filter property provides access to effects like blur or color shifting on an element’s rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border.
The Syntax is :
.filter-me {
filter: <filter-function> [<filter-function>]* | none
}
I would like to use a kendo drop-down list, which has a fixed size since is constrained by other fields in the page, but when it shows the drop-down items of the list, the drop-down area should resize to the maximum length of the items. Sort of fixed width for the item displayed, but auto width for the drop down list.
Something like
|my choice | <-- fixed width displayed on the page
|next choice |
|previous choice | <-- dropdown area to select another item
|dummy |
Is this possible through CSS or drop-down list properties set through jQuery?
You can set the width of a DropDown List both using a CSS or using a method.
If the id of you DropDownList is my-dropdown then you should write:
Using CSS
#my-dropdown-list {
width: auto !important;
}
NOTE: We have appended -list to the original id. The "!important" is important since you want to overwrite original width definition.
Using a method
$("#my-dropdown").data("kendoDropDownList").list.width("auto");
In addition to use "auto" for getting the width automatically adjusted to the text, you can use a fixed width:
#my-dropdown-list {
width: 300px !important;
}
or:
$("#my-dropdown").data("kendoDropDownList").list.width(300);
The above answer didn't work for me. I have a the advantage of knowing that my dropdown is inside of a div.
<div class="myDivClass">
<select id="myDropDown"><option>First</option><option>Second></option></select>
<!--... other stuff in the div-->
<div>
I found that the span has the class k-dropdown so I added the CSS
.myDivClass span.k-dropdown {
width: 300px
}
What worked for me is to render an extra class on the base element:
<input .. class="ExtraLarge ..
Which produced:
<span style="" class="k-widget k-dropdown k-header ExtraLarge" ..
With this ExtraLarge class in place, this worked great in FireFox and Chrome:
span.k-dropdown.ExtraLarge
{
width:400px;
}
Using the following code to be the template of the kendo dropdownlist:
<div class="myDivClass">
<select id="myDropDown"><option>First</option><option>Second></option></select>
<!--... other stuff in the div-->
<div>
you will initiate the kendoDropDownList using jQuery as follows:
$("#myDropDown").kendoDropDownList().data("kendoDropDownList");
Now, to set this controller to take up the full width, what you have to do, is to set the width of the select element to 100%, or whatever is your desire.
e.g.:
<select id="myDropDown" style="width: 100%"><option>First</option><option>Second></option></select>
OR, is a css file:
#myDropDown { width: 100% }
If the id of you DropDownList is my-dropdown then you should write:
#my-dropdown-list {
width: auto !important;
-moz-min-width: 120px;
-ms-min-width: 120px;
-o-min-width: 120px;
-webkit-min-width: 120px;
min-width: 120px;
/*max-width: 210px;*/
}
Read the explanation below.
http://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/how-to/auto-adjust-the-width
I've tried to center vertically and horizontally my image while using image map with ImageMapster, but it didn't work.
http://eternidad.home.pl/index_proba.html
I've added :
#mapster_wrap_0 img{margin: 0 auto; align: center; vertical-valign: middle;}
But still image is on the bottom.
I also need to make onMousveOver effect, definied in the imageMapster's script,but I simply don't know how to do it - I have 4 areas, so I need sth like this, but it doesn't work.
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var ImgAry= ['str_glowna5.png','str_glowna5pl.png','str_glowna5en.png','str_glowna5es.png','str_glowna5ru.png']
var MapAry=[];
for (var zxc0=0;zxc0<ImgAry.length;zxc0++){
MapAry[zxc0]=new Image();
MapAry[zxc0].src=ImgAry[zxc0];
}
function Swap(id,nu){
document.getElementById(id).src=MapAry[nu].src;
}
/*]]>*/
</script>
//
<AREA SHAPE="RECT" coords="24,509,85,566" HREF="opis_ru.htm" TITLE="Russian" onmouseover="Swap('img',4);" onmouseout="Swap('img',0);" >
Please, help
Generally speaking to use CSS on an image that is bound with imagemapster you should apply styles to a wrapper, and not the image itself e.g.
-- CSS
.mapster-wrapper {
style="margin: 0 auto; align: center; vertical-valign: middle;"
}
-- HTML
<div class="mapster-wrapper">
<img usemap="..." src="...">
<div>
ImageMapster has to tightly control the CSS on the image itself in order for its layered effects to work. Just apply all your styling to your own wrapper around of the image.
It's possible to add a custom class to the wrapper that imagemapster creates:
$('#my_img').mapster({
(...)
wrapClass: 'imageMapster_wrapper'
});
then you just do
.imageMapster_wrapper {
margin:0px auto;
}
in your CSS, as Jamie Treworgy already suggested.