How can one dynamically set field property for Line Chart

1 Answer 50 Views
Charts Data Source
Naima
Top achievements
Rank 1
Iron
Naima asked on 13 Sep 2024, 08:21 PM

I am trying to get my Line Chart to dynamically assert the field text rather than having to explicitly put the field in my remote datasource objects and then state that property as the field in the Line chart series.  

so instead of doing it like 

data = [

{Date: 09/10/2020, English: 88, Math: 99, Science: 45},

{Date: 08/22/2020, English: 76, Math: 90, Science: 95},

{Date: 08/01/2020, English: 70, Math: 80, Science: 75}

]

and LineSeries = [

     {
        field: "English",
        categoryField: "date",
        name: "English",
    },
    {
          field: "Math",
          categoryField: "date",
          name: "Math",
    },
    {
          field: "Science",
          categoryField: "date",
          name: "Science",
     }

]

like in the Line Chart its done in the JQuery Line Chart example to get a seperate line for each subject and a data point for each distinct date. 

Is it possible to instead do

data = [

{Date: 09/10/2020, Subject: "Math", Value: "78" },

{Date: 09/10/2020, Subject: "English", Value: "80" },

{Date: 09/10/2020, Subject: "Science", Value: "65" }

{Date: 08/22/2020, Subject: "Math", Value: "87"},

{Date: 08/22/2020, Subject: "English", Value: "97"},

{Date: 08/22/2020, Subject: "Science", Value: "57"},

]

and something like LineSeries = [ {
        field: "Subject",
        categoryField: "date",
        name: "Subject",
    },
] ? if not is there a seperate way to configure the series to get a seperate line for each subject and a data point for each distinct date?

1 Answer, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 18 Sep 2024, 10:37 AM

Hello Naima,

This can be achieved by grouping the data by "Subject" and dynamically passing the group value to the name of the series:

          $("#chart").kendoChart({
            dataSource: {
              data: data,
              group: {
                field: "Subject"
              },
              schema: {
                model: {
                  fields: {
                    Date: {
                      type: "date"
                    }
                  }
                }
              }
            },
            title: {
              text: "Internet Users in United States"
            },
            series: [
              {
                field: "Value",
                categoryField: "Date",
                name: "#= group.value #"
              }
            ]
          });

Dojo demo: Untitled | Kendo UI Dojo (telerik.com)

Regards,
Nikolay
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Charts Data Source
Asked by
Naima
Top achievements
Rank 1
Iron
Answers by
Nikolay
Telerik team
Share this question
or