Need to use Remote Kendo Grouped and Stacked Bar Chart - kendo-chart

I am using Kendo Bar Chart, which will show like grouped and stacked for dynamic data. In category field i need to display usernames and it has to show respective metric values, here metric values are dynamic and variable, and metric count values are displayed in bar, which is like stacked bar.
For Example:
Metric values are - High, Low, Medium, ...
Metric values count -> High-4, Low-2, and medium -5 ,..
Here counts 4,2, and 5 to be shown in a stacked bar.
Like this i have to show for multiple users with respective the values.
Below i have shown my Code, may i know how to use dynamic stacked bar kendo chart, and can i have solution for above mentioned problem.
Code- Chart Definition
$("#chartForWorkItems").kendoChart({
title: {
text: "Bugs State Analysis"
},
//defining the datasource for loading the chart
dataSource: {
transport: {
read: {
url: baseUri + "ProjectReportWorkItemChart/chartDisplayForWorkITems",
cache: false,
type: "POST",
dataType: "json",
complete: function (e) {
},
},
parameterMap: function (options, operation) {
console.log(selectedCategoryByMetrics);
if (operation == "read") {
return {
workItems: selectedCategoryByMetrics,
Projectid: sessionStorage.getItem("prjprojectid"),
metricsWithWorkItem: metricsWithWorkItem,
users: usersSelected
}
}
},
},
schema: {
model: {
id: "field",
fields: {
field: { type: "string" },
count_f: { type: "string" },
metric: { type: "string" },
assignedTo: { type: "string" },
}
}
}
},
chartArea: {
width: 400,
height: 300,
},
seriesDefaults: {
type: "column",
},
series: [{
field: "count_f",
},
],
categoryAxis: {
categories: "assignedTo",
field: "field",
majorGridLines: {
visible: true
}
},
valueAxis: [{ //display count in the value axis
line: {
visible: true
},
majorGridLines: {
visible: true
}
}],
tooltip: { //To display tool tip
visible: true
},
});

Related

vue2 chart.js insert time data on x-axis in real time

I want to put time data in x-axis labels in vue chart.js . There is a way in pure js code, not vue, but I can't find it in vue version.
Below is my code.
export default {
name: "LineChart",
components: {
LineChartGenerator,
},
props: {
chartId: {
type: String,
default: "line-chart",
},
datasetIdKey: {
type: String,
default: "label",
},
width: {
type: Number,
default: 100,
},
height: {
type: Number,
default: 280,
},
cssClasses: {
default: "",
type: String,
},
styles: {
type: Object,
default: () => {},
},
plugins: {
type: Array,
default: () => [],
},
},
data() {
return {
chartData: {
labels: "???",
datasets: [
{
label: "vacuum",
backgroundColor: "#534e7f",
data: this.$store.state.cnc1,
},
],
},
chartOptions: {
maintainAspectRatio: false,
},
};
},
};
I tried a lot of things similar to the one below but failed.
I also installed the extension but it failed.
scales: {
x: {
type: "time",
time: {
unit: "day",
},
},
},
I want to make something like this.
Most of the vue examples don't help by putting specific values in 'labels:' beforehand.
How can I get the value of the label in real time?
I tried putting time data into the store, but only the time when execution started is displayed.
Or like this...My head is a potato.Any help would be appreciated.
did you match label and data like this?
chartData: {
labels: [ 'January', 'February', 'March'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: [40, 20, 12]
}
]
},

How to make a sum of value in data with Vue.js and use it in of v-if?

I want to make a function to sum up the value in data with vue.js but I don't know how to code it.
var quiz = {
questions: [
{
text: "who am I?",
responses: [
{ text: "John", value: 1000 },
{ text: "James", value: 2000 },
{ text: "Lucy", value: 3000 },
{ text: "Mari", value: 4000 }
]
},
{
text: "What do you want to be?",
responses: [
{ text: "first selector", value: 10 },
{ text: "second selector", value: 20 },
{ text: "third selector", value: 30 },
{ text: "fourth selector", value: 40 }
]
},
{
text: "How old are you?",
responses: [
{ text: "first selector", value: 10 },
{ text: "second selector", value: 20 },
{ text: "third selector", value: 30 },
{ text: "fourth selector", value: 40 }
]
}
]
}
and html code
<template v-if="resultOne">
<p>First result</p>
</template>
I had a following data like this, and I want to make some v-if code by using the value of them.
For example, if the sum of value become 1020, 1030, 1040, and 1050, I want to show "resultOne."
How can I make a code like this?
It's difficult to give you a complete answer as I don't know where quiz is coming from. Is it hardcoded or is it dynamic?
But either way, here is a method you can use to calculate the total value of the data:
const totalValue = quiz.reduce((total, item) => {
const itemSum = item.responses.reduce((sum, response) => {
return sum + response.value;
}, 0);
return total + itemSum;
}, 0);
If the data is static then I would suggest just doing the calculation inside a created() hook and storing it in a data prop.
like:
data() {
return {
totalValue: 0
}
},
created() {
this.calculateValue();
},
methods: {
calculateValue() {
this.totalValue = quiz.reduce((total, item) => {
const itemSum = item.responses.reduce((sum, response) => {
return sum + response.value;
}, 0);
return total + itemSum;
}, 0);
}
}
and then your v-if is simply v-if="[1020, 1030, 1040, 1050].includes(totalValue)"
If quiz is more dynamic then you can try to use a computed method.

