Multiple Series with Dynamic data

[Craig Broadhead]

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"
    }
    });
 
}

[Iliana Dyankova]

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

[Craig Broadhead]

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?

[Craig Broadhead]

Never mind, I fixed it, I was newing Temp in the wrong place should have been inside the first for loop! DOH!

[Dave Wolf]

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 })

 

            )               

)


[Dave Wolf]

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 })

            )


)

[Anusha]

Hello 

 

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