Chart in kendoUI for drill down

11 posts, 0 answers
  1. jagan
    jagan avatar
    6 posts
    Member since:
    Nov 2010

    Posted 17 Apr 2013 Link to this post

    Hi Team,
     I have a requirement in which on click of kendo chart item, I want to
    drill down and show new values in chart. After clicking any of the bar i want to hit the db with selected
    value, fetch values then bind the kendo chart
    and show the chart .  And also for example I have a
    dropdownlist with different chart types such as bar,bubble,scatter as
    items. on selection change i want to bind the respective chart
    dynamically in kendo UI. Please provide sample code for this
    2 scenarios.
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 18 Apr 2013 Link to this post

    Hi Jagan,

    I am afraid both of your requirements are not supported out-of-the-box in Kendo UI and in order to achieve them you need a custom implementation. I believe the following tips will be useful: 
    • By design Kendo UI Chart accepts data in JSON, JSONP and XML through the DataSource. Hence when such a dataSource is changed (filtered, sorted etc.) the Chart will automatically refresh;
    • For the dril-down functionality you may consider using the Chart's seriesClick event.

    Regards,

    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. osman
    osman avatar
    19 posts
    Member since:
    May 2013

    Posted 31 May 2013 Link to this post

    how can i take scatter chart xfield value when  onseries click? i am not mean e.series.xField . i want something like e.series.xField.value .
  4. osman
    osman avatar
    19 posts
    Member since:
    May 2013

    Posted 31 May 2013 Link to this post

    how can i take scatter chart xfield value when  onseries click? i am not mean e.series.xField . i want something like e.series.xField.value .
  5. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 31 May 2013 Link to this post

    Hi osman,

    The scatter chart have two values and you can reach them with value.x and value.y. This rule is applied for the other charts with multiple values too.

    Regards,
    Hristo Germanov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. osman
    osman avatar
    19 posts
    Member since:
    May 2013

    Posted 31 May 2013 Link to this post

    [{"name":"Weight","data":250,"date":"2013-02-10","JOBORDER":"1","DURATION":1416}]
    this my json data  y field:data,  x field is date , name is weight ,  can i reach JOBORDER FROM KENDO. ANY METHOD ?. WHEN I  CLICK?
    THANKS..
  7. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 04 Jun 2013 Link to this post

    Hi osman,

    We send you e.dataItem as a click event argument and there you can access the original data row. For example: e.dataItem.JOBORDER will return you 1.

    Can you examine our online documentation for more information?

    Regards,
    Hristo Germanov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. osman
    osman avatar
    19 posts
    Member since:
    May 2013

    Posted 04 Jun 2013 Link to this post

    Thanks.

    <script>

    var mydata=[{"name":"Work","data":108404,"mach":"A"},{"name":"Reason Late","data":80121,"mach":"A"},{"name":"Work","data":2920,"mach":"C"},{"name":"manuel wait","data":138383,"mach":"C"},{"name":"Work","data":174811,"mach":E"},{"name":"Work","data":39887,"mach":"F"},{"name":"manuel wait","data":761119041,"mach":"A"}];

    $('#stacked').kendoChart({
    dataSource:{
    data:mydata,
    group: {
    field:"name",
    dir:"asc"
    },
    schema:{
    model:{
    fields:{
    "name":{"type":"string"},
    "data":{"type":"number"},
    "mach":{"type":"string"}
    }
    }
    }
    },
    seriesDefaults : {
    stack:true
    },
    series: [{type:"bar", field:"data", stack:true}],
    categoryAxis: {
    field: "mach"
    }
    });
    </script>

    how can i can stack name  according data for each mach ?

  9. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 06 Jun 2013 Link to this post

    Hello osman,

    Can you examine this online demo and tell me if it works for you?

    Regards,
    Hristo Germanov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. osman
    osman avatar
    19 posts
    Member since:
    May 2013

    Posted 06 Jun 2013 Link to this post

    Its not working . i will not use stack  bar  Thanks.
  11. Chad
    Chad avatar
    2 posts
    Member since:
    Jan 2012

    Posted 16 Aug 2013 Link to this post

    After I upgraded to the lattest version Q2 2013 my seriesClick function no longer contains the entire original data row from the data source, it only cnotains the field defined in the series.  Any ideas?
Back to Top