how to filter graph with outside selector

3 posts, 0 answers
  1. Amit
    Amit avatar
    5 posts
    Member since:
    Oct 2016

    Posted 07 Nov Link to this post

    Hi All,

    I have created a bar chart , now I want to filter that chart with some selector outside the chart.

    I would like to know how to filter the chart data on selecting drop down list( containing Country data).

    Please see my code:

    How do I filter my chart with dropdown selector.

    Kindly Please help me.

    Thanks,

    Amit

    001.<!doCTYpe html>
    002.<html>
    003.<head>
    004.<link href="kendo.metro.min.css" rel="stylesheet">
    005.<link href="kendo.common.min.css" rel="stylesheet">
    006. 
    007. 
    008.<script src="jquery.min.js"></script>
    009.<script src="kendo.all.min.js"></script>
    010. 
    011.</head>
    012.<body>
    013.<div id="example">
    014.    <div class="demo-section k-content wide">
    015.        <div id="chart"></div>

    <label class="category-label" for="category">Search by Country:</label>
                        <input id="country" style="width: 150px"/>

    016.    </div>
    017.    <script>
    018.    var monthdata = [
    019.    {month:"Jan",wordpress:"5",codeigniter:"5",highcharts:"8",country:"USA"},
    020.    {month:"Feb",wordpress:"5",codeigniter:"2",highcharts:"8",country:"India"},
    021.    {month:"Mar",wordpress:"6",codeigniter:"3",highcharts:"9",country:"USA"},
    022.    {month:"Apr",wordpress:"2",codeigniter:"6",highcharts:"6",country:"India"},
    023.    {month:"May",wordpress:"5",codeigniter:"7",highcharts:"7",country:"USA"},
    024.    {month:"Jun",wordpress:"7",codeigniter:"1",highcharts:"10",country:"SA"},
    025.    {month:"Jul",wordpress:"2",codeigniter:"2",highcharts:"9",country:"SA"},
    026.    {month:"Aug",wordpress:"1",codeigniter:"6",highcharts:"7",country:"India"},
    027.    {month:"Sep",wordpress:"6",codeigniter:"6",highcharts:"6",country:"USA"},
    028.    {month:"Oct",wordpress:"7",codeigniter:"4",highcharts:"9",country:"India"},
    029.    {month:"Nov",wordpress:"3",codeigniter:"6",highcharts:"8",country:"USA"},
    030.    {month:"Dec",wordpress:"4",codeigniter:"3",highcharts:"4",country:"SA"},
    031.    {month:"Jan",wordpress:"5",codeigniter:"6",highcharts:"7",country:"USA"}];
    032.     
    033.    var sharedDataSource = new kendo.data.DataSource({
    034.    data: monthdata,
    035.    group:{
    036.        field: "month",
    037.        aggregates:[
    038.        {field: "wordpress" , aggregate:"sum"},
    039.        {field: "codeigniter" , aggregate:"sum"},
    040.        {field: "highcharts" , aggregate:"sum"}
    041.         
    042.        ]
    043.         
    044.         
    045.    },
    046.    schema:
    047.    {
    048.        model:{
    049.        fields:{
    050.             
    051.            wordpress: { type: "number"},
    052.            codeigniter: { type: "number"},
    053.            highcharts: { type: "number"},
    054.             
    055.             
    056.        }
    057.        }
    058.    }
    059.     
    060.     
    061.});
    062.sharedDataSource.read();
    063. 
    064.var seriesA = [],
    065.    seriesB = [],
    066.    seriesC = [],
    067.    categories = [],
    068.    items = sharedDataSource.view(),
    069.    length = items.length,
    070.    item;
    071. 
    072.//create the chart series 
    073.for (var i = 0; i < length; i++) {
    074.    item = items[i];
    075.     
    076.    //    This is what I want to do..
    077.    //seriesA[0].push(item.aggregates.len.sum);
    078.    //seriesA[1].push(item.aggregates.wid.sum);
    079.    //     or
    080.    //seriesA.push([{item.aggregates.len.sum},{item.aggregates.wid.sum}]);
    081.     
    082.     
    083.    seriesA.push(item.aggregates.wordpress.sum);
    084.    seriesB.push(item.aggregates.codeigniter.sum);
    085.    seriesC.push(item.aggregates.highcharts.sum);
    086.    categories.push(item.value);
    087.}
    088.$(document).ready(function() {
    089.         
    090.            $("#chart").kendoChart({
    091.                dataSource: sharedDataSource,
    092.                title: {
    093.                    text: "Chart Rating"
    094.                },
    095.                legend: {
    096.                    visible: false
    097.                },
    098.                seriesDefaults: {
    099.                    type: "bar",
    100.                    stack:true
    101.                },
    102.                series: [
    103.                {
    104.                    name: "wordpress",
    105.                   data: seriesA,
    106.                color: "#3CB371"},
    107.                {
    108.                    name: "codeigniter",
    109.                    data: seriesB,
    110.                color: "#FFA500"
    111.                },
    112.                {
    113.                    name: "highcharts",
    114.                    data: seriesC,
    115.                color: "#FF0000"
    116.                }],
    117.                valueAxis: {
    118.                     
    119.                    line: {
    120.                        visible: true
    121.                    },
    122.                    minorGridLines: {
    123.                        visible: true
    124.                    }
    125.                },
    126.                categoryAxis: {
    127.                    categories: categories,
    128.                    majorGridLines: {
    129.                        visible: false
    130.                    }
    131.                },
    132.                tooltip: {
    133.                    visible: true,
    134.                    template: "#= series.name #: #= value #"
    135.                }
    136.            });

     $("#country").kendoDropDownList({
                            
                            dataTextField: "country",
                            dataValueField: "country",
        optionLabel: "All",
                            dataSource: monthdata
                          
                        });

    137.});
    138.        
    139. 
    140.    </script>
    141.</div>
    142. 
    143. 
    144.</body>
    145.</html>
  2. Amit
    Amit avatar
    5 posts
    Member since:
    Oct 2016

    Posted 08 Nov Link to this post

    Hi Expersts,

    I'm new in this,Kindly please help me, how to bind the kendo charts with outside selectors.Basically how to bind the chart with outside selector to filter the chart value according the selection.

     

    Thanks,

    Amit

  3. Kendo UI is VS 2017 Ready
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 09 Nov Link to this post

    Hi Amit,

    For this scenario I would suggest the following approach: 
    - Bind the chart to a dataSource (currently you are using inline data) - this way when the dataSource is changed (filtered, sorted etc.) the chart will automatically refresh:

    http://docs.telerik.com/kendo-ui/controls/charts/data-binding#bind-series-to-data-source

    - Handle to the DropDownList select event and filter the chart dataSource: 

    http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#events-select

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-filter


    For your convenience below is a modified version of you example: 

    http://dojo.telerik.com/@Iliana/URURA

    Regards,
    Iliana Nikolova
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
Back to Top