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

Question

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

Answer 1

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