How to display a List of object in Kendo Grid in jquery?

I am working on a project in which I need to display List of objects in Kendo Grid.
below is the code for data binding.
$("#GridProperty").kendoGrid({
dataSource: {
transport: {
read: {
dataType: "json",
url: $_BindPropertyData,
data: { "LegalEntityId": LegalEntityId, "DatasetId": DatasetId },
async: true,
}
},
schema: {
model: {
fields: {
GeoId: { type: "int" },
GeoDescription: { type: "string" },
GeoAbbreviation: { type: "string" },
//ComponentDesc: { type: "string", from: "CompModelList.ComponentDesc" },
Id: { type: "int" },
Amount1: { type: "decimal", from: "CompModelList.SaDataModel.Amount1" },
Amount2: { type: "decimal"}
//lstcompModel: {type: ""}
}
}
},
},
noRecords: {
template: "<p style='margin-top:5px;'>There are currently no items available<p>"
},
height: 525,
reorderable: true,
groupable: true,
sortable: true,
filterable: true,
resizable: true,
columnMenu: true,
selectable: "row",
dataBound: function () {
},
columns: Columns
});
Description :
I am returning list of objects as json from my Action . but i am not able to bind the list of objects in kendo grid.
I am breaking my head for last four days. Please help.
Thanks

Passing data in view model to controller via kendo grid

