We Keep Coding

To print arrays value using "/" in bar chart

I had to print the values of Active_Employees & Employees_Plan in bar chart like in this
Image
Means to make a bar representing the comparison in the last bar. It would be more suitable if concise code is provided.
function BarChart()
{
var emp = 0;
myData = "{ 'date':'" + startdate + "', 'Level1':'0','Level2':'0','Level3':'0','Level4':'0','Level5':'0','Level6':'0', 'EmployeeId':'" + emp + "'}";
$.ajax({
type: "POST",
url: "NewDashboard.asmx/BarChart",
contentType: "application/json; charset=utf-8",
data:myData,
success: OnSuccessBarChart,
// function (result) {
// alert(result.d);
//},
error: onError,
cache: false
});
}
function OnSuccessBarChart(data,status)
{
var bar_array = [];
if (data.d != null) {
var bar_data = jsonParse(data.d);
$.each(bar_data, function (i, option) {
//OSA.push(
// {
// name: option[i].Active_Employees,
// data: parseFloat(option[i].Employees_Plan)
// })
bar_array.push(
parseFloat([option.Employees_Plan]),
parseFloat([option.Active_Employees]),
parseFloat([option.Employees_Plan] + "/" + [option.Active_Employees])
);
});
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'BarCharts',
type: 'bar',
height: 300
},
title: {
text: 'Month Planned by Employees '
},
colors: [
'#604228'
],
credits: { enabled: false },
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {
color: '#F0F0F0'
},
formatter: function () {
return this.x + ':' + this.y;
}
},
plotOptions: {
series: {
shadow: false,
borderWidth: 1,
dataLabels: {
enabled: true,
}
}
},
xAxis: {
categories: ['Plan of Current Month', 'Total Active Employee', 'Plans Made by Active Employees'],
labels: {
style: {
fontWeight: 'bold'
}
}
},
yAxis: {
title: {
text: 'Plans of Active Employees',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
series: [{
showInLegend: false,
data: bar_array
}]
});
}

I would try something like this:
$.each(bar_data, function (i, option) {
var emp_plan = option.Employees_Plan;
var active_emp = option.Active_Employees;
var plan_ratio = emp_plan / active_emp;
bar_array.push(
parseFloat([option.Employees_Plan]),
parseFloat([option.Active_Employees]),
parseFloat(plan_ratio).toFixed(2)
);
});

Select cell value from table

I have multiple records in table .. Scenario when I click on row then chart is display according to ID now I want to specify that which owner have this data so for this I try to display owner name ..
I have data in a table:
ID Owner RegNo
26626 John B82
26634 David BE49
26642 Roh A5
26640 Julie B5
I tried this:
<script type="text/javascript">
$(function () {
$('#tabledata').on('click', 'tr', function () {
var row = $(this);
var Id = row.find('td')[0].firstChild.data;
var cell = row.find('td')[1].firstChild.data;
var obj = {};
var cellvalue = {};
obj.ID = Id;
cellvalue.cell = cell;
GetData(obj);
return false;
});
});
function GetData(obj) {
$.ajax({
type: "POST",
url: "WebForm1.aspx/GetVo",
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (result) {
if (result !== null && result.length == 0) {
$("#cont").hide();
return;
}
strArray = result.d;
var myarray = eval(strArray);
$("#cont").show();
$('#cont').highcharts({
chart: {
borderColor: 'Grey',
borderWidth: 2,
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: JSON.stringify(cellvalue)
},
position: {
align: 'right',
verticalAlign: 'bottom',
x: 10,
y: -10
},
subtitle: {
text: 'Chart'
//text: 'Total: ' + myarray.length
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y}',
},
showInLegend: true
}
},
series: [{
name: 'Delivered amount',
data: myarray
}]
});
//end
},
error: function (error) {
alert(error);
}
});
}
// });
</script>
when I check f12 this shows the error
WebForm1.aspx:109 Uncaught ReferenceError: cellvalue is not defined

Modify You function calling and function definition:
<script type="text/javascript">
$(function () {
$('#tabledata').on('click', 'tr', function () {
var row = $(this);
var Id = row.find('td')[0].firstChild.data;
var cell = row.find('td')[1].firstChild.data;
var obj = {};
var cellvalue = {};
obj.ID = Id;
cellvalue.cell = cell;
GetData(obj, cellvalue); //HERE
return false;
});
});
function GetData(obj, cellvalue) { //AND HERE
$.ajax({
type: "POST",
url: "WebForm1.aspx/GetVo",
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (result) {
if (result !== null && result.length == 0) {
$("#cont").hide();
return;
}
strArray = result.d;
var myarray = eval(strArray);
$("#cont").show();
$('#cont').highcharts({
chart: {
borderColor: 'Grey',
borderWidth: 2,
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: JSON.stringify(cellvalue)
},
position: {
align: 'right',
verticalAlign: 'bottom',
x: 10,
y: -10
},
subtitle: {
text: 'Chart'
//text: 'Total: ' + myarray.length
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y}',
},
showInLegend: true
}
},
series: [{
name: 'Delivered amount',
data: myarray
}]
});
//end
},
error: function (error) {
alert(error);
}
});
}
// });
</script>

