I have a linechart using jqplot with two lines. One line represents max values and other one represents min values. With my code legend does not display correctly and y axis label overlaps with y axis ticks What am I doing wrong? Thanks for your help!
[EDIT] Jqplot version is jquery.jqplot.1.0.0b2_r1012
My code displays this chart:
I want a legend like the one in this
image
Here's my code:
<link rel="stylesheet" type="text/css" hrf="../plugins/jqplot/jquery.jqplot.min.css" />
<script type="text/javascript" src="../plugins/jqplot/jquery.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot/plugins/jqplot.canvasOverlay.min.js"></script>
<script>
$(document).ready(function(){
var maxPoints86 = [3.000000,4.000000,4.500000,5.000000,7.000000,7.000000,5.500000,8.500000,6.700000,5.200000,4.000000,5.500000,0.200000,7.500000,5.000000,5.200000,5.000000];
var minPoints86 = [2.000000,1.000000,3.000000,4.000000,5.000000,4.800000,5.000000,6.000000,4.000000,2.500000,2.500000,5.000000,0.100000,6.000000,3.500000,5.000000,5.000000];
var plot86 = $.jqplot('chart', [maxPoints86, minPoints86],
{
title:'Errores en facturación',
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
axes: {
xaxis: {
label: "Monthly",
},
yaxis: {
label: "Percentage"
}
},
legend: {
show: true,
location: 'se',
labels:['Max','Min'],
showSwatch: true,
predraw: false,
placement:"insideGrid",
},
series:[
{
lineWidth:5,
markerOptions: { style:"circle", size:10 }
},
{
lineWidth:5,
markerOptions: { style:"filledSquare", size:10 }
}
]
}
);
});
</script>
<div id="chart" style="width:500px;height:300px;"></div>
Solved by Mark in his comment. My stylesheet link was wrong, href should be href. Thanks a lot Mark!
Related
I have implemented kendo grid in my project. I want to show "No Records Available" message to grid if data is not present. I set noRecords to true for my grid and it is working as expected. Now I have so many grids in my project so I want to globally set this setting for all the grids.
Is there a way to achieve so?
Here is my sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
</head>
<body>
First Grid:
<div id="grid"></div>
Second Grid:
<div id="grid1"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
pageable: true,
noRecords: {
template: "No data available"
},
dataSource: {
page: 1,
pageSize: 10
}
});
$("#grid1").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
pageable: true,
dataSource: {
page: 1,
pageSize: 10
}
});
</script>
</body>
</html>
You can find a working dojo here.
Hi you can extend the grid like this. You can put this in a separate js file and include it before you use a grid.
(function ($, kendo) {
var _init = kendo.ui.Grid.fn.init;
var extendedGrid = kendo.ui.Grid.extend({
init: function (element, options) {
var getTemplate = function (textP, iconP) {
var icon = iconP || 'icon';
var text = textP || 'No data available';
var tpl = `<div class="no-records-table"><div class="no-records-table-cell"><div class="grid-no-records-icon ${icon}"></div><div>${text}</div></div></div>`;
return tpl;
}
options = $.extend({
noRecords: {
template: getTemplate(options.noRecordsText, options.noRecordsIcon)
}
}, options);
//call the base constructor.
_init.call(this, element, options);
}
});
kendo.ui.plugin(extendedGrid);
}(window.kendo.jQuery, window.kendo));
You can check the the dojo here
It is very strange that last time I run the program everything is ok, but this time it does not work, the result web page a empty and I really don't know where make the error.(Sorry only add some words to Thank you Thank you Thank you)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>My first stock chart</title>
<link rel="stylesheet" href="amcharts/style.css" type="text/css">
<style>
#chartdiv
{
width : 100%;
height : 500px;
font-size : 11px;
}
</style>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
<script type="text/javascript">
AmCharts.loadFile("https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/22300.csv", {}, function (response) {
/**
* Parse CSV
*/
var data = AmCharts.parseCSV(response, {
"useColumnNames": true
});
/**
* Create the chart
*/
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": data,
"valueAxes": [{
"gridColor": "#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20
}
});
});
</script>
</head>
<body>
<div id="chartdiv"></div>
</body>
</html>
The CSV file is probably cached now in your browser, this causes Amcharts to immediately create the Chart. Unfortunately the div container doesn't exist yet. Either move your chart initialisation script tag below the chart div or wrap it in a DOMContentLoaded eventlistener or move the script to a separate file.
Option 1 move the script tag below the target div
<body>
<div id="chartdiv"></div>
<script type="text/javascript">
AmCharts.loadFile("https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/22300.csv", {}, function (response) {
/**
* Parse CSV ....
*/
});
</script>
</body>
Option 2 wrap initialisation around DOMContentLoaded
document.addEventListener("DOMContentLoaded", function(event) {
AmCharts.loadFile("https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/22300.csv", {}, function (response) {
/**
* Parse CSV ....
*/
});
});
I have a Kendo UI Grid, which contains four columns:
Highlight MAC Time Message
The Highlight column can contain the values "yes" or "no", and this column is hidden.
I need to create a row template that will highlight (change the color or something) the row if the value is yes.
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
<style>
.change-background {
background-color: red;
}
</style>
</head>
<body>
<div id="grid"></div>
<script type="text/javascript">
var ds = new kendo.data.DataSource({
data: [{
Highlight: "Yes",
MAC: "111",
Time: "aaa",
Message: "a1"
}, {
Highlight: "No",
MAC: "222",
Time: "bbb",
Message: "b2"
}]
});
$("#grid").kendoGrid({
dataSource: ds,
dataBound: onDataBound,
columns: [
{ hidden: true, field: "Highlight" },
{ field: "MAC" },
{ field: "Time" },
{ field: "Message" }
],
});
function onDataBound(e) {
var grid = $("#grid").data("kendoGrid");
var data = grid.dataSource.data();
$.each(data, function (i, row) {
if (row.Highlight == "Yes") {
var element = $('tr[data-uid="' + row.uid + '"] ');
$(element).addClass("change-background");
}
});
}
</script>
</body>
</html>
Let me know if any concern.
You can apply condition in Row Template, Try Something like below
$("#grid").kendoGrid({
dataSource: ds,
rowTemplate: '<tr class="#:Highlight ==\"Yes\"? \"red\" : \"white\"#" data-uid="#= uid #"><td>#: MAC #</td><td>#:Time #</td><td>#:Message#</td></tr>'
});
DataSource
var ds = new kendo.data.DataSource({
data: [{
Highlight : "Yes",
MAC :"...",
Time :"...",
Message:"...."
}, {
Highlight : "No",
MAC :"...",
Time :"...",
Message:"...."
}]
});
I am using kendo line chart in my application, the x axis values/labels are overlapping. The xAxis.labels.step property doesn't work in my case as the categoryaxis is bind to an datasource that can contain a date difference in days/moths/years. How can i avoid ovelapping?
I have used rotation to fix this issue, but is there any other approach?
Below is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var seriesData = [
{
year: new Date(Date.parse("12/12/2011")),
value: 1
},
{
year: new Date(Date.parse("13/12/2012")),
value: 3
},
{
year: new Date(Date.parse("23/12/2012")),
value: 4
}
];
$("#chart").kendoChart({
categoryAxis: {
min: new Date("12/1/2011"),
max: new Date("23/12/2012"),
baseUnit: "days",
type: "date",
field: "year",
labels: {
dateFormats: {
days: "MM/dd/yy"
},
}
},
chartArea: {
width: 300,
height: 200
},
series: [
{
field: "value",
type: "line"
}
],
dataSource: {
data: seriesData
}
});
</script>
</body>
</html>
Kendo chart's x-axis labels can be adjusted dynamically using dataBound-event with the following dataBound function.
function dataBound(e) {
var chart = $("#chart").data("kendoChart");
if (seriesData.view().length > 2) {
chart.options.categoryAxis.labels.step = 5;
}
else {
chart.options.categoryAxis.labels.step = 1;
}
}
See full demo -> JSFIDDLE
I'm trying out very simple search popup on the JqGrid. Please see the code below. There are few issues:
The popup comes up with AND/OR and [+] controls at the very top. See screenshot below: (from FF 4)
You can click on [-] button to remove the very first (and only) filter row. It shouldn't be allowed. First filter row should never be allowed to be removed.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>JQGRID Test</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/redmond/jquery-ui-1.8.1.custom.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css"/>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.js"></script>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(function() {
createGrid();
});
function createGrid() {
$("#jqgrid-table").jqGrid({
colNames:['First Name', 'Last Name', 'Age', 'IQ', 'Type'],
colModel:[
{name:'firstName',index:'firstName', width:100},
{name:'lastName',index:'lastName', width:100},
{name:'age', index:'age', width:50},
{name:'iq', index:'iq', width:50, stype:'select', searchoptions: {dataUrl:'/api/domains/putcalldomain'}},
{name:'type', index:'type', width: 56}
],
width: 800,
datatype:'local',
pager: '#pager2',
viewrecords: true,
caption:"JSON Example"
});
var searchOptions = {
caption: 'Filter...',
multipleSearch:true,
closeAfterSearch:true,
closeAfterReset:true,
Find: 'Filter'
};
jQuery("#jqgrid-table").jqGrid('navGrid',
'#pager2',
{search:true, edit:false, add:false, del:false, refresh:false},
null, null, null, searchOptions
);
var data = getData();
for(var i =0; i < data.length; i++) {
var r = data[i];
jQuery("#jqgrid-table").addRowData(r.id, r);
}
}
function getData() {
return [
{id:1, firstName: 'John', lastName: 'XXX', age:'30', iq:'200', type: 'Nice'},
{id:2, firstName: 'Ashley', lastName:'YYY', age:'31', iq:'210', type:'Nicer'},
{id:3, firstName:'Smith', lastName:'ZZZ', age:'23', iq:'90', type:'Nicest'}
];
}
</script>
</head>
<body>
<div id='jqgrid-div'>
<table id='jqgrid-table'></table>
<div id="pager2"></div>
</div>
</body>
</html>
I suggest to overwrite the internal reDraw method used by filtering (see my another answer for more description). To do this you should include in the searchOptions which you use the beforeShowSearch event handler with the following implementation:
beforeShowSearch: function($form) {
var searchDialog = $form[0],
oldrReDraw = searchDialog.reDraw, // save the original reDraw method
doWhatWeNeed = function() {
$('input.delete-rule:first',searchDialog).unbind('click');
// set fucus in the last input field
setTimeout(function() {
// set fucus in the last input field
$('input[type="text"]:last',searchDialog).focus();
}, 50);
}
searchDialog.reDraw = function() {
oldrReDraw.call(searchDialog); // call the original reDraw method
doWhatWeNeed();
}
doWhatWeNeed();
}
You can see the corresponding demo here.