So far, I'm just trying to instantiate my kendogrid and passing through values from my view model. I got the following piece of code from Telerik's documentation for vb.net. The thing is, an exception is thrown from .Grid ->
"Type parameter for public overridable overloads function grid(of T as a class) as a gridbuilder(of t) cannot be inferred"
Html.Kendo().Grid().Name("kendogrid")
I'm not sure what this error means and I don't know how to go about fixing it.
View
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "TestAjax",
dataType: "json",
type: "GET",
},
update: {
url: "update",
dataType: "json",
type: "POST"
},
create: {
url: "CreateInvoiceRecord",
dataType: "json",
type: "GET",
},
parameterMap: function (options, operation) {
console.log(operation);
console.log(options);
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "itemID",
fields: {
ItemName: { type: "string" },
Amount: { type: "number", editable: false, validation: { required: true } },
ProductLine: { type: "string" },
Status: { type: "string" },
}
}
},
aggregate: [{ field: "Amount", aggregate: "sum" }
]
});
$("#kendogrid").kendoGrid({
DataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create", "save"],
columns: [
{ field: "ItemName", title: "Item", width: "150px" },
{ field: "Amount", title: "Amount", format: "{0:c}", width: "100px", aggregates: ["sum"], footerTemplate: "Total Amount: #=sum#" },
{ field: "ProductLine", title: "Product Line", width: "150px", editor: productLineDropDownEditor},
{ field: "Status", title: "Status", width: "150px", editor: statusDropDownEditor },
{ command: "Update", title: "Update" , width:"150px"}],
editable: true
});
});
Model
Public Class MyViewModel
Public Property id As String
Public Property id2 As String
End Class
The VB grid syntax from http://docs.telerik.com/kendo-ui/aspnet-mvc/vb#grid
is:
Html.Kendo().Grid(Of YourViewModelClassThatYouWantToBindTheGridTo)() _
.Name("grid") _
...additional configuration.
You are missing the part where you tell the grid what type of object you are binding to(the "Of NameOfYourClass" part.
You should post your whole grid definition.
Also...C# syntax is sooooo much cleaner(I know that's not helpful).
Edit
OK, so this question isn't about the correct VB.NET Razor syntax anymore....
This is how you get "extra" data passed to the controller methods from a dataSource: you use the dataSource.transport.read.data configuration (http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read.data)
Using an object:
transport: {
read: {
url: "TestAjax",
dataType: "json",
type: "GET",
data: {
parameterToPassToReadAction: valueYouWantToPassToReadAction
}
},
Using a function:
transport: {
read: {
url: "TestAjax",
dataType: "json",
type: "GET",
data: extraDataFunction
},
function extraDataFunction () {
return {
parameterToPassToReadAction: valueYouWantToPassToReadAction
};
}
Where parameterToPassToReadAction is the name of the parameter in your server method and valueYouWantToPassToReadAction is the value you want it to be...which is stored where ever you stored it when the page loaded. If it is in a ViewModel of your vbhtml file and your javascript is in the script block of that same file, the syntax will be something like:
function extraDataFunction () {
return {
parameterToPassToReadAction: #Model.FieldYouWantToSend
};
}
But it is not clear where you have this value stored.
Finally got what I wanted working using a hack for create and then ajax for read. Not totally sure why this works the way it does so I'll need to look into it some more. I needed to pass parameters to controllers that are connected to kendogrid - specifically the read and create operations. I created a view model to store the values that I obtained from my Index controller and then used the view model to pass the values from kendogrid to the read and create operation controllers. For some reason, I was only able to pass parameters to the read operation using ajax.
Note: Still not the best solution. It calls readData controller twice and I don't want that.
Javascript
<Script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "readData",
dataType: "json",
type: "GET",
},
create: {
url: "CreateInvoiceRecord?trxid=#Model.id2&bcid=#Model.id",
dataType: "json",
type: "GET",
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "itemID",
fields: {
ItemName: { type: "string" },
Amount: { type: "number", validation: { required: true } },
ProductLine: { type: "string" },
Status: { type: "string" }
}
}
},
aggregate: [{ field: "Amount", aggregate: "sum" }]
});
$("#kendogrid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 550,
toolbar: ["create", "save"],
columns: [
{ field: "ItemName", title: "Item", width: "150px" },
{ field: "Amount", title: "Amount", format: "{0:c}", width: "100px", aggregates: ["sum"], footerTemplate: "Total Amount: #=sum#" },
{ field: "ProductLine", title: "Product Line", width: "150px", editor: productLineDropDownEditor},
{ field: "Status", title: "Status", width: "150px", editor: statusDropDownEditor },
{ command: "Update", title: "Update" , width:"150px"}],
editable: true
});
});
function productLineDropDownEditor(container, options) {
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
valuePrimitive: true,
dataTextField: "name",
dataValueField: "name",
dataSource: {
transport: {
read: {
url: "/Customs/getProdLines",
dataType: "json"
}
},
schema: {
data: "Data",
model: {
fields: {}
}
},
}
});
}
function statusDropDownEditor(container, options) {
var data = [
{ text: "Active", value: "1" },
{ text: "Paid", value: "2" },
{ text: "Cancelled", value: "3" }
]
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
valuePrimitive: true,
dataTextField: "text",
dataValueField: "value",
autobind: false,
dataSource: data
});
}
//function testAjax() {
//}
//data: { 'name': ItemName, 'amount': Amount, 'prodline': ProductLine, 'status': Status },
$.ajax({
type: "Get",
data: { id: "#Model.id", id2:"#Model.id2" },
url: "readData/",
dataType: "json",
success: function (itemList) {
console.log(itemList);
}
});
</script>
Model
Public Class MyViewModel
Public Property id As String
Public Property id2 As String
End Class

Bind KendoUI grid with Model data in MVC 4

For example, I have a view with model IEnumerable<Correspondence>. I want to bind it to KendoUI grid. What should I do? I've tried
#model IEnumerable<Correspondence>
<div id="Correspondence"></div>
<script>
$(document).ready(function () {
$('#Correspondence').kendoGrid({
dataSource: {
data: #Html.Raw(Json.Encode(Model)),
editable: { destroy: true },
batch: true,
pageSize: 15,
schema: {
model: {
id: "Id",
fields: {
Subject: { type: "string" },
CorrespondenceType: { type: "number" },
SentDate: { type: "date" }
}
}
}
},
navigatable: true,
selectable: "row",
filterable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: [
{
title: "Subject",
field: "Subject"
},
{
title: "Type",
field: "CorrespondenceType"
},
{
title: "Sent Date",
field: "SentDate",
format: "{0:MM/dd/yyyy}"
},
{
command: [{ name: "openCorrespondence", text: "Open", className: "k-grid-openLaboratory", imageClass: "k-icon k-i-maximize", click: Open },
{ name: "deleteCorrespondence", text: "Delete", className: "k-grid-deleteLaboratory", imageClass: "k-icon k-delete", click: Delete },
{ name: "EditCorrespondence", text: "Edit", className: "k-grid-editLaboratory", imageClass: "k-icon k-edit", click: Edit }],
title: "Action"
}
]
});
}); // end ready
</script>
But it doesn't work. The table even doesn't show up. Please help me. Thank you.
Edited!!!
I have solved my own problem. Because I used command column, so I have to add 3 functions: Open, Edit, and Delete. Then, the grid showed successfully.