i have seen the documentation of DevExpress but i could't find out the way of change the symbol of legend.
can anybody help me out please ?
JS :
var dataSource = [{
country: "USA",
hydro: 59.8,
}, {
country: "China",
hydro: 74.2,
}, {
country: "Russia",
hydro: 40,
}, {
country: "Japan",
hydro: 22.6,
}, {
country: "India",
hydro: 19,
}, {
country: "Germany",
hydro: 6.1,
}];
var chart = $("#chart").dxChart({
dataSource: dataSource,
commonSeriesSettings: {
argumentField: "country",
type: 'line'
},
margin: {
bottom: 20
},
argumentAxis: {
valueMarginsEnabled: false,
discreteAxisDivisionMode: "crossLabels",
grid: {
visible: true
}
},
series: [
{ valueField: "hydro", name: "Hydro-electric" }
],
legend: {
verticalAlignment: "bottom",
horizontalAlignment: "center",
itemTextPosition: "bottom"
},
title: {
text: "Energy Consumption in 2004",
}
})
HTML :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="chart-demo">
<div id="chart"></div>
</div>
</div>
</body>
</html>
Output :
In above example the legend symbol is default "square".
I need to change from "square" to "cross".
Unfortunately there is no way to change the default legend item symbol in dxChart.
Related
I would like to have top of the box and bottom of the box in different colors, and also top of the whisker and bottoom of the whisker in different color for each box (region).
But all of the lines in the box are in the same color (red) and top and bottom of the whisker are in the same color (green)
Live demo with steps to reproduce
Highcharts.chart('container', {
chart: {
type: 'boxplot'
},
title: {
text: 'All Patients'
},
legend: {
enabled: true
},
xAxis: {
categories: ['Asia Pacific', 'Europe', 'Latin America', 'North America', 'SWAC'],
title: {
text: ' '
}
},
yAxis: {
title: {
text: 'Annual Center Volume 2016'
},
tickInterval: 5,
min: 0,
max: 75
//plotLines: [{
// value: 932,
// color: 'red',
// width: 1,
// label: {
// text: 'Theoretical mean: 932',
// align: 'center',
// style: {
// color: 'gray'
// }
// }
//}]
},
plotOptions: {
boxplot: {
fillColor: '#F0F0E0',
lineWidth: 2,
upperQuartileColor: 'green',
lowerQuartileColor: 'green',
medianColor: '#0C5DA5',
medianWidth: 3,
stemColor: '#A63400',
stemDashStyle: 'solid',
stemWidth: 1,
whiskerColor: '#3D9200',
whiskerLength: '20%',
whiskerWidth: 3
}
},
series: [{
name: 'Region Runs',
showInLegend: false,
color: 'red',
data: [
[2, 4, 18, 43, 53],
[5, 9, 16.5, 32, 52],
[1, 3, 6, 11.5, 21],
[3, 9, 20, 38, 73],
[1, 2, 8, 16, 20]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
},
{
name: '75th Percentile',
type: 'line',
color: 'red',
marker: {
symbol: 'square'
},
},
{
name: 'Median',
type: 'line',
color:'#0C5DA5',
marker: {
symbol: 'square'
},
},
{
name: '25th Percentile',
type: 'line',
color: 'red',
marker: {
symbol: 'square'
},
},
{
name: '90th percentile',
type: 'line',
color: '#3D9200',
marker: {
symbol: 'square'
},
},{
name: '10th percentile',
type: 'line',
color: '#3D9200',
marker: {
symbol: 'square'
},
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
Box Plot Charts -->
<div id="pdfContentHolder" style="margin:auto; width: 720px; height: 800px;">
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto" >
</div>
</div>
https://jsfiddle.net/hew8nq5u/
Thanks in advance guys!
Currently it's not possible in Highcharts to have box bottom and top in different colors. Same with top and bottom whiskers. Here is an explanation and enhancement proposition from github issue (https://github.com/highcharts/highcharts/issues/6796):
Currently each box is a single SVG shape and a border is applied by
stroke parameter which cannot be "separated" for smaller edges. As a
result, you can apply only single color.
Your goal requires a rebuild core of boxplot, so we cannot threat it
as a bug, but feature request.
I have a grid that consists of several columns. I defined columnDefs including width and min width. In addition I have disabled the horizontal scrollbar.
When resizing the columns to the right they "exit" the grid and I can see them by scrolling (although there is no scroll). How can I force the columns to stay in the grid boundaries?
This is the regular view:
After resizing to the right and scrolling to the right, you can see that the "name" column is off boundaries (on the left side)
Grid Config
columnDefs: this.queueConfig.columns,
rowHeight: 24,
rowTemplate: rowtpl,
enableHorizontalScrollbar: this.uiGridConstants.scrollbars.NEVER,
enableColumnMenus: false,
enableRowSelection: true,
enableRowHeaderSelection: false,
enableFiltering: true,
modifierKeysToMultiSelect: true,
multiSelect: true
Column Definitions
This is a function that returns the columnDefs for the grid.
The details are not important, only to notice the width definition for our issue.
private buildGridColumns(): any {
const colMinWidth = "100";
const columnsMap = {
name: {
name: this.$translate.instant('Name'),
field: "documentName",
minWidth: colMinWidth
},
step: {
name: this.$translate.instant('Col_Step'),
field: "status",
width: "150",
minWidth: colMinWidth,
cellFilter: "printStatus"
},
submitted: {
name: "Submitted",
field: "createdTime",
width: "150",
minWidth: colMinWidth,
cellFilter: "date: 'd/M/yy h:mm a'",
sort: {
direction: this.uiGridConstants.DESC
}
},
pagesNum: {
name: this.$translate.instant('NumPages'),
field: "numPages",
width: "80",
minWidth: colMinWidth,
cellFilter: "foreignDocument: this"
},
quantity: {
name: this.$translate.instant('Quantity'),
field: "numCopies",
width: "80",
minWidth: colMinWidth,
cellFilter: "foreignDocument: this"
},
progress: {
name: "Progress",
field: "PercentComplete",
minWidth: colMinWidth,
cellTemplate:
"<kd-progress-bar ng-if='!row.entity.isForeign' percentage='row.entity.percentComplete'></kd-progress-bar>" +
"<div ng-if='row.entity.isForeign' class='kd-progress-unavailable'>N/A</div>"
},
duration: {
name: this.$translate.instant('Duration'),
field: "estimatedTime",
minWidth: colMinWidth,
cellFilter: "foreignDocument: this"
},
status: {
name: this.$translate.instant('Status'),
field: "docState",
minWidth: colMinWidth,
cellFilter: "documentState"
},
press: {
name: this.$translate.instant('Press'),
field: "dfeName",
minWidth: colMinWidth
},
created: {
name: this.$translate.instant('Created'),
field: "createdDtm",
minWidth: colMinWidth,
cellFilter: "date: 'd/M/yy h:mm a'",
sort: {
direction: this.uiGridConstants.DESC
}
},
time: {
name: this.$translate.instant("Time"),
field: "createdTime",
minWidth: colMinWidth,
cellFilter: "date: 'd/M/yy h:mm a'",
width: "120",
sort: {
direction: this.uiGridConstants.DESC
}
},
failTime: {
name: this.$translate.instant('FailureTime'),
field: "lastUpdateTime",
minWidth: colMinWidth,
cellFilter: "date: 'd/M/yy h:mm a'",
width: "120",
sort: {
direction: this.uiGridConstants.DESC
}
},
completeTime: {
name: this.$translate.instant('CompletionTime'),
field: "lastUpdateTime",
minWidth: colMinWidth,
cellFilter: "date: 'short'",
width: "120",
sort: {
direction: this.uiGridConstants.DESC
}
}
};
return columnsMap;
}
I have kendo grid and my problem is when the text too long I cannot make that text break line , I tried to make css but it does not work well.
Here is my css:
#projectslistgrid .k-grid-content td{
word-wrap:break-word;
}
This is image:
Please help me, thanks.
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css" />
<script src="https://kendo.cdn.telerik.com/2016.1.412/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
<style>
.breakWord120 {
/*max-width: 120px !important;*/
word-break: break-all !important;
word-wrap: break-word !important;
/*vertical-align: top;
line-height: 15px;*/
}
</style>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
var products = [{
ProductID: 1,
ProductName: "Chai",
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: "10 boxes x 20 bags",
UnitPrice: 18.0000,
UnitsInStock: 39,
UnitsOnOrder: 0,
ReorderLevel: 10,
Discontinued: false,
Category: {
CategoryID: 1,
CategoryName: "Beverages",
Description: "Soft drinks, coffees, teas, beers, and ales"
}
}, {
ProductID: 2,
ProductName: "Chang",
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: "24 - 12 oz bottles",
UnitPrice: 19.0000,
UnitsInStock: 17,
UnitsOnOrder: 40,
ReorderLevel: 25,
Discontinued: false,
Category: {
CategoryID: 1,
CategoryName: "Beverages",
Description: "Soft drinks, coffees, teas, beers, and ales"
}
}, {
ProductID: 3,
ProductName: "AniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrup",
SupplierID: 1,
CategoryID: 2,
QuantityPerUnit: "12 - 550 ml bottles",
UnitPrice: 10.0000,
UnitsInStock: 13,
UnitsOnOrder: 70,
ReorderLevel: 25,
Discontinued: false,
Category: {
CategoryID: 2,
CategoryName: "Condiments",
Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}];
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
height: 550,
scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
{
field: "ProductName", title: "ProductName", attributes: {
"class": "breakWord120",
}
},
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}" },
{ field: "UnitsInStock", title: "Units In Stock" },
{ field: "Discontinued" }
]
});
});
</script>
</div>
</body>
</html>
Let me know if any concern.
I have a grid with very small columns with row filter, which cause them to have very small text-box. so I used
field: "OrderID",
width: 100,
filterable: {
cell: {
inputWidth: 65
}
}
but when I define inputWidth to enlarge the text field the filter operator does not move over and in fact cover up the partial space of the text-box. Therefore, I was wondering if there is a way to move the filter operator over or preferably over to the title header, like the columnMenu filter icon. Any help would be greatly appreciated, thanks.
I took the following example from: http://demos.telerik.com/kendo-ui/grid/filter-row
and modified width and inputwidth of orderID
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read:"http://demos.telerik.com/kendo- ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
},
height: 550,
filterable: {
mode: "row"
},
pageable: true,
columns:
[{
field: "OrderID",
width: 100,
filterable: {
cell: {
inputWidth: 65
}
}
},
{
field: "ShipName",
width: 500,
title: "Ship Name",
filterable: {
cell: {
operator: "contains"
}
}
},{
field: "Freight",
width: 255,
filterable: {
cell: {
operator: "gte"
}
}
},{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
}]
});
});
Is it possible to use dojo (grid in particular) with MVC-2? Any example/ideas on how we can use it?
I did not see difference between MVC2 and other types of applications...
You should read about dojo grid
First of all you need to load dojo script (it would be better if you do it on master page).
Also you can add some css styles that dojo grid using:
Site.Master:
<html>
<head>
...
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djconfig="parseOnLoad: true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<style type="text/css">
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css";
.dojoxGrid table
{
margin: 0;
}
</style>
...
</head>
....
</html>
After that you should add some code in view for initialize dojo grid, E.g.:
Index.aspx:
...
<script>
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
var layoutCountries = [
[{
field: "abbr",
name: "Abbeviation",
width: 10
},
{
field: "name",
name: "Name",
width: 10
},
{
field: "capital",
name: "Capital",
width: 'auto'
}]];
var storeData = {
identifier: 'abbr',
label: 'name',
items: [{
abbr: 'ec',
name: 'Ecuador',
capital: 'Quito'
},
{
abbr: 'eg',
name: 'Egypt',
capital: 'Cairo'
},
{
abbr: 'sv',
name: 'El Salvador',
capital: 'San Salvador'
},
{
abbr: 'gq',
name: 'Equatorial Guinea',
capital: 'Malabo'
},
{
abbr: 'er',
name: 'Eritrea',
capital: 'Asmara'
},
{
abbr: 'ee',
name: 'Estonia',
capital: 'Tallinn'
},
{
abbr: 'et',
name: 'Ethiopia',
capital: 'Addis Ababa'
}]
}
</script>
<div style="width: 400px; height: 300px;">
<div dojotype="dojo.data.ItemFileReadStore" jsid="countryStoreForGrid" data="storeData">
</div>
<div id="grid" dojotype="dojox.grid.DataGrid" store="countryStoreForGrid" structure="layoutCountries"
queryoptions="{deep:true}" query="{}" rowsperpage="40">
</div>
</div>
...
And the result of this code is: