I am using Kendo pie chart in onsenui framework and it works great if i use
function createChart() {
$("#chart").kendoChart({
title: {
position: "bottom",
text: "Share of Internet Population Growth, 2007 - 2012"
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= category #: \n #= value#%"
}
},
series: [{
type: "pie",
startAngle: 150,
data: [{
category: "Asia",
value: 53.8,
color: "#9de219"
},{
category: "Europe",
value: 16.1,
color: "#90cc38"
},{
category: "Latin America",
value: 11.3,
color: "#068c35"
},{
category: "Africa",
value: 9.6,
color: "#006634"
},{
category: "Middle East",
value: 5.2,
color: "#004d38"
},{
category: "North America",
value: 3.6,
color: "#033939"
}]
}],
tooltip: {
visible: true,
format: "{0}%"
}
});
}
I have my own JSON object which is $scope.localData
and when i replace the JSON data (which is inside series) with my localData, the chart doesn't work. Any help would be appreciated. Thank you guys.
Here is my codepen
host : varanjith.com
username : demo
password : demo
Update #1
Brief Intro about the app, It gets the JSON object from web and store it in the local database, based on that data the pie chart is generated. Everything is working fine other than that chart. Please help
Update #2
I think i found out the problem, but still not sure, the kendo pie chart uses json as in the format
[{category:"Asia", value:87},{category:"Europe", value:97}]
but the $scope.localData has the value [{"category":"Asia", "value":87},{"category":"Europe", "value":97}]
I think that double quotation marks is the problem. Can anyone tell me how to remove it?
The data you're feeding to the Pie Chart looks malformed. I tried redefining the data with:
var data = $scope.localData.map(function(item) {
return {
category: item.Country,
value: item.Rating1
};
});
Also, I changed the template string back to "#= category #: \n #= value#%". After doing that it worked fine.
Related
I wanted to remove a title that appears on Highchart when I leave the mouse on the graph. I already tried to remove the title and it still appears.
enter image description here
I've tried using Title inside the chart and outside and nothing happens. Put the text = '' and it doesn't work either.
Example:
{
chart: {
type: 'column',
marginBottom: 40,
title: {enabled: false},
},
xAxis:{
labels:{
style:{
color: 'black',
fontSize:'11px'
}
}
}
Thanks
The title options object should not be defined inside the chart options.
See: https://jsfiddle.net/BlackLabel/ayjw6pom/
Highcharts.chart('container', {
title: {
text: ''
},
series: [{
data: [29.9, 71.5, ...]
}]
});
API: https://api.highcharts.com/highcharts/title.text
If this wouldn't help please reproduce your issue on some online editor which I could work on.
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# '}
The tooltip in my Highchart is behaving strangely. It is living its own life. It doesn't show the tooltip of the point on which I hover, but shows the tooltip of any point randomly.
Here is a JSFiddle example: http://jsfiddle.net/AeV7h/9/
$(function () {
var data=[[28,0],[24,3],[16,10]];
var param= { WodTag: "cur_spd", Name: "Current speed", Color: "#C6C6C6", LineStyle: "Solid", SeriesType: "line", LineWidth: 2, TickInterval: null, MinValue: null, MaxValue: null, Decimals: 2 };
$('#container').highcharts({
chart: {
height: 700,
width: 400,
plotBorderWidth: 1,
plotBorderColor: '#E4E4E4',
},
xAxis: {
title: {
useHTML: true,
text: param.Name + "( m/s )",
},
gridLineWidth: 1,
min: param.MinValue,
max: param.MaxValue,
gridLineDashStyle: 'Dot',
tickInterval: param.TickInterval
},
yAxis: {
title: {
text: 'Depth(m)',
},
reversed: true,
tickLength: 50,
gridLineDashStyle: 'Dot'
},
title: {
text: null,
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
useHTML: true,
formatter: function () {
return this.y;
}
},
series: [{
name: param.Name,
data: data,
color: param.Color,
dashStyle: param.LineStyle,
lineWidth: param.LineWidth,
type: "line"
}]
});
});
Can anyone help and tell me why it is behaving like this, and how I can fix it?
Your problem is that your data is not sorted by increasing X value. If you read the Series.data documentation it says that (API):
Note data must be sorted by X in order for the tooltip positioning and data grouping to work.
You should always sort your data like this before handing it over to Highcharts. Highcharts doesn't sort any data. Doing it by hand for your example your data should look like this:
var data=[[16,10],[24,3],[28,0]];
As in this JSFiddle demonstration, and everything works as intended.
I have JSON with structure like this:
"id":1,
"user_role":"ADMIN",
"state":"ACTIVE",
"address":{
"street":"test 59",
"city":"City test",
"post_number":"25050"
},
How I should to pass values of address.street into column using setting in fields and model?
Many thanks for any advice.
If you want to show all values in a single column do what #RobinGiltner suggests.
If you want to show each member of address in a different column you can do:
var grid = $("#grid").kendoGrid({
dataSource: data,
editable: true,
columns : [
{ field: "id", title: "#" },
{ field: "user_role", title: "Role" },
{ field: "address.street", title: "Street" },
{ field: "address.city", title: "City" },
{ field: "address.post_number", title: "Post#" }
]
}).data("kendoGrid");
i.e.: use address.street as name of the field. This would allow you even to edit the field as in the example: http://jsfiddle.net/OnaBai/L6LwW/
#OnaBai Good and intuitive answer. Sadly Kendo doesn't always work to well with nested properties this way. For example formating doesn't work. Here is an example using data source shema to access nested properties. This way you can use formatting but you have to specify a schema model.
var grid = $("#grid").kendoGrid({
dataSource: {
data: data,
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
user_role: { type: "string" },
address_street: { from: "address.street" },
address_city: { from: "address.city" },
address_post_number: {
type: "number",
from: "address.post_number"
}
}
}
}
},
columns: [{
field: "id",
title: "#"
}, {
field: "user_role",
title: "Role"
}, {
field: "address_street",
title: "Street"
}, {
field: "address_city",
title: "City"
}, {
field: "address_post_number",
title: "Post#",
format: "{0:0#######}"
}]
}).data("kendoGrid");
Jsfiddle: http://jsfiddle.net/wtj6mtz2
See also this Telerik example for accessing nested properties.
You could use a template on the grid column definition to display whichever pieces of the address you wanted.
{ field: 'address', title: 'Address', template: '#= address.street# #= address.city#, #= address.post_number# ' },
See documentation for kendo column template. http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.template
See sample at http://jsbin.com/gizab/1/edit
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}]