I'm trying to make a pie out of this JSON data:
[{"status":"Received","number":"2"},{"status":"In Progress","number":"1"}]
Here's my function:
function createChart() {
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
dataSource: {
transport: {
read: {
url: "http://dev.openbill.co.uk/admin/crud/projects/chart.json.php",
dataType: "json"
},
},
sort: {
field: "status",
dir: "asc"
},
},
chartArea: {
height: 125,
width: 125
},
legend: {
visible: false
},
seriesDefaults: {
type: "pie"
},
series: [{
field: "number",
categoryField: "status",
padding: 10
}],
tooltip: {
visible: true,
template: "#= dataItem.status #: #= dataItem.number #"
}
});
}
Interestingly though, the pie only occupies 1/4 of a circle. I've been playing around with the numbers to try and grow and shrink them, but I just can't seem to make the thing occupy more than 1/4 of a pie.
Could someone please let me know what I'm doing wrong?
In your chart series declaration you have specified that the field is type number:
series: [{
field: "number",
categoryField: "status",
padding: 10
}],
But actually in your JSON the status field is a string. Change it to a number (remove the double quotes) and it should start working.
[{"status":"Received","number":2},{"status":"In Progress","number":1}]
Related
I use a DrawChart method and try to set the logarithmic option to the yaxis to true without success:
The datas (for the series) contains :
"[{type:"bar",data:[1.19576304413727E-08,1.30322021618667E-07]}]"
I try to place the logarithmic : true option in several place without succes. For me it must be placed into the yaxis part.
Thank you in advance
chart.updateOptions({
series: datas,
chart: {
toolbar: {
show: showToolbar
},
animations: {
enabled: false
},
type: 'bar'
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '50%',
endingShape: 'rounded'
}
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
title: {
text: 'Masse'
},
categories: categories//,
//tickAmount: 10
},
yaxis: {
labels: {
formatter: function (value) {
//var ex;
return value.toExponential();
//return value;
}
},
title: {
text: unit
},
tickAmount: 10
//min: min,
//max: max,
//decimalsInFloat: 3
},
grid: {
padding: {
left: 50,
right: 50
}
},
legend: {
show: true,
position: 'bottom',
horizontalAlign: 'left',
showForSingleSeries: true,
showForNullSeries: true,
showForZeroSeries: true
},
})
I found the problem !
When you have log values really small (like 5.32E-9), the logarithm option doesnt work if you try to display the legend thrue a JS function.
So multiply by 1E10 the divide into the JS function (where you display the legend) by 1E10.
I want to show to users subset of columns and allow them to add extra columns if needed. I am struggling to load only subset of columns on load. Please find the code below I have done.
<kendo-grid k-options="vm.mainGridOptions"
k-columns="vm.mainGridColumns"
k-sortable="true"
k-filterable="{mode: 'row'}"
k-column-menu="true"
k-serverFiltering="false"
k-pageSize="10"
k-pageable="{ pageSizes: [5, 10, 25, 50, 100] }"> </kendo-grid>
Controller code
var mainGridDataSource = new kendo.data.DataSource({
transport: { read: mainGridReadEventHandler, cache: true },
serverFiltering: false,
page: 1,
pageSize: 10,
schema: {
data: 'data',
total: 'total',
model: {
fields: {
customerName: { type: "string" },
serviceAccountStatus: { type: "string" },
customerNumber: { type: "string" },
serviceType: { type: "string" },
utilityAccountNumber: { type: "string" },
serviceAddress: { type: "string" },
billingAccountNumber: { type: "string" },
utility: { type: "string" },
phoneNumber: { type: "string" },
email: { type: "string" }
}
}
}
});
vm.mainGridColumns = [
{
field: "customerName",
title: "Name",
template:
"<a ui-sref='resiservice.account-search.customer-details({ customerId:${customerId}, serviceAccountId:${serviceAccountId} })'>${customerName}</a>"
},
{
field: "serviceAccountStatus",
title: "Status"
},
{
field: "customerNumber",
title: "NAP Customer #"
},
{
field: "serviceType",
title: "Commodity"
},
{
field: "utilityAccountNumber",
title: "Utility/Account #"
},
{
field: "serviceAddress",
title: "Service Address"
},
{
field: "billingAccountNumber",
title: "NAP Account #"
},
{
field: "utility",
title: "Utility"
},
{
field: "phoneNumber",
title: "Phone #"
},
{
field: "email",
title: "Email Address"
}
];
Currently columns list coming like this first time
And i want to achive like this
Use columns.hidden property to hide a column, i.e.
{
field: "utility",
title: "Utility",
hidden: true
},
{
field: "phoneNumber",
title: "Phone #",
hidden: true
},
{
field: "email",
title: "Email Address",
hidden: true
}
For example:
http://dojo.telerik.com/EzuFO
The column is still visible on the list of columns in menu.
I have a kendo grid, defined as such:
$("#auditGrid").kendoGrid({
height: 650,
width: 650,
sortable: true,
filterable: true,
resizable: true,
columns: [
{ field: "ChangeTypeDescription", title: "Change Type" },
{ field: "LevelDescription", title: "Level" },
{ field: "Site.ShortName", title: "Site", width: "100px", },
{ field: "TimeStampLocal", title: "Date", type: "date", format: "{0: yyyy-MM-dd HH:mm:ss}" }
]
});
However, the column labelled "Site" does not display anything, even when I know there should be something there. Setting the field as "Site" instead of "Site.ShortName" shows a value of [object Object], but whenever I try to display ShortName off of Site, it shows an empty column. All other columns display properly.
Does anyone have any insight as to why this is happening?
The datasource schema, in case you need to see it:
schema: {
model: {
fields: {
ChangeTypeDescription: { type: "string" },
LevelDescription: { type: "string" },
Site: { type: "string" },
TimeStampLocal: { type: "date" }
}
}
},
You needs to use the template functionality for achieving it, just change the column description of the field Site as follows
{ field: 'Site', title: 'Site', template: '#= Site.ShortName# '}
For some reason I seem to be unable to get any more than the following in the Kendo UI Grid:
HTML:
<div id="grid"></div>
<script>
var remoteDataSource = new kendo.data.DataSource(
{
transport:
{
read: {
type: "POST",
dataType: "json",
url: "/home/getopportunities/"
}
},
pageSize: 4
})
$("#grid").kendoGrid(
{
dataSource: remoteDataSource,
columns: [
{
title: "Title",
headerAttributes: {
style: "text-align:center"
},
attributes: {
"class": "table-cell"
},
width: 600,
filterable: true
},
{
title: "Activity Type",
headerAttributes: {
},
attributes: {
"class": "table-cell",
style: "text-align:center"
},
width: 100,
filterable: true
},
{
title: "Specialty",
filterable: true,
headerAttributes: {
style: "text-align:center"
},
attributes: {
"class": "table-cell",
style: "text-align:center"
}
},
{
title: "Total Credits",
format: "{0}",
headerAttributes: {
style: "text-align:center"
},
attributes: {
"class": "table-cell",
style: "text-align:center"
}
}
],
height: 430,
scrollable: true,
sortable: true,
pageable: true,
filterable: {
extra: false,
operators: {
string: {
contains: "Contains",
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
},
number: {
eq: "Is equal to",
neq: "Is not equal to",
gte: "Greater Than",
lte: "Less Than"
}
}
}
});
</script>
This is the JSON that is returned to it:
[
{"ActivityID":367,"Title":"Non Webinar Test For Calendar","ActivityType":"Other","TotalCredits":2,"Specialty":"[AB] [AE]"},
{"ActivityID":370,"Title":"Stage - Test SI Changes Part II","ActivityType":"Other","TotalCredits":2,"Specialty":"[NE]"},
{"ActivityID":374,"Title":"Webinar Test Event For Calendar","ActivityType":"Webinar","TotalCredits":2,"Specialty":"[FE] [NE] "},
{"ActivityID":401,"Title":"Module #1 Webinar: Learn Stuff","ActivityType":"Webinar","TotalCredits":2,"Specialty":"[AB] ",},
{"ActivityID":403,"Title":"Module #3 Webinar: Learn Even More Stuff","ActivityType":"Webinar","TotalCredits":2,"Specialty":"[AB] [AE]",}
]
I feel like I'm really close but am missing the last piece. Any help would be GREATLY appreciated as I'm on a deadline.
common troubles are with missing schema attribute !
add it to grid's - datasource, and check if it is set when you make your json.
(when plain array is serialized/to_json, the data array needs a property indicating the shema)
here an example to make it clear:
js: sample grid initialisation / datasource:
$("#grid").kendoGrid({ dataSource: { transport: { read: "/getdata/fromthisurl" }, schema: { data: "data" } } });
when you make / output your json, see if shema information is in the encoded result:
php:
$somedata= get_my_data();
header("Content-type: application/json");
echo "{\"data\":" .json_encode($somedata). "}";
or:
$viewdata['data'] = get_my_data();
header("Content-type: application/json");
echo (json_encode($viewdata));
so the json that is sent to the grid would look like:
{data:
[
{item}
{item}
]
}
instead of just:
[
{item}
{item}
]
Code looks good. I wonder if you change data source creation as below . Change type from POST to GET and see if it works,
var remoteDataSource = new kendo.data.DataSource(
{
transport:
{
read: {
type: "GET",
dataType: "json",
url: "/home/getopportunities/"
}
},
pageSize: 4
})
Try this,
$(document).ready(function () {
var remoteDataSource = new kendo.data.DataSource(
{
transport:
{
read: {
type: "POST",
dataType: "json",
url: "/home/getopportunities/"
}
},
pageSize: 4
});
});
You can see what part of code raise an exception in some debug tool (I'd recommend you Chrome's DevTools (just press F12 key in Chrome).
I'm pretty sure the problem is misssing field attribute in your grid's columns array, so Kendo don't know what data from datasource to display in what column of grid.
columns: [
{
field: "Title", // attr name in json data
title: "Title", // Your custom title for column (it may be anything you want)
headerAttributes: {
style: "text-align:center"
},
attributes: {
"class": "table-cell"
},
width: 600,
filterable: true
},
Don't forget to change request type from "POST" to "GET".
What I found when inspecting the JSON coming back from the grid datasource json query was the field names were being JavaScripted -- what was ActivityID in C# became activityID on the wire...
This is unclean, and I discovered it by accident, but what worked for me was returning Json(Json(dataList)) from the controller instead of Json(dataList).
I am using Kendo UI Line chart from Web Dataviz package for generate a Graph with 500+. but the load of the graph is too lazy. It takes like 25 seconds for the graph to be generated.
I am using a date for Category Axis and a Decimal Value for the serie with a odata datasource.
Can I optimize the load time of the graph?
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
dataSource: {
type: "odata",
transport: {
read: crudServiceBaseUrl + "/Odata/TestODataService.svc/EGauges"
},
serverFiltering: true,
serverSorting: true,
sort: { field: "DateData", dir: "asc"},
filter: [
{field: "From", operator: "eq", value: 422 },//400+
{ field: "Id", operator: "eq", value: parseInt(id) },
{ field: "Intervalo", operator: "eq", value: 23 },
{ field: "Tipo", operator: "eq", value: 'm' }
],
title: {
text: ""
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "area"
},
series: [{
field: "Value",
name: "Value"
}],
categoryAxis: {
field: "DateData",
labels: {
visible: false,
rotation: -90
}
},
axisDefaults: {
visible: true,
majorGridLines: { visible: false }
},
tooltip: {
visible: true
}
});
Here is how the odata service is returning data:
jQuery1704278529312834345_1357310335401({"d" : {
"results": [
{
"__metadata": {
"uri": "http://localhost/Prosol.Web/Odata/TestODataService.svc/EGauges(18)",
"type": "TestOpenErpInterfaz.Web.TestEntityDataSource_EGauge"
},
"EGaugeID": 18,
"From": 422,
"Id": 18,
"Tipo": "m",
"Intervalo": 23,
"DateData": "\/Date(1357310820000)\/",
"Value": "3.72",
"TotalKw": "0",
"TotalCosto": "0.00",
"TotalKwGen": "203.23999999999999999999999999",
"TotalCostoGen": "16.259199999999999999999999999",
"FechaDisplay": "Ene 4, 2013 14:47"
},........
], "__count": "421"
}
})
Finally I Use FlotCharts, For some reason the KendoUI Chart laoad data very lazy... I use Kendo Ui Datasource for read data from Web Service and load on FloatChart...
http://www.flotcharts.org/
This is simple, fast, and freeware