Refresh teszt

by whoamiwho

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<h1>Chart Refresh Test</h1>
<div id="cbs">
    <label for="cb1">Data1</label>
    <input type="checkbox" id="cb1" checked="checked"/>
    
    <label for="cb2">Data2</label>
    <input type="checkbox" id="cb1" checked="checked"/><br/>
</div>
<button id="refresh">Refresh</button>
<div id="chart"></div>

<div id="log"><div>

CSS

h1 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

div#chart {
    width: 480px;
    height: 300px;
}

JavaScript

var datas = [
    {
    "value1": 10,
    "value2": 5,
    "category": 1},
{
    "value1": 8,
    "value2": 7,
    "category": 2},
{
    "value1": 9,
    "value2": 4,
    "category": 3},
{
    "value1": 7,
    "value2": 5,
    "category": 4},
{
    "value1": 11,
    "value2": 6,
    "category": 5}
],
    ds = new kendo.data.DataSource({
        data: datas
    });

var mychart = $("#chart").kendoChart({
    theme: $(document).data("kendoSkin") || "default",
    legend: {
        position: "bottom"
    },
    dataSource: ds,
    seriesDefaults: {
        type: "line"
    },
    series: [{
        field: "value1",
        name: "data1"},
    {
        field: "value2",
        name: "data2"

        }],
    categoryAxis: {
        field: "category"
    }
}).data("kendoChart");

$("#refresh").click(function() {
    var costumSeries = [];
    
    if ($("input:first:checked","#cbs").length == 1) {
        costumSeries.push({
            field: "value1",
            name: "data_1"
        });
    }

    if ($("input:last:checked","#cbs").length == 1) {
        costumSeries.push({
            field: "value2",
            name: "data_2"
        });
    }
    mychart.options.title.text = $("#title_text").val();
    mychart.options.series = costumSeries;
    mychart.refresh();
});