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.
Related
In my AngularJS web app, I'm doing a Pivot with devexpress. Particularly, I'm using
the Field Chooser: https://js.devexpress.com/Demos/WidgetsGallery/Demo/PivotGrid/FieldChooser/AngularJS/Light/
In the example there are static data. I have to retrieve them from the server. So, I wrote this:
$scope.testData = null;
$scope.pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
fields: [{
caption: "Nome",
dataField: "fullName",
area: "row"
}, {
caption: "Country",
dataField: "country",
area: "column"
}, {
caption: "Count",
dataField: "countOne",
dataType: "number",
summaryType: "sum",
area: "data"
}],
store: $scope.testData
});
$scope.pivotGridOptions = {
allowSortingBySummary: true,
allowSorting: true,
allowFiltering: true,
showBorders: true,
dataSource: $scope.pivotGridDataSource,
fieldChooser: {
enabled: false
}
},
$scope.fieldChooserOptions = {
dataSource: $scope.pivotGridDataSource,
texts: {
allFields: "All",
columnFields: "Columns",
dataFields: "Data",
rowFields: "Rows",
filterFields: "Filter"
},
width: 400,
height: 400,
bindingOptions: {
layout: "layout"
}
};
// Now I call the function to retrieve data
$scope.getTestData = () => {
// I call the server and save the data
........
$scope.testData = result;
}
The problem is that the table, after the calling, is still empty. There is written "No data". Why? I also tried to write
$scope.pivotGridDataSource.load();
$scope.pivotGridDataSource.reload();
after the call to the server, but it doesn't work yet.
The problem is in your store, so do something like this
var dataStore = new DevExpress.data.CustomStore({
load: function (loadOptions) {
var d = $.Deferred();
$.ajax({
url: UrlApi,
method: "GET",
}).done(function (result) {
d.resolve(result, {
});
});
return d.promise();
},
key: "Id",
});
$scope.pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
.......
store: dataStore
});
See this code below, it is jquery, but AngularJS is basically the same
var dataStore = new DevExpress.data.CustomStore({
load: function (loadOptions) {
var d = $.Deferred();
$.ajax({
url: UrlApi,
method: "GET",
}).done(function (result) {
d.resolve(result, {
});
});
return d.promise();
},
key: "Id",
});
$("#pvtSales").dxPivotGrid({
showBorders: true,
"export": {
enabled: true,
fileName: "Sales"
},
dataSource: {
fields: [{
caption: "Fecha",
dataField: "maeFecha",
width: 350,
area: "row"
}, {
caption: "Nombre",
dataField: "maeNombre",
dataType: "number",
summaryType: "count",
area: "data"
}, {
dataField: "maeGestion",
width: 350,
area: "column"
}],
store: dataStore
}
});
And see the results
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)
);
});
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!
Please tell us how to make a horizontal legend.
And here are the results:
But I want this:
I have the following code:
<script type="text/javascript">
//$(function () {
function getJson() {
var result = [];
$.ajax({
url: "WebService1.asmx/GetJson3",
success: function (data) {
$.each(data, function (key, value) {
item = {
"company": value.BusinessUnitName,
"revenue": value.QTY_Case,
"expenses": value.QTY_Case_Target,
"cos": value.QTY_Case_LY
}
result.push(item);
});
},
async: false,
});
$("#columnChart").igDataChart({
width: "280px",
height: "200px",
dataSource: result,
legend: {
element: "columnLegend"
},
title: "title",
subtitle: "subtitle",
axes: [{
name: "xAxis",
type: "categoryX",
//label: "company",
labelTopMargin: 5,
gap: 0.4,
overlap: 0.0,
}, {
name: "yAxis",
type: "numericY",
maximumValue: 250000,
interval: 50,
minimumValue: 0,
formatLabel: function (val) {
var bVal = (val / 10000),
rounded = Math.round(bVal * 100) / 100;
return rounded + "M";
}
}],
series: [{
name: "series1",
title: "revenue",
type: "column",
isTransitionInEnabled: true,
xAxis: "xAxis",
yAxis: "yAxis",
valueMemberPath: "revenue"
}, {
name: "series2",
title: "expenses",
type: "column",
isTransitionInEnabled: true,
xAxis: "xAxis",
yAxis: "yAxis",
valueMemberPath: "expenses"
}, {
name: "series3",
title: "cos",
type: "column",
isTransitionInEnabled: true,
xAxis: "xAxis",
yAxis: "yAxis",
valueMemberPath: "cos"
},
]
});
}
$(function () {
getJson();
});
</script>
I hope to be guided.
Thank You,
Best regard
The question is answered in the link provided by Andrew Bone. I will post the answer here as well so it's visible.
Make the table rows belonging to the legend to be displayed as inline-block.
#columnLegend tr {
display: inline-block;
}
Another suggestion I have based on the code that you've provided is to not make the $.ajax call sync. Just initialize the igDataChart inside the success callback.
$.ajax({
url: "WebService1.asmx/GetJson3",
success: function (data) {
$.each(data, function (key, value) {
item = {
"company": value.BusinessUnitName,
"revenue": value.QTY_Case,
"expenses": value.QTY_Case_Target,
"cos": value.QTY_Case_LY
}
result.push(item);
initChart();
});
}
});
I'm using a Kendo Chart, the first call works fine but when I call
setInterval(getCharts, 800); the charts brings back the old results every time. If I refresh the page the chart brings the updates results. What am i doing wrong?
If I call $(#chartid).data('KendoChart').datasource.read(); it brings error datasource is undefined
function myCallback(result) {
// Code that depends on 'result'
totalcountvar = result;
return totalcountvar;
}
function foo(callback, id) {
$.ajax({
type: "POST",
url: "Data/OutageCountHandler.ashx?id=" + id,
data: "{}",
async: false,
contentType: "text/json; charset=utf-8",
dataType: "json",
success: callback
});
}
function createChart2(chartid, c_title, fieldName, q_id) {
if (q_id == 2) { foo(myCallback, 4); c_title = c_title + totalcountvar; }
if (q_id == 3) { foo(myCallback, 2); c_title = c_title + totalcountvar; }
if (q_id == 4) { foo(myCallback, 3); c_title = c_title + totalcountvar; }
var sharableDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "Data/ChartDataHandler.ashx?id=" + q_id,
dataType: "json"
}
}
});
// Bind data to Chart
$("#" + chartid).kendoChart({
theme: "moonlight",
chartArea: {
width: 800,
height: 400,
},
title: {
text: c_title
},
dataSource: sharableDataSource,
series: [{
field: fieldName.replace(/\s+/g, ''),
name: fieldName,
color: "#3074D8",
noteTextField: "Type",
notes: {
icon: {
visible: false
},
line: {
length: 20,
color: "transparent"
},
label: {
field:"Type",
position: "outside"
}
}
}],
seriesDefaults: {
type: "column",
labels: {
visible: true,
background: "transparent"
}
},
categoryAxis: {
field: "Area",
},
tooltip: {
visible: true,
background: "white",
format: "{0}",
template: "#= series.name #: #= value #"
},
legend: {
position: "bottom"
}
});
}