Update Data Source on a button click event

4 posts, 0 answers
  1. kory
    kory avatar
    14 posts
    Member since:
    Aug 2012

    Posted 06 Dec 2012 Link to this post

    We would like to update a data source when a refresh button is clicked. In my javascript file I have the following declared:

    var seriesData1 = [{"UnitNumber":"1010", "percent":85, "PMTYPE":"ODOMETER", "CompCode":"000-003"}, {"UnitNumber":"1010", "percent":75, "PMTYPE":"Days", "CompCode":"000-005"}];

    I have this defined in my index.html:

    <script>
    function createChart() {
    $("#chart").kendoChart({
    theme: $(document).data("kendoSkin") || "black",
    dataSource: {
    data: seriesData1

    },
    title: {
    text: "PMs Due"
    },
    legend: {
    position: "top"
    },
    seriesDefaults: {
    type: "column"
    },
    series: [
    {
    name: "% Due",
    field: "percent"
    }
    ],
    valueAxis: {
    labels: {
    format: "{0}%"
    }
    },
    categoryAxis: {
    field: "CompCode"
    },
    tooltip: {
    visible: true,
    format: "{0}%"
    }
    });
    }
    </script>

    When I click on the refresh button I am changing the values as follows in my javascript:

    seriesData1 = [{"UnitNumber":"1010", "percent":35, "PMTYPE":"ODOMETER", "CompCode":"000-060"}, {"UnitNumber":"1010", "percent":75, "PMTYPE":"Days", "CompCode":"000-005"}];

    $(".chart").data("kendoChart").redraw();

    All that has changed is the percent and comp code of the first record .

    On first load data is displayed without error however when the button is clicked to redraw the graph, the data is cleared and nothing is updated leaving a blank chart.

    Is there anything else that I have to do to update the data source?

  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 07 Dec 2012 Link to this post

    Hello Kory,

     To properly update the data source you need to use its data method:

    var chart = $("#chart").data("kendoChart");
    var newData = [];
    chart.dataSource.data(newData());
     

    All the best,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. kory
    kory avatar
    14 posts
    Member since:
    Aug 2012

    Posted 07 Dec 2012 Link to this post

    I attempted to integrate the code snippet into my project, but The chart still does not when go is clicked. I have attached the project perhaps you could take a look and check what I'm doing wrong? Line 34 in Hello-world.js has the script suggested. Line 420 of the html document is where the graph starts. If navigating by browser its under reports>Unit PM due. 

    I would really appreciate your looking at it. 

    Thanks in advance,

    KENDO ROCKS!
  4. T. Tsonev
    Admin
    T. Tsonev avatar
    2815 posts

    Posted 10 Dec 2012 Link to this post

    Hi,

    It appears that you're updating the data source with an array of numbers. The data source expects objects of the same type as the initial result.

    For example:
    var newData = [{
        CompCode: "A",
        percent: 42
    }, {
        ....
    }];

    chart.dataSource.data(newData);


    I hope this helps. Kind regards,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top