Search code examples
kendo-uikendo-datasourcekendo-chart

How to display data point with various fields in kendo chart?


I want to display all data point in a tooltip. My data have 2 series, a series have 2 points, a point have 3 fields(value , base and date)

I try this http://trykendoui.telerik.com/OCeB but the x-axis are repeated

If there is solution i would like use datasource


Solution

  • Usually the x values in a series should not repeat, you have two options to fix your chart:

    Option 1: Define both series' values on each datapoint

            var internetUsers = [
            {
              "S1Value" : 1,
              "S1base" : 2,
              "S2Value" : 3,
              "S2base" : 2,
              "date" : 2011
            },
            {
              "S1Value" : 5,
              "S1base" : 6,
              "S2Value" : 4,
              "S2base" : 7,              
              "date" : 2013
            },
          ]
    

    and define a tooltip for each:

               series: [{
                    field: "S1Value",
                    name: "United States", 
                    tooltip: {
                      visible: true,
                      background: "#FFFFFF",
                      template:
                        "#= series.name # <br /> " +
                            "Fecha = #= category # <br /> " +
                            "Valor = #= value # <br/> " +
                            "Base = #= dataItem.S1base # ",
                      format: "n2",
                }
                },{
                    field: "S2Value",
                    name: "Mexico", 
                      tooltip: {
                      visible: true,
                      background: "#FFFFFF",
                      template:
                        "#= series.name # <br /> " +
                            "Fecha = #= category # <br /> " +
                            "Valor = #= value # <br/> " +
                            "Base = #= dataItem.S1base # ",
                      format: "n2",
                }
                }
    

    http://trykendoui.telerik.com/OCeB/2

    Option 2:

    Split your series into two:

            var internetUsersS1 = [
            {
              "S1" : 1,
              "base" : 2,
              "date" : 2011
            },
            {
              "S1" : 5,
              "base" : 6,
              "date" : 2013
            }
          ]
          var internetUsersS2 = [
              {
              "S2" : 3,
              "base" : 2,
              "date" : 2011
    
    
            },
              {
              "S2" : 4,
              "base" : 7,
              "date" : 2013
            }
          ]
    

    ...now give each series it's own datasource:

     series: [{
                    data: internetUsersS1,
                    field: "S1",
                    name: "United States"
                },{
                    data: internetUsersS2,
                    field: "S2",
                    name: "Mexico"
                }
                ]
    

    http://trykendoui.telerik.com/OCeB/3