Drill down work around!

[Stroika]

Hi,
MVC + kendo
when i select the value from ddl the first chart get data in perfect way
but when i use the chart event its give me error in js 

please any advice  
 
thanks
omar

 <div id="example" >
             <label for="Mun">Mun:</label>
                <input id="Mun"/>
            <div class="chart-wrapper">
            <div id="chart"></div>
            <div id="BarChart"></div> 


            </div>
            <script>

                var transport = {
                    read: {
                        url: "@Url.Action("Read", "Plot")", 
                         type: "POST" 
                    }
                };
                var Muntransport = {
                    read: {
                        url: "@Url.Action("ReadMun", "Plot")", 
                         type: "POST" 
                    }
                };


                     var ReadByLandUsetransport = {
                    read: {
                        url: "@Url.Action("ReadByLandUse", "Plot")", 
                         type: "POST" 
                    }
                };




              
              
                   var PlotByLandUseDataSource = new kendo.data.DataSource({
                    transport: ReadByLandUsetransport                                    
                         
                });
              


                var MunDataSource = new kendo.data.DataSource({
                    transport: Muntransport,
                    sort: {
                        field: "MUNICIPALITYNAME_E",
                        dir: "asc"
                    }
                });
                var PlotDataSource = new kendo.data.DataSource({
                        transport: transport
                         
                    });


                function filterMun() {
                   var dropdownlist = $("#Mun").data("kendoDropDownList");
                   var value = dropdownlist.value();
                     PlotDataSource.filter([
                    
                    {field: "MUNICIPALITYNAME_E",operator: "equals", value:value}
                    
                    ]);
                } 


                   function filterLandUse(e) {
                   PlotByLandUseDataSource.filter([
                    
                    {field: "MAIN_LANDUSE_E",operator: "equals", value:e.category}
                    
                    ]);

                }

         
                      function createChart() {
                      
                        $("#chart").kendoChart({
                        theme: $(document).data("kendoSkin") || "metro",
                        dataSource: PlotDataSource,
                        autoBind: false,                  
                        title: {
                            text: "Elms Application Count Per municibality! "
                        },
                        legend: {
                            position:"bottom"
                        },
                        seriesDefaults: {
                          labels: {
                                visible: true,
                                 format: "{0:N0}"
                            }
                           
                        },
                        series: [{
                            type: "pie",
                            field: "PLOTCOUNTS",
                            categoryField: "MAIN_LANDUSE_E"
                        }],
                        tooltip: {
                            visible: true,
                            format: "{0:No}"
                        },
                        seriesClick: filterLandUse


                    });
                    }


                    function createSubLanduseChart() {
                      
                        $("#Barchart").kendoChart({
                        theme: $(document).data("kendoSkin") || "Metro",
                        dataSource: PlotByLandUseDataSource,
                        autoBind: false,                  
                        title: {
                            text: "Elms Sub Land use! "
                        },
                        legend: {
                            position:"bottom"
                        },
                        seriesDefaults: {
                          labels: {
                                visible: true,
                                 format: "{0:N0}"
                            }
                           
                        },
                        series: [{
                            type: "column",
                            field: "AREAGROUP",
                            categoryField: "SUB_LANDUSE_E"
                        }],
                        tooltip: {
                            visible: true,
                            format: "{0:No}"
                        }


                    });
                    }





                $(document).ready(function() {
                    $("#Mun")
                    .val("Abu Dhabi")
                    .kendoDropDownList({
                            dataSource: MunDataSource,
                            dataTextField: "MUNICIPALITYNAME_E",
                            dataValueField: "MUNICIPALITYNAME_E",
                            change: filterMun
                        });


                 createChart();
                    createBChart();
                    filterMun();                  
  
                       $("#example").bind("kendo:skinChange", function(e) {
                        createChart();
                        createBChart();
                        // 
                        plotDataSource.read();
                        PlotByLandUseDataSource.read();
        
                    });

                });
               </script>
        </div>

[Iliana Dyankova]

Hello Omar,

In the code snippet that you have sent I found the following mistakes:

• When you initialize the second chart and call the kendoChart() function, you use $("#Barchart").kendoChart, but in the HTML the ID of this element is <div id="BarChart">;
   
• In $(document).ready(function() you call createBChart() function, but I can not see where it is defined.

In case this does not resolve the problem, please send a full runnable project that could be examined in details.

Kind regards,
Iliana Nikolova
the Telerik team