This question is locked. New answers and comments are not allowed.
I want to map different 'Series' on 'Stacked Bar Chart' at run time utilizing remote JSON file.
My JSON file include following attribute Project ID, Year, Month and Expense. No. of projects is decided at run time.
[{"ProjectID":1,"Year":2011,"Month":11,"Expense":202.02},{"ProjectID":1,"Year":2011,"Month":12,"Expense":266.91},{"ProjectID":1,"Year":2012,"Month":1,"Expense":274.91},{"ProjectID":1,"Year":2012,"Month":2,"Expense":287.3},{"ProjectID":1,"Year":2012,"Month":3,"Expense":279.47},{"ProjectID":5,"Year":2011,"Month":11,"Expense":261.16},{"ProjectID":5,"Year":2011,"Month":12,"Expense":258.13},{"ProjectID":5,"Year":2012,"Month":1,"Expense":315.84},{"ProjectID":5,"Year":2012,"Month":2,"Expense":344.66},{"ProjectID":5,"Year":2012,"Month":3,"Expense":346.18}]
I have seen the example on the Demo Page in which 'Series' is mapped to the field names.
series:
[{
field: "nuclear",
name: "Nuclear"
}, {
field: "hydro",
name: "Hydro"
}, {
field: "wind",
name: "Wind"
}],
Is it possible to bind 'Series' by specifying fields along with values like
series:
[{
field: "ProjectID=1",
name: "My First Project"
}, {
field: "ProjectID=5",
name: "My Fifth Project"
}, {
field: "ProjectID=8",
name: "Most Eighth Project"
}],
Thanks!
My JSON file include following attribute Project ID, Year, Month and Expense. No. of projects is decided at run time.
[{"ProjectID":1,"Year":2011,"Month":11,"Expense":202.02},{"ProjectID":1,"Year":2011,"Month":12,"Expense":266.91},{"ProjectID":1,"Year":2012,"Month":1,"Expense":274.91},{"ProjectID":1,"Year":2012,"Month":2,"Expense":287.3},{"ProjectID":1,"Year":2012,"Month":3,"Expense":279.47},{"ProjectID":5,"Year":2011,"Month":11,"Expense":261.16},{"ProjectID":5,"Year":2011,"Month":12,"Expense":258.13},{"ProjectID":5,"Year":2012,"Month":1,"Expense":315.84},{"ProjectID":5,"Year":2012,"Month":2,"Expense":344.66},{"ProjectID":5,"Year":2012,"Month":3,"Expense":346.18}]
I have seen the example on the Demo Page in which 'Series' is mapped to the field names.
series:
[{
field: "nuclear",
name: "Nuclear"
}, {
field: "hydro",
name: "Hydro"
}, {
field: "wind",
name: "Wind"
}],
Is it possible to bind 'Series' by specifying fields along with values like
series:
[{
field: "ProjectID=1",
name: "My First Project"
}, {
field: "ProjectID=5",
name: "My Fifth Project"
}, {
field: "ProjectID=8",
name: "Most Eighth Project"
}],
Thanks!
9 Answers, 1 is accepted
0
Hello Ahmed Anwar,
Hristo Germanov
the Telerik team
Thank you for contacting us.
In your case you can use grouping of the dataSource. I have prepared a simple example showing how to do this. Also you can examine our online documentation for the dataSource if you have a different scenario.
Hristo Germanov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gabor
Top achievements
Rank 1
answered on 17 Apr 2013, 01:01 PM
Hi,
This example was helpful for me, but i spotted a strange behaviour.I attached the example file.In the example i bind the local data, and try to group them.As far as i see, if i've more than 10 columns, they'll be mixed.
Thanks for help,
Gabor
This example was helpful for me, but i spotted a strange behaviour.I attached the example file.In the example i bind the local data, and try to group them.As far as i see, if i've more than 10 columns, they'll be mixed.
Thanks for help,
Gabor
0
Hello Gabor,
Hristo Germanov
the Telerik team
I'm not sure if I understand you but I think that you need to sort your data. Could you try to sort it?
Kind regards,Hristo Germanov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gabor
Top achievements
Rank 1
answered on 22 Apr 2013, 09:07 AM
Thanks for the reply!
In my example the datasource looks like this:
{
xAxis: "January",
data: 11,
groupField: 1
},
{
xAxis: "February",
data: 11,
groupField: 1
}
etc.
{
xAxis: "January",
data: 11,
groupField: 2
},
{
xAxis: "February",
data: 11,
groupField: 2
}
etc.
The data is first sorted by groupField, and then xAxis, this means each group represent a year in month.But if you see my example, the months are mixed.
Additional infos, this happens only in chrome, if the datasource contains more than 10 items.
In my example the datasource looks like this:
{
xAxis: "January",
data: 11,
groupField: 1
},
{
xAxis: "February",
data: 11,
groupField: 1
}
etc.
{
xAxis: "January",
data: 11,
groupField: 2
},
{
xAxis: "February",
data: 11,
groupField: 2
}
etc.
The data is first sorted by groupField, and then xAxis, this means each group represent a year in month.But if you see my example, the months are mixed.
Additional infos, this happens only in chrome, if the datasource contains more than 10 items.
0
Hi Gabor,
1) Google Chrome doesn't implement stable sort because of that you will get unsorted array.
2) We doesn't guarantee that the data will be the same after you groupe your data.
You need to sort your data if you want them to be sorted.
Greetings,
Hristo Germanov
the Telerik team
1) Google Chrome doesn't implement stable sort because of that you will get unsorted array.
2) We doesn't guarantee that the data will be the same after you groupe your data.
You need to sort your data if you want them to be sorted.
Greetings,
Hristo Germanov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
osman
Top achievements
Rank 1
answered on 04 Jun 2013, 06:59 AM
<script>
var mydata=[{"name":"Work","data":108404,"mach":"Fongs-3"},{"name":"Reason Late","data":80121,"mach":"Atyc-3"},{"name":"Work","data":2920,"mach":"Then-13"},{"name":"manuel wait","data":138383,"mach":"Then-12"},{"name":"Work","data":174811,"mach":"Loris Bellini 2"},{"name":"Work","data":39887,"mach":"Loris Bellini 1"},{"name":"manuel wait","data":761119041,"mach":"Loris Bellini 1"}];$('#stacked').kendoChart({
dataSource:{
data:mydata,
group: {
field:"name",
dir:"asc"
},
schema:{
model:{
fields:{
"name":{"type":"string"},
"data":{"type":"number"},
"mach":{"type":"string"}
}
}
}
},
seriesDefaults : {
stack:true,
gap:0.1
},
series: [{type:"bar", field:"data", stack:true}],
categoryAxis: {
field: "mach"
}
});
</script>
how can i can stack name according data for each mach ?
0
Hello osman,
Hristo Germanov
Telerik
Can you examine this online demo and tell me if it works for you?
Regards,Hristo Germanov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Cindy
Top achievements
Rank 1
answered on 29 Oct 2013, 08:33 PM
Can you provide example using remote data instead of hard coded value arrays?
MVC model
MVC model
0
Hello Cindy,
Hristo Germanov
Telerik
We haven't such example. Could you please try to build your chart configuration based on your requirements and if you have any questions please tell us?
Regards,Hristo Germanov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!