Using KendoUI Line graph, I have multiple series of data and I'd like to show in the tooltip additional data pertaining to a single series of data in the tool tip. In this case I want to show the survey count in the tooltip for each product. I also have a market segment that represents the average of all products in the database in which I don't want to show the data. So for Market Segment I don't want to show the Survey Count.

How do I go about doing this?

This link is to my failed jsFiddle Project: http://jsfiddle.net/rodneyhickman/uMTnh/9/

In the jsFiddle project above I get the survey count for the first product they way I want it for product 2, product 3, etc. For the Averages (Market Segment) I don't want to show a survey count. 

My markup:

<div  >
    <div id='chart'  ></div>
</div>

​ My JavaScript:

jQuery(function() {

var myData = [
    {
        "product1": 86.61,
        "product2": 85.23,
        "marketsegment": 80.17,
        "date": "Mar 2011",
        "surveyCountProduct1": "2",
        "surveyCountProduct2": "4"
    },
    {
        "product1": 87.61,
        "product2": 84.23,
        "marketsegment": 81.12,
        "date": "Mar 2011",
        "surveyCountProduct1": "2",
        "surveyCountProduct2": "3"
    },
    {
        "product1": 87.91,
        "product2": 85.53,
        "marketsegment": 81.57,
        "date": "Mar 2011",
        "surveyCountProduct1": "2",
        "surveyCountProduct2": "4"
    },
    {
        "product1": 88.22,
        "product2": 85.23,
        "marketsegment": 81.90,
        "date": "Mar 2011",
        "surveyCountProduct1": "2",
        "surveyCountProduct2": "4"
    },
    {
        "product1": 88.61,
        "product2": 86.13,
        "marketsegment": 79.17,
        "date": "Mar 2011",
        "surveyCountProduct1": "2",
        "surveyCountProduct2": "5"
    }
];

jQuery('#chart').kendoChart({
    title: {
        text: "Overall Score out of 100",
        align: "left",
        font: "18px Arial, Verdana, sans-serif",
        color: "#444"
    },
    seriesDefaults: {
        type: "line",
        missingValues: "interpolate"
    },
    legend: {
        position: "bottom"
    },
    tooltip: {
        visible: true,
        template: "<b>#= series.name #</b><br/>#= dataItem.date #<br/>#= value #<br/>Survey Count= #= dataItem.surveyCountProduct1 #"
    },
    valueAxis: {
        min: 75,
        max: 95,
        plotBands: [{
            from: 75,
            to: 80,
            color: "#f5f5f5"
        },
        {
            from: 85,
            to: 90,
            color: "#f5f5f5"
        },
        {
            from: 95,
            to: 100,
            color: "#f5f5f5"
        }]
    },
    dataSource: {
        data: myData
    },
    series: [
        {
            name: "Some Product 1",
            color: "#004990",
            width: 1,
            field: "product1",
            markers: {
                background: "#004990"
            }
        },
        {
            name: "Some Product 2",
            color: "#8a7967",
            width: 1,
            field: "product2",
            markers: {
                background: "#8a7967"
            }
        },
        {
            name: " Market Segment Average",
            color: "#da7633",
            width: 1,
            field: "marketsegment",
            markers: {
                background: "#da7633"
            }
         }],
         categoryAxis: {
         labels: {
            rotation: -45,
            step: 1,
            skip: 0
        },
        categories: ["Mar", "Apr", "May", "Jun", "Jul"]
        }
    });
});​

Any help would be appreciated.

function () {

$("#click").click(function () {

 var val = document.getElementById('textboxs').value;

 var View = $("#listView").data("kendoListView");

 View.add(val);

});

});

td style="width: 141px">

 <ul id="listView" />

 </td>

 </tr>

 <td>

 <input type="text" id="textboxs" name="textname" />

 <input type="button" id="click" value="Add" />

  </td>