I'm using Kendo UI and trying to display multiple charts on a single web page. Everything works until I try to add a second bar chart. One of the charts does not display and just shows a generic chart image (it looks like it is not finding the data but if I reorder they reverse what is happening). I can display multiple line charts. Any ideas about what might be happening?
Below is my html for the two charts without the SVG info:
<div kendo-chart="" k-options="vm.barChartOptions" ng-show="this.dataItem.visible" class="move k-block ng-scope k-chart" id="costPerPound" style="float: left; margin: 5px 0px; position: relative;" data-uid="b543ff9a-ee57-4ce7-a39d-8f69a0505a2b" role="option" aria-selected="false" data-role="chart"></div>
<div kendo-chart="" k-options="vm.barChartOptions" ng-show="this.dataItem.visible" class="move k-block ng-scope k-chart" id="numShipments" style="float: left; margin: 5px 0px; position: relative;" data-uid="97094bf1-4366-4974-b92f-edf36d1980f4" role="option" aria-selected="false" data-role="chart"></div>
Here are is the k-options info. As you can see I am setting most of my information at render.
vm.barChartOptions = {
dataSource: vm.chartData_datasource,
series: [
{
}
],
valueAxis: {
line: {
visible: false
},
labels: {
rotation: "auto"
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
},
render: function (e) {
var chart = e.sender;
var chartData = vm.findChartData(e);
if (chartData != null) {
chartData.categoryAxisField = vm.firstToLower(chartData.categoryAxisField);
chart.options.title.text = chartData.title;
chart.options.name = chartData.htmlID;
chart.options.categoryAxis.field = chartData.categoryAxisField;
chart.options.categoryAxis.labels.format = chartData.categoryAxisLabel;
chart.options.legend.position = chartData.legendPosition;
chart.options.seriesDefaults.type = chartData.chartType;
for (var i = 0; i < chart.options.series.length; i++) {
chart.options.series[i].type = chartData.chartType;
chart.options.series[i].field = vm.firstToLower(chartData.dataField);
}
}
}
}
I had same issue. It can be resolved by just providing different name
to each chart.
Related
I've added the placeholder widget to my CKEditor 5 build. However I don't like that I can't change the text after it is inserted. I tried removing isObject from the schema but that didn't do anything. I'd appreciate it if someone could show me how this can be achieved.
In version 4 the edit of the text is done via popup called by double clicking on the placeholder: https://ckeditor.com/cke4/addon/placeholder
In version 5 the placeholder was not fully implemented intentionally
"We didn't decide, though to implement a ready-to-use placeholder feature as it's usually needed to work differently in various systems"
https://github.com/ckeditor/ckeditor5/issues/871
So the only thing you can do is to implement the function you are missing yourself. I suggest looking at how version 4 does and understanding if it is applicable to version 5.
I have implemented it just with additional HTML block and control it with state (in my case I'm using React).
const CKInlineEditorField = ({
defaultValue = '',
onChange,
placeholder = '',
}) => {
const [showPlaceholder, setShowPlaceholder] = useState(false);
const { t } = useTranslation();
useEffect(() => {
if (!defaultValue) {
setShowPlaceholder(true);
}
}, [defaultValue]);
return (
<div>
<Paper variant="outlined" className="InlineEditor">
<div className="InlineEditor__placeholder">
{showPlaceholder && `${t(placeholder)}...`}
</div>
<div className="InlineEditor__editor">
<CKEditor
editor={InlineEditor}
data={defaultValue}
onChange={(event, editor) => {
const data = editor.getData();
setShowPlaceholder(!data);
}}
onBlur={(event, editor) => {
const data = editor.getData();
onChange(data);
}}
/>
</div>
</Paper>
</div>
);
};
And SCSS file:
.InlineEditor {
background-color: #eee;
position: relative;
&__placeholder {
position: absolute;
top: 15px;
left: 10px;
z-index: 0;
}
&__editor {
position: relative;
z-index: 2;
}
}
I have an XYChart with data object like
chart.data = [{
"Area": "Korangi",
"AreaNumber": 120,
"SubArea": [{
"SubAreaName": "Korangi-1",
"SubAreaNumber": 60
}, {
"SubAreaName": "Korangi-2",
"SubAreaNumber": 60
}
]
}];
and a series tooltipHTML adapter as
series.tooltipHTML = `<center><strong> {Area}:</strong>
<strong> {AreaNumber}%</strong></center>
<hr />`;
series.adapter.add("tooltipHTML",
function (html, target) {
if (
target.tooltipDataItem.dataContext &&
target.tooltipDataItem.dataContext.SubArea &&
target.tooltipDataItem.dataContext.SubArea.length
) {
var nameTalClientsNumberCells = "";
Cells = "";
target.tooltipDataItem.dataContext.SubArea.forEach(part => {
if (part.SubAreaName != null) {
nameTalClientsNumberCells +=
`<tr><td><strong>${part.SubAreaName}</strong>:  ${part
.SubAreaNumber}%</td></tr>`;
}
//TalClientsNumberCells += `<td>${part.SubAreaNumber}</td>`;
});
html += `<table>
${nameTalClientsNumberCells}
</table>`;
}
return html;
});
For I have tried bootstrap classes but non of them works in tooltipHTML.
what I want is like this
but I tried so far is like this
Please help or refer if there is another way of adding really rich HTML in tooltip
A link to the codepen
What you're doing is fine. I just didn't see you used any bootstrap4 css class. You can achieve what you want with either bootstrap4 built-in classes, or your own custom styles.
//I don't need to set tooltipHTML since I have the adapter hook up to return
// custom HTML anyway
/*
series.tooltipHTML = `<center><strong> {Area}:</strong>
<strong> {AreaNumber}%</strong></center>
<hr />`;
*/
series.adapter.add("tooltipHTML", function (html, target) {
let data = target.tooltipDataItem.dataContext;
if (data) {
let html = `
<div class="custom-tooltip-container">
<div class="col-left">
<h5>${data.Area}</h5>
<ul class="list-unstyled">
${data.SubArea.map(part =>
`
<li class="part">
<span class="name">${part.SubAreaName}</span>
<span class="area">${part.SubAreaNumber}%</span>
</li>
`
).join('')}
</ul>
</div>
<div class='col-right'>
<span class="badge badge-pill badge-success">${data.AreaNumber}%</span>
</div>
</div>
`;
return html;
}
return '';
});
And here is the custom styles:
#chart {
height: 31rem;
}
.custom-tooltip-container {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
min-width: 13rem;
}
.custom-tooltip-container .col-left {
width: 70%;
}
.custom-tooltip-container .col-right {
width: 30%;
text-align: center;
}
.custom-tooltip-container .col-right .badge {
font-size: 1.1rem;
}
.custom-tooltip-container .part {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
Again, you can do whatever you want. Here as demo I just quickly put things together.
demo: https://jsfiddle.net/davidliang2008/6g4u2qw8/61/
I'm new here, I'm working with Angular UI-Grid, and I have a small problem. The grid that I handle has a tree structure, that works perfect. But to make it easier to follow that structure for the user, I want to implement different colors per level.
I have created this Plunker with two examples, the first is how you should see the different colors per level, and the second is how it behaves today. Has anyone done something like this or do you have any idea how to fix it?
app.js:
var app = angular.module('app', ['ui.grid','ui.grid.treeView']);
app.controller('MainCtrl', ['$scope', '$http','uiGridTreeViewConstants', function ($scope, $http, uiGridTreeViewConstants) {
$scope.myData = [
{"ubi_id":321,"ubi_nom":"America","ubi_pad_id":null,"ubi_tip_id":1,"$$treeLevel":0},
{"ubi_id":322,"ubi_nom":"Sudamerica","ubi_pad_id":321,"ubi_tip_id":2,"$$treeLevel":1},
...
];
var rowtpl = '';
rowtpl += '<div ng-class="{\'nivelGrilla-{{row.entity.$$treeLevel}}\': row.entity.$$treeLevel != \'undefined\' }">';
rowtpl += '<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name"';
rowtpl += 'class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell>';
rowtpl += '</div></div>';
$scope.gridOptions = {
data:'myData',
rowTemplate:rowtpl,
};
}]);
css:
.nivelGrilla-0{
background-color: #254158;
color: white;
}
.nivelGrilla-1{
background-color: #3F6F96;
color: white;
}
html:
<div id="grid1" ui-grid="gridOptions" ui-grid-tree-view class="grid"></div>
I found a solution, the div that contains the entire row, makes a call to a function that returns the name of the class according to the row level.
Here's a plnkr with my solution
js:
var rowtpl = '';
rowtpl += '<div class=\"{{grid.appScope.rowLevel(row)}}\">';
rowtpl += '<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name"';
rowtpl += 'class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell>';
rowtpl += '</div>';
rowtpl += '</div>';
$scope.gridOptions2 = {
data:'myData',
rowTemplate:rowtpl,
};
css:
.ui-grid-row .ui-grid-cell {
background-color: inherit !important;
color: inherit !important;
}
.ui-grid-row .ui-grid-cell.ui-grid-cell {
background-color: #f0f0ee;
border-bottom: solid 1px #d4d4d4;
}
.rowLevel-0{
background-color: #254158;
color: white;
}
.rowLevel-1{
background-color: #3F6F96;
color: white;
}
.rowLevel-2{
background-color: #5289B6;
}
You can specify a 'cellClass' within your grid's 'columnDefs' and switch the rows according to the tree level. For example:
$scope.gridOptions = {
data:'myData',
columnDefs: [
{ field: 'Id', name: 'Ubi Id'},
{ field: 'Country', name: 'Ubi Nom'},
cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
switch(row.treeLevel)
{
case 0:
return 'red';
case 1:
return 'blue';
case 2:
return 'green';
default:
break;
}
}
]
};
I'm using Kendo UI Grid with an action link into a client-template column. This action link call an data edit view. See example:
c.Bound(p => p.sID).ClientTemplate(#Html.ImageActionLink(Url.Content("~/Content/images/edit3.png"), "Edit", "Edit", new { id = "#= sID #" }, new { title = "Edit", id = "Edit", border = 0, hspace = 2 }).ToString()
).Title("").Width(70).Filterable(false).Groupable(false).Sortable(false);
My question is how can I configure the grid in order to show an ajax loader when the action link is clicked, until the edit view is rendered?
you can create relative div and insert there your grid and loader wrapper:
<div class="grid-wrapper">
<div class="loading-wrapper">
<div class='k-loading-image loading'></div>
<!-- k-loading-image is standart kendo class that show loading image -->
</div>
#(Html.Kendo().Grid()....)
</div>
css:
.grid-wrapper {
position: relative;
}
.loading-wrapper {
display: none;
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
}
.loading {
position: absolute;
height: 4em;
top: 50%;
}
add to imageActionLink in htmlAttributes object class named "edit" (for example), and write click event handler:
$(document).on('click', '.edit', function (e) {
$('.loading-wrapper').show();
$.ajax({
// ajax opts
success: function(response) {
// insert your edit view received by ajax in right place
$('.loading-wrapper').hide();
}
})
});
you can do this like :
c.Bound(p => p.sID).Template(#Edit).Title("Edit").Encoded(false);
//encoded false = Html.Raw
Just started using SlickGrid, Not sure if I am missing something, but this simple code doesn't seem to work. It is displaying headers, but not the rows.
Grid Code:
var grid;
var data = [
{ ID: 1, VALUE: "Value1"},
{ ID: 2, VALUE: "Value2"},
{ ID: 3, VALUE: "Value3"},
{ ID: 4, VALUE: "Value4"},
{ ID: 5, VALUE: "Value5"}
];
var columns = [
{name:'ID NUM', field:'ID', id:'ID'},
{name:'VALUE', field:'VALUE', id:'VALUE'}
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
grid = new Slick.Grid("#container-div", data, columns, options);
grid.render();
For some reason, only first row's first cell is rendered in html and is not been displayed.
HTML:
<div class="slick-viewport" style="width: 100%; overflow: auto; outline: 0px none; position: relative; height: 0px;">
<div class="grid-canvas" style="height: 150px; width: 880px;">
<div class="ui-widget-content slick-row even" style="top:0px">
<div class="slick-cell l0 r0">1</div>
</div>
</div>
</div>
You are missing the container div to display the data, in your javascript code you are referencing #container-div but it does not exist inside your html code. Typically you don't have to write any html code like you seem to be doing (or is it the result you displayed?), except for the grid container itself. Try simply adding or replacing with this code in your html body: <div id="container-div" style="width:600px;height:500px;"></div> You can see a simple example from SlickGrid here: https://github.com/mleibman/SlickGrid/blob/master/examples/example1-simple.html