how to filter graph with outside selector

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

    Posted 07 Nov 2016 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 2016 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. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 09 Nov 2016 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.
     
  4. Jairo
    Jairo avatar
    6 posts
    Member since:
    Dec 2019

    Posted 11 Jun in reply to Iliana Nikolova Link to this post

    Goodnight the reason for my comment is the example I got is very good for what I have to do. I just want to make the dropdown list multi-select, 1) How do I make the multiple selection drop-down list? 2) how could several parameters be sent to the graph, Thank you Greetings from Colombia
  5. Silviya Stoyanova
    Admin
    Silviya Stoyanova avatar
    66 posts

    Posted 15 Jun Link to this post

    Hello Jairo,

        1. In order to make multiple selections in a drop-down list, I would suggest using the MultiSelect widget and set it as:

           $("#country").kendoMultiSelect({
                placeholder: "Select...",
                dataSource: ["USA", "India", "SA"],
                change: onChange
              });

             2. As you will notice we need to subscribe to the change event of the widget and set the dataSource filter configuration as follow:

    function onChange() {
              var chart = $("#chart").data("kendoChart");
              var values = this.value();
              var ds = chart.dataSource;
              var filter = { logic: "or", filters : [] };
              $.each(values, function(i, v) {
                filter.filters.push({
                  field: 'country',
                  operator: 'eq',
                  value: v           
                });
              })
              ds.filter(filter);
            };

    You will find the modified example here: http://dojo.telerik.com/aGonABeb

    Let me know if you have any questions.

     

    Kind Regards,
    Silviya Stoyanova
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  6. Jairo
    Jairo avatar
    6 posts
    Member since:
    Dec 2019

    Posted 16 Jun in reply to Silviya Stoyanova Link to this post

    Good afternoon
    Your example helped me too much, I have another question
    How to do a kendoMultiSelec cascading MVC

    Thank you very much for your help
    Greetings from Colombia / Bogota
  7. Silviya Stoyanova
    Admin
    Silviya Stoyanova avatar
    66 posts

    Posted 18 Jun Link to this post

    Hello Jairo,

    I am glad to read that you find helpful our support services!

    We have a jQuery article that features cascading MultiSelects:

    https://docs.telerik.com/kendo-ui/controls/editors/multiselect/how-to/cascade/cascading-multiselects

    Since your last question is not directly related to the Chart discussion I would kindly ask you to address any further questions about that in the Kendo UI ASP.NET MVC forums and more specifically in the dedicated MultiSelect forum or in a private support ticket:

    https://www.telerik.com/forums/aspnet-mvc/multi-select/page/3

    Thank you for your understanding!

    Kind Regards,
    Silviya Stoyanova
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top