This is a migrated thread and some comments may be shown as answers.

how to filter graph with outside selector

6 Answers 620 Views

Charts

This is a migrated thread and some comments may be shown as answers.

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

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.

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.

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