This is a migrated thread and some comments may be shown as answers.

Example of Stacked Bar Chart using Remote Data

9 Answers 918 Views
Charts
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Ahmed
Top achievements
Rank 1
Ahmed asked on 29 Mar 2012, 11:58 AM
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!

9 Answers, 1 is accepted

Sort by
0
Hristo Germanov
Telerik team
answered on 29 Mar 2012, 04:10 PM
Hello Ahmed Anwar,

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.

All the best,
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
0
Hristo Germanov
Telerik team
answered on 22 Apr 2013, 08:37 AM
Hello Gabor,

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.
0
Hristo Germanov
Telerik team
answered on 22 Apr 2013, 01:41 PM
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
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
Hristo Germanov
Telerik team
answered on 06 Jun 2013, 06:47 AM
Hello osman,

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
0
Hristo Germanov
Telerik team
answered on 01 Nov 2013, 12:06 PM
Hello Cindy,

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!
Tags
Charts
Asked by
Ahmed
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
Gabor
Top achievements
Rank 1
osman
Top achievements
Rank 1
Cindy
Top achievements
Rank 1
Share this question
or