When we work with KendoUI, we need to specify the backcolor of the chart. like this:
{
category: "Latin America",
value: 16.3,
color: "#068c35"
}
See the full code below or example here. I want to know, instead of specifying the backcolor for each component, is it possible to set the base color and then kendoui will use variation of the base color and set the backcolor for remaining component.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/donut-charts/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
position: "bottom",
text: "Share of Internet Population Growth"
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "donut",
startAngle: 150
},
series: [{
name: "2011",
data: [{
category: "Asia",
value: 30.8,
color: "#9de219"
},{
category: "Europe",
value: 21.1,
color: "#90cc38"
},{
category: "Latin America",
value: 16.3,
color: "#068c35"
},{
category: "Africa",
value: 17.6,
color: "#006634"
},{
category: "Middle East",
value: 9.2,
color: "#004d38"
},{
category: "North America",
value: 4.6,
color: "#033939"
}]
}, {
name: "2012",
data: [{
category: "Asia",
value: 53.8,
color: "#9de219"
},{
category: "Europe",
value: 16.1,
color: "#90cc38"
},{
category: "Latin America",
value: 11.3,
color: "#068c35"
},{
category: "Africa",
value: 9.6,
color: "#006634"
},{
category: "Middle East",
value: 5.2,
color: "#004d38"
},{
category: "North America",
value: 3.6,
color: "#033939"
}],
labels: {
visible: true,
background: "transparent",
position: "outsideEnd",
template: "#= category #: \n #= value#%"
}
}],
tooltip: {
visible: true,
template: "#= category # (#= series.name #): #= value #%"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
You can use js function and logic do there.
{
category: "Africa",
value: 17.6,
color: GetColor
}
example here
Is that what you are looking for?
Based on #ademar's answer, I have updated the solution
this is how the GetColor function looks
var color = "#2b577011";
var percent = -20;
function GetColor(val)
{
var R = parseInt(color.substring(1,3),16);
var G = parseInt(color.substring(3,5),16);
var B = parseInt(color.substring(5,7),16);
R = parseInt(R * (100 + percent) / 100);
G = parseInt(G * (100 + percent) / 100);
B = parseInt(B * (100 + percent) / 100);
R = (R<255)?R:255;
G = (G<255)?G:255;
B = (B<255)?B:255;
var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));
color = "#"+RR+GG+BB;
return color;
}
Here is full code:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/donut-charts/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
position: "bottom",
text: "Share of Internet Population Growth"
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "donut",
startAngle: 150
},
series: [{
name: "2012",
data: [{
category: "Asia",
value: 53.8,
color: GetColor
},{
category: "Europe",
value: 16.1,
color: GetColor
},{
category: "Latin America",
value: 11.3,
color: GetColor
},{
category: "Africa",
value: 9.6,
color: GetColor
},{
category: "Middle East",
value: 5.2,
color:GetColor
},{
category: "North America",
value: 3.6,
color: GetColor
}],
labels: {
visible: true,
background: "transparent",
position: "outsideEnd",
template: "#= category #: \n #= value#%"
}
}],
tooltip: {
visible: true,
template: "#= category # (#= series.name #): #= value #%"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
var color = "#63C6FF";
var percent = -20;
function GetColor(val)
{
var R = parseInt(color.substring(1,3),16);
var G = parseInt(color.substring(3,5),16);
var B = parseInt(color.substring(5,7),16);
R = parseInt(R * (100 + percent) / 100);
G = parseInt(G * (100 + percent) / 100);
B = parseInt(B * (100 + percent) / 100);
R = (R<255)?R:255;
G = (G<255)?G:255;
B = (B<255)?B:255;
var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));
color = "#"+RR+GG+BB;
return color;
}
</script>
</div>
</body>
</html>
Related
In the jQuery-jqGrid code below, pagination is not working. I would appreciate any assistance in resolving this issue.
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
<meta charset="utf-8" />
<title>jq-grid-1000000</title>
</head>
<body>
<style type="text/css">
/* set the size of the datepicker search control for Order Date*/
#ui-datepicker-div { font-size:11px; }
.ui-datepicker { z-index: 2000 }
/* set the size of the autocomplete search control*/
.ui-menu-item {
font-size: 11px;
}
.ui-autocomplete {
z-index: 2000;
font-size: 11px;
}
</style>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid").jqGrid({
url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
mtype: "GET",
datatype: "jsonp",
page: 1,
colModel: [
{ label : "Order ID",
name: 'OrderID',
key: true,
width: 75
},
{
label: "Customer ID",
name: 'CustomerID',
width: 150
},
{
label: "Order Date",
name: 'OrderDate',
width: 150,
sorttype:'date'
},
{
label : "Ship Name",
name: 'ShipName',
width: 150
},
{
label: "Freight",
sorttype: 'number',
name: 'Freight',
width: 150
}
],
loadonce: true,
viewrecords: true,
width: 780,
height: "auto",
page: 1,
rowNum: 3,
pager: "#jqGridPager",
gridview: true,
autoencode: true
});
// activate the build in search with multiple option
$('#jqGrid').jqGrid('navGrid',"#jqGridPager", {
search: true, // show search button on the toolbar
add: false,
edit: false,
del: false,
refresh: true
},
{}, // edit options
{}, // add options
{}, // delete options
{
multipleSearch: true,
multipleGroup : true,
}
);
});
</script>
</body>
</html>
`
The paging will not work, because you use the option loadonce: true. With this option after the first request the datatype is going local with 3 records and you do not have more rows to page.
Disable this option and your paging will work.
When I changed the size of line chart title, it's overlapped, and the x and y property can't work. But according to this pull request, it should work.
I found it was because it's in the SVG of the chart. And the size of SVG was controlled by the config but change the size of chart can't solve it.
// Code goes here
(function(){
var chart = c3.generate({
title: {
text: 'My Line Chart',
y: 100
},
data: {
columns: [
['data', 30, 200, 100, 400, 150, 250]
]
},
legend: {
position: 'inset'
},
grid: {
y: {
show: true
}
},
axis: {
y: {
label: {
text: 'Y Axis Label',
position: 'outer-top'
}
}
}
});
d3.select('#chart .c3-title')
.style('font-size', '4em')
})();
/* Styles go here */
#chart {
margin: 40px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/c3#0.4.14/c3.css">
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/d3#3.5.6/d3.js"></script>
<script src="https://unpkg.com/c3#0.4.14/c3.js"></script>
</head>
<body>
<div id="chart"></div>
<script src="script.js"></script>
</body>
</html>
Any suggestion would be appreciated.
Just add a padding at the top...
padding: {
top: 20
}
... and set the dominant-baseline of the text to central:
.style("dominant-baseline", "central")
Alternatively, just translate it down.
Here is the code with that change:
// Code goes here
(function(){
var chart = c3.generate({
padding: {
top: 20
},
title: {
text: 'My Line Chart',
y: 100
},
data: {
columns: [
['data', 30, 200, 100, 400, 150, 250]
]
},
legend: {
position: 'inset'
},
grid: {
y: {
show: true
}
},
axis: {
y: {
label: {
text: 'Y Axis Label',
position: 'outer-top'
}
}
}
});
d3.select('#chart .c3-title')
.style('font-size', '4em')
.style("dominant-baseline", "central")
})();
/* Styles go here */
#chart {
margin: 40px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/c3#0.4.14/c3.css">
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/d3#3.5.6/d3.js"></script>
<script src="https://unpkg.com/c3#0.4.14/c3.js"></script>
</head>
<body>
<div id="chart"></div>
<script src="script.js"></script>
</body>
</html>
Issue is pagination icons in jqgrid are not visible. I could see that the .png images are not found in my console.
GET http://localhost:8080/myapp/styles/images/ui-icons_6da8d5_256x240.png 404 (Not Found)
GET http://localhost:8080/myapp/styles/images/ui-icons_6da8d5_256x240.png 404 (Not Found)
Also even though width is 'auto' there is a horizontal scroll bar appearing.
The data gets loaded properly and my DB pagination is working fine. on first page only hand icon is visible and when clicked goes to page 2. but on page 2 no icon is visible.
I downloaded again jqgrid but no .png icons were there in the installation
My jsp code goes as below -
<html>
<head>
<style>
div.ui-jqgrid-titlebar {
height: 10px;
}
#sidebar {
float: left;
width: 150px;
padding: 10px 10px;
// background-color:yellow
}
#container {
margin: 0px 320px 0px 170px;
text-align: center;
// background-color:red
}
</style>
<link rel="stylesheet" href="../styles/ui.all.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="../styles/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="../styles/ui.jqgrid.css" />
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/grid.locale-en.js"></script>
<script type="text/javascript" src="../js/jquery.jqGrid.min.js"></script>
<link href="../images/favicon.ico" type="image/x-icon" rel="shortcut icon">
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript">
//index is used to override the column name passed to the server in the query param sidx
var myColModel = [
{ name: "promId", index: 'Promotionid', width: 60 },
{ name: "promoCode", index: 'promotioncode', width: 110 },
{ name: "name", index: 'name', width: 160 },
{ name: "description", index: 'description', width: 250 },
{ name: "distCode", index: 'distributor_code', width: 110 },
{ name: "status", index: 'status', width: 110 },
{ name: "startDate", index: 'start_date', width: 100, sorttype: "date", align: "right" },
{ name: "endDate", index: 'end_date', width: 100, sorttype: "date", align: "right" },
{ name: "discount", index: 'discount', width: 90 },
{ name: "extension", index: 'extension', width: 90 }
];
$(function () {
$("#list").jqGrid({
url: 'some/url',
datatype: "json",
mtype: "GET",
colNames: ["Promo ID", "Promo Code", "Name", "Description", "Distributor Code", "Status", "Start Date", "End Date", "Discount", "Extension"],
colModel: myColModel,
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "end_date",
sortorder: "asc",
viewrecords: true,
gridview: true,
rownumber: true,
autoencode: true,
width: 'auto',
height: 'auto',
caption: "Promotion Summary"
});
});
</script>
</head>
<br></br>
<body>
<br>
<br>
<center>
<hr />
<div class="clear">
<%# include file="header.jsp"%>
</div>
</center>
<div class="sidebar">
<%# include file="/admin/User.jsp"%>
</div>
<br>
<br>
<div id="container" border="2px solid green"
style="left: 5%; position: relative;">
<div id="tableContent" width="100%">
<div>Summary</div>
<div style = "margin: 0px auto 0px 150px;">
<table id="list"><tr><td></td></tr>
</table>
<div id="pager"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
What I found that the images were not downloaded from the version I installed from jqgrid website. Not sure why. so I manually downloaded images from internet and worked fine.
I am using Kendo UI Dataviz to develop my application, but I am getting a problem for render the chart. When the chart is renderer, it was not occupying all the div width, as shown below.
My JS code:
function creatChart() {
$("#chart").kendoChart({
dataSource : {
transport : {
read : {
url : "myUrl",
dataType : "json",
},
}
},
legend : {
position : "top"
},
series : [ {
type : "area",
field : "valor1",
color : "#73c100",
axis : "axes1"
}, {
type : "line",
field : "valor2",
color : "#007eff",
position : "right",
axis : "axes2"
} ],
valueAxes : [ {
name : "axes1",
color : "#73c100",
min : 0,
max : 150
}, {
name : "axes2",
color : "#007eff",
min : 0,
max : 150
} ],
categoryAxis : {
field : "data",
labels : {
template : "#=$(this).formatDate(value)#",
rotation: -35
}
},
tooltip : {
visible : true,
format : "{0}"
}
});
}
My HTML code:
<div id="tabs-1">
<div class="row-fluid" style="padding-top: 45px">
<div class="span2" style="padding-left: 15px; padding-top: 15px; padding-bottom: 15px">Selecione
o período:
</div>
<div class="span3">
<input type="text" class="dataInicio" readonly="readonly" style="margin-top: 15px;"/>
</div>
<div class="span1">
<label style="margin-top: 15px;">à</label>
</div>
<div class="span5">
<input type="text" class="dataFim" readonly="readonly" style="margin-top: 15px;"/>
<button class="btn submit" style="margin-top: 10px;">Buscar</button>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div id="chart"></div>
</div>
</div>
</div>
I need the chart occupy all the div width. Can anyone help me, please?
use the lines
chartArea: { margin: 0, padding: 0, height: (screen.height * 0.50), width: (screen.width * 0.35) },
plotArea: { margin: 0, padding: 0, height: (screen.height * 0.50), width: (screen.width * 0.35) },
find the code below
$("#chartNo1").kendoChart({
theme: $(document).data("kendoSkin") || "silver",
title: {
text: "Store Visits"
},
chartArea: { margin: 0, padding: 0, height: (screen.height * 0.50), width: (screen.width * 0.35) },
plotArea: { margin: 0, padding: 0, height: (screen.height * 0.50), width: (screen.width * 0.35) },
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "Total Visits",
data: [56000, 63000, 74000, 91000, 117000, 138000]
}, {
name: "Unique visitors",
data: [52000, 34000, 23000, 48000, 67000, 83000]
}],
valueAxis: {
max: 140000,
line: {
visible: false
},
minorGridLines: {
visible: true
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
};
other way could be
chartArea: { margin: 0, padding: 0, height: (window.innerHeight * 0.50), width: (window.innerWidth * 0.50) },
plotArea: { margin: 0, padding: 0, height: (window.innerHeight * 0.50), width: (window.innerWidth * 0.50) },
change the percent to specific size
I'm using jqPlot
Look at the right-bottom corner
Left side is correct, but the right side isn't.
There is a way to fix word-wrap on tick labels?
EDIT:
$(document).ready(function(){
var plot2 = $.jqplot ('chart-line', [[["2013-03-22",1],["2013-03-23",0],["2013-03-24",0],["2013-03-25",2],["2013-03-26",19],["2013-03-27",7],["2013-03-28",4]]]
, {
title: 'Total de alertas por dia',
seriesDefaults: {
fill:true,
color: 'steelblue',
rendererOptions: {
smooth: true
},
pointLabels:{ show:true }
},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions:{
formatString: '%F',//'%Q',
textColor: 'black',
fontSize: '11px',
labelPosition: 'auto'
}
},
yaxis: {
min:0,
tickRenderer: $.jqplot.CanvasAxisTickRenderer
}
}
});
EDIT:
Here is HTML
<style>
.ComBordaRedonda {
border:1px solid #dadada;
border-radius:3px;
padding:5px;
font-size: 10pt;
font-family: Calibri;
}
</style>
<div class="ComBordaRedonda" style = "float: right;background-color:#FFFFFF;width: 57%; height: 300px;">
<div id = "chart-line" style = "width: 90%; height: 95%;margin:auto">
</div>
</div>
I fixed it.
I forgot to include the css of jqPlot in the page.
thanks nick_w!