Kendo UI Grid Paging is not working

In document ready i append div inside body and i am creating a kendo ui window and then inside that window append second div with creating kendo dynamic chart or kendo grid.
When i create this things i'm loading data from AJAX and shows grid normally, but paging and column resizing is not working
Can you help me on this situation?
Here my code
$(document).ready(function () {
$.ajax({
type: 'POST',
dataType: 'json',
url: '../Home/GetChartsAndInformations',
success: function (data) {
for (i = 1; i <= data.length; i++) {
count = data.length;
$("body").append('<div class="chartWindow" id="chartWindow-' + i + '"><div id="chart-' + i + '"></div></div>');
var myWindow = $('#chartWindow-' + i).kendoWindow().getKendoWindow();
myWindow.setOptions({
width: data[i - 1].Width,
height: data[i - 1].Height,
actions: ["Pin","Maximize", "Close"],
position: {
top: data[i - 1].Ypos,
left: data[i - 1].Xpos
},
title: data[i - 1].ChartDescription
});
$("#chart-" + i).append(FillWindowWithCharts(i))
}
}
});
});
function FillWindowWithCharts(number) {
$.ajax({
type: 'POST',
dataType: 'json',
url: '../Home/QuerySelected',
data: { id: number },
success: function (data) {
if (data.length != 0) {
if (data[0].ChartType == "grid") {
myData = data;
createGrid(data[0].Id);
}
else {
if (data[0].IsGroup) {
myData = {
data: data,
group: {
field: data[0].GroupValue
},
sort: {
field: data[0].SortValue
}
}
ToolTipTemplate = "#= dataItem.Value1 #: #= kendo.format('{0:N}',value) #";
}
else {
myData = data
}
series = [{
field: data[0].SeriesField,
labels: {
visible: true
}
}];
categories = {
field: data[0].CategoryField
}
stackValue = data[0].IsStacked;
chartType = data[0].ChartType;
title = data[0].ChartDescription;
createChart(number);
}
}
else {
$("#chart-" + number).html("No Data in this interval!!");
}
}
});
}
function createGrid(number) {
$("#chart-" + number).kendoGrid({
dataSource: myData,
resizable: true,
pageable: {
refresh:true,
pageSize: 5
},
columns: [
{ field: "Value1", title: myData[0].Series1, hidden: myData[0].Series1 == null ? true : false },
{ field: "Value2", title: myData[0].Series2, hidden: myData[0].Series2 == null ? true : false },
{ field: "Value3", title: myData[0].Series3, hidden: myData[0].Series3 == null ? true : false },
{ field: "Value4", title: myData[0].Series4, hidden: myData[0].Series4 == null ? true : false },
{ field: "Value5", title: myData[0].Series5, hidden: myData[0].Series5 == null ? true : false }
]
});
}
function createChart(number) {
$("#chart-" + number).kendoChart({
theme: "metro",
dataSource:myData,
title: {
text: title
},
legend: {
visible: true,
position: "bottom",
labels: {
template: '#: chartType == "pie" ? dataItem.Value1 : chartType == "donut" ? dataItem.Value1 : text #'
}
},
seriesDefaults: {
type: chartType,
stack: stackValue
},
series: series,
valueAxis: {
labels: {
format: "{0}"
}
},
categoryAxis: categories,
tooltip: {
visible: true,
format: "{0}",
template: ToolTipTemplate
}
});
}
Thank you for your help

After i read some kendo dynamic grid data binding articles . I found way how to bind dynamically to grid some blog example
I give an example below
function createGrid(number,from,to) {
$("#grid").kendoGrid({
dataSource: {
type: "json",
serverPaging: false,
pageSize: 10,
transport: { //With the transform i can connect data from ajax
read: {
url: "../Home/QuerySelected",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
data: { id: number, from: from, to: to } // I can pass parameter
},
parameterMap: function (options) {
return JSON.stringify(options);
}
},
schema: { // Please be carefull because if you forget schema grid can give different errors. You need to write schema Data and Total and put right place in datasource
data: "Data",
total: "Total"
}
},
resizable: true,
pageable: {
refresh: true
},
sortable: true,
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
contains: "Contains"
}
}
},
columns: [
{ field: "Value1", title: myData.Data[0].Series1, hidden: myData.Data[0].Series1 == null ? true : false },
{ field: "Value2", title: myData.Data[0].Series2, hidden: myData.Data[0].Series2 == null ? true : false },
{ field: "Value3", title: myData.Data[0].Series3, hidden: myData.Data[0].Series3 == null ? true : false },
{ field: "Value4", title: myData.Data[0].Series4, hidden: myData.Data[0].Series4 == null ? true : false },
{ field: "Value5", title: myData.Data[0].Series5, hidden: myData.Data[0].Series5 == null ? true : false }
]
});
$(':contains("No Data in this interval!!")').each(function () {
$("#chart-" + number).html($("#chart-" + number).html().split("No Data in this interval!!").join(""));
});
Thanks!

