Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

how to filter graph with outside selector

6 Answers 505 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Amit
Top achievements
Rank 1
Amit asked on 07 Nov 2016, 11:39 AM

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>

6 Answers, 1 is accepted

Sort by
0
Amit
Top achievements
Rank 1
answered on 08 Nov 2016, 08:12 AM

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

0
Iliana Dyankova
Telerik team
answered on 09 Nov 2016, 08:41 AM
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.
 
0
Jairo
Top achievements
Rank 1
Veteran
answered on 11 Jun 2020, 10:40 PM
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
0
Silviya Stoyanova
Telerik team
answered on 15 Jun 2020, 01:24 PM

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.
0
Jairo
Top achievements
Rank 1
Veteran
answered on 16 Jun 2020, 09:42 PM
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
0
Silviya Stoyanova
Telerik team
answered on 18 Jun 2020, 01:54 PM

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.
Tags
Charts
Asked by
Amit
Top achievements
Rank 1
Answers by
Amit
Top achievements
Rank 1
Iliana Dyankova
Telerik team
Jairo
Top achievements
Rank 1
Veteran
Silviya Stoyanova
Telerik team
Share this question
or