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

Multiple Series with Dynamic data

6 Answers 1104 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Craig Broadhead
Top achievements
Rank 1
Craig Broadhead asked on 23 Mar 2012, 04:10 PM
Hi,

Im trying to get a bar chart working with multiple series on it, but my series data is dynamic. I am getting nothing showing on the chart, and there don't appear to be any examples in the documentation of how to do it when you have dynamic series data.


Can somebody tell me where I am going wrong!?!?

function DisplayGroupVertBarChart()
{

var chartSeries = [];       

    for (var Counter = 0; Counter < QuestionResponseList.length; Counter++) {
    var group = QuestionResponseList[Counter];
    chartSeries.push({
        data: group.ResponseList,
        field: group.ResponseList.nDistinctCounter,
        name: group.ResponseList.sAnswerText
    });
}

$("#chart").kendoChart({
        title: {
            text: "Responses to Question - " + QuestionList[LoadedQuestionCounter].sItemText
        },
        tooltip: {
            visible: true,
        },
         dataSource: {
            data: QuestionResponseList
        },
         series: [chartSeries
         ],
        seriesDefaults: {
            labels: {
                visible: true,
                format: "{0}"
                    }
         },
    categoryAxis: {
        field: "sAnswerText"
    }
    });
 
}

6 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 26 Mar 2012, 12:39 PM
Hi Craig,

I examined your code and I believe the problem is caused by the definition of your data. Basically, there are two ways in Kendo UI DataViz to declare the data for Charts:
  1. The Chart DataSource could be bind to an array of objects. For example: 
    var items = [{
        "value": 1,
        "categoryField": "2",
        "field": "value"
            },{
        "value": 2,
        "categoryField": "3",
        "field": "value"
            },{
        "value": 3,
        "categoryField": "4",
        "field": "value"
            }];
        var chartSeries = [];      
        for (var Counter = 0; Counter < items.length; Counter++) {
            var item = items[Counter];
            chartSeries.push({
            field: item.field,
            name: "bar" + Counter
                });
        }
    function createChart() {
     $("#chart").kendoChart({
      title: {
           text: "Responses to Question - "
            },
        dataSource: {
            data: items
        },
        series: chartSeries,
        ....
            });
    }
  2. The Chart Series could be directly bind to an array of objects. For example: 
  3. var chartSeries = [];      
    for (var Counter = 0; Counter < 3; Counter++) {
        chartSeries.push({
        data: [1,2,3],
        name: "bar" + Counter
        });
    }
    function createChart() {
       $("#chart").kendoChart({ 
        title: {
          text: "Responses to Question - "
        }, 
        series: chartSeries,
        categoryAxis: {
          categories: [1,2,3]
        },
            ...            
      });
    }

I hope this helps. In case I missed something please provide a sample project that could be examined in details.
 

All the best,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Craig Broadhead
Top achievements
Rank 1
answered on 04 Apr 2012, 09:37 AM
Hi Iliana I have managed to get it working if I hard code the data length like below:

 data: [group.ResponseList[0].nDistinctCounter, group.ResponseList[1].nDistinctCounter],

but my data is of variable length, so i tried to put it into an array like so:

var Temp = new Array();

for (var Counter = 0; Counter < QuestionResponseList.length; Counter++) {
   
    var group = QuestionResponseList[Counter];
    
    for(var RespCounter = 0; RespCounter < group.ResponseList.length; RespCounter ++)
    {
        Temp[RespCounter] = group.ResponseList[RespCounter].nDistinctCounter;
    }

    chartSeries.push({
        data: Temp,
        name: group.sSubItemText        
    });

}
Then Put the array as the data field, but if i do this then It is only the last Questions results that appear.

I'm pretty sure its something simple I have done wrong and i'm nearly there, can you point me as to what my error is?
0
Craig Broadhead
Top achievements
Rank 1
answered on 04 Apr 2012, 09:52 AM
Never mind, I fixed it, I was newing Temp in the wrong place should have been inside the first for loop! DOH!
0
Dave Wolf
Top achievements
Rank 1
Iron
answered on 25 Oct 2013, 03:20 PM
I'm trying to do this with MVC by passing an array of integers to the view.  It keeps creating an empty chart.  It works great if I pass it a single integer, please see my code below.  What am I doing wrong?

Controller:
public ActionResult Advertising()
{
 
    List<TEC.Models.AdvertisingModel> models=new List<TEC.Models.AdvertisingModel>();
     
    TEC.Models.AdvertisingModel newAdvertisingModel = new TEC.Models.AdvertisingModel();
    newAdvertisingModel.values=new List<int> {2000,2500,3000};

 
    models.Add(newAdvertisingModel);
     
     
    return View(models);
}
Model:
public class AdvertisingModel
{
    public string name { get; set; }
 
    public string stackName { get; set; }
 
 
    public List<int> values { get; set; }
 
 
}


View:
@(Html.Kendo().Chart(Model)
    .Name("new")
    .Title("test")
    .Series(series =>
    {       
        series.Column(model => model.values).Name("test").Stack("Stack1");
 
    })
        .CategoryAxis(axis => axis
            .Categories(new int[] { 2012, 2013, 2014 })
 
            )               
)
0
Dave Wolf
Top achievements
Rank 1
Iron
answered on 25 Oct 2013, 04:32 PM
Never mind I found the answer, I just needed to change my view to this

@(Html.Kendo().Chart(Model)
    .Name("new")
    .Title("test")
    .Series(series =>
    {
        foreach (var item in Model)
        {
 
            series.Column(item.data).Name(item.name).Stack(item.stack);
 
        }
        
    })
        .CategoryAxis(axis => axis
            .Categories(new int[] { 2012, 2013, 2014 })
 
            )
             
     
)
0
Anusha
Top achievements
Rank 1
answered on 31 Aug 2015, 11:50 AM

Hello 

 

I tried doing the same but it didnt work. could you please share the mdoel and controller part of this view.

Tags
Charts
Asked by
Craig Broadhead
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Craig Broadhead
Top achievements
Rank 1
Dave Wolf
Top achievements
Rank 1
Iron
Anusha
Top achievements
Rank 1
Share this question
or