KendoUI Grid not working with RequireJS

I have:
require(['jquery', 'kendo'], function($, kendo){
var activeGrid = $('#incomeGrid');
var incomeSource = new kendo.data.DataSource({
sort: {
field: "date",
dir: "desc"
},
batch: true,
transport: {
read: {
url: 'core/income-grid/read',
dataType: 'json',
type: 'get'
},
update: {
url: 'core/income-grid/update',
dataType: 'json',
type: 'post'
},
create: {
url: 'core/income-grid/create/',
dataType: 'json',
type: 'post'
},
destroy: {
url: 'core/income-grid/destroy/',
dataType: 'json',
type: 'post'
}
},
error: function (e) {
alert(e.errorThrown + "\n" + e.status + "\n" + e.xhr.responseText);
},
schema: {
data: "data",
total: 'total',
model: {
id: 'id',
fields: {
typeId: {
type: 'number'
}
}
}
},
change: function (e) {
if (e.action == "itemchange" || e.action == "remove") {
if (!activeGrid.ctrlDown) {
this.sync();
}
}
}
});
activeGrid.kendoGrid({
dataSource: incomeSource,
autoBind: true,
height: 152,
pageable: false,
filterable: false,
toolbar: kendo.template($("#incomeToolBar").html()),
edit: function (e) {
var ddl = e.container.find('[data-role=dropdownlist]').data('kendoDropDownList');
if (ddl) {
ddl.open();
}
},
columns: [
{
title: 'Date added',
field: 'date',
width: '90px',
filterable: false,
template: '<span data-id="#=id#"><abbr title="">#=kendo.toString(date, "dd/MM/yyyy")#</abbr></span>'
}
],
editable: true,
sortable: true,
scrollable: true
}).data("kendoGrid");
})
But on the line that has:
activeGrid.kendoGrid({
I am getting the error:
Uncaught TypeError: undefined is not a function
Any idea how I can fix this? It's been driving me mad for the past four hours...

Kendo dragdrop not working?

I am using Kendo dragdrop for my charts. Its woking fine for some of the charts where I use a different approach for showing the charts.
<div id="ExertiveHeartRate" class="chartContainer"></div>
<div id="BloodPressure" class="chartContainer"></div>
$.ajax({
type: "GET",
url: createURL("AverageHeartRate", period1, period2, "<% = Session["id"] %>"),
dataType: "json",
contentType: "application/json; chartset=utf-8",
async:"false",
success: function (chartData) {
$(container).kendoChart({
dataSource: {
data: chartData
},
seriesColors: ["orangered"],
chartArea: {
background: ""
},
title: {
text: title,
},
legend: {
visible: false
},
seriesDefaults: {
type: "column",
gap: .5,
overlay: {
gradient: "none"
}
},
series: [{
field: "heartrate"
}],
categoryAxis: {
type: "date",
field: "createddate"
},
valueAxis: {
title: {
text: "Exertive HeartRate",
font: "14px Arial,Helvetica,sans-serif"
}
}
});
}
});
If i create chart as above. drag-drop will not work. If I use the code as below, its working fine
var dSource = getJsonData("BloodPressure", period1, period2, "<% = Session["id"] %>");
$(container).kendoChart({
dataSource: dSource,
seriesColors: ["#002EB8"],
title: {
text: title,
font: "14px Arial,Helvetica,sans-serif bold",
color: "#002EB8"
},
chartArea: {
background: ""
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
type:"column",
gap: .5,
overlay: {
gradient: "none"
}
},
series: [
{
name: "diastolic",
field: "diastolic",
categoryField: "createddate",
aggregate: "avg",
tooltip: {
visible: true
}],
categoryAxis: {
type: "date"
},
majorGridLines: {
visible: false
},
majorTicks: {
visible: false
}
}
});
The code for doing the dragdrop is below:
$(".chartContainer").kendoDraggable({
hint: function (e) {
debugger;
$("#" + e[0].id).addClass("dragStyle");
return e.clone();
},
dragstart: function (e) {
debugger;
e.currentTarget.hide();
},
dragend: function (e) {
if (!e.currentTarget.data("kendoDraggable").dropped) {
$("#" + e.currentTarget[0].id).addClass("dropStyle");
}
e.currentTarget.show();
}
});
$(".chartContainer").kendoDropTarget({
drop: function (e) {
$("#" + e.draggable.element[0].id).addClass("dropStyle");
$("#" + e.draggable.element[0].id).insertBefore("#" + e.dropTarget[0].id);
}
});
$.ajax() function has something which blocks the dragdrop

The $(container) is a bad jquery selector. It should most likely be more like $('#container').
Also you may want to wait to register the drag and drop functionality of kendo until after the chart has been made. So at the end of your success function in the ajax function.
You can also take another approach. You don't need your data to make the chart in the first place. Just declare your chart as normal. You can then pass in your data into the chart after it has loaded.
$.ajax({
url:...,
dataType:'json',
success: function(d){
$('#container').data('kendoChart').dataSource.data(d);
}
});
You may want to display a loading image while you wait.