How to aggregate the data

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

    Posted 07 Nov Link to this post

    Hi All,

    I have a bar chart which has month's in the category axis and 2 metrics in the other axis. The problem which I am facing is that  the month data are not aggregating.

    Here is the code which i have.From this,it is clear that i am getting extra "Jan" at the category axis which i don't want.I want that value to be aggregated in the same "Jan" which is present first. How can i achieve this?

    Kindly help me fix this.

    <!DOCTYPE html>
    <html>
    <head>
        <base href="http://demos.telerik.com/kendo-ui/bar-charts/index">
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.moonlight.min.css" />
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.moonlight.mobile.min.css" />

        <script src="//kendo.cdn.telerik.com/2016.3.1028/js/jquery.min.js"></script>
        <script src="//kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
    </head>
    <body>

      <div id="example">
        <div class="demo-section0 k-content wide">
           <div>
              <button id="show_col1" class="k-button" clicked="true" > Total Visits</button>
              <button id="hide_col1" class="k-button">Unique Visitors</button>
          </div>
          <div id="tabstrip">
            <ul>
              <li class="k-state-active">Quarterly</li>
              <li>Monthly</li>
              <li>Weekly</li>
            </ul>
            
        <div class="demo-section k-content wide">
            <div id="chart"></div>
        </div>            
            <div class="demo-section2 k-content wide">
            <div id="chart2"></div>
        </div> 
            <div> Weekly Content</div>
          </div>
        </div>
                

        <script>
      
     function createChart() {
               $("#chart").kendoChart({
                    title: {
                        text: "Site Visitors Stats \n /thousands/"
                    },
                    legend: {
                        visible: false
                    },
                    seriesDefaults: {
                        type: "bar"
                    },
                    series: [{
                        name: "Total Visits",
                        data: [250000, 324000],
                      
                    }, {
                        name: "Unique visitors",
                        data: [235000, 298000]
                    }],
                    valueAxis: {
                        max: 350000,
                        line: {
                            visible: false
                        },
                        minorGridLines: {
                            visible: true
                        },
                        labels: {
                            rotation: "auto"
                        }
                    },
                    categoryAxis: {
                        categories: ["Q1", "Q2", "Q3", "Q4"],
                        majorGridLines: {
                            visible: false
                        }
                    },
                    tooltip: {
                        visible: true,
                        template: "#= series.name #: #= value #"
                    }
                });
              
              $("#show_col1").on("click", function() {
                var chart = $("#chart").data("kendoChart");
        chart.options.series[1].visible = false;
                chart.options.series[0].visible = true;
                chart.refresh();
       
        
    });

    $("#hide_col1").on("click", function() {
      var chart = $("#chart").data("kendoChart");
         chart.options.series[0].visible = false
         chart.options.series[1].visible = true;
                chart.refresh();
        
    });
            }

               function createChart2() {
               $("#chart2").kendoChart({
                    title: {
                        text: "Site Visitors Stats \n /thousands/"
                    },
                    legend: {
                        visible: false
                    },
                    seriesDefaults: {
                        type: "bar"
                    },
                    series: [{
                        name: "Total Visits",
                        data: [56000, 63000, 74000, 91000, 117000, 138000,10000],
                      
                    }, {
                        name: "Unique visitors",
                        data: [52000, 34000, 23000, 48000, 67000, 83000,10000]
                    }],
                    valueAxis: {
                        max: 140000,
                        line: {
                            visible: false
                        },
                        minorGridLines: {
                            visible: true
                        },
                        labels: {
                            rotation: "auto"
                        }
                    },
                    categoryAxis: {
                        categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jan"],
                        majorGridLines: {
                            visible: false
                        }
                    },
                    tooltip: {
                        visible: true,
                        template: "#= series.name #: #= value #"
                    }
                });
              
              $("#show_col1").on("click", function() {
                var chart = $("#chart2").data("kendoChart");
        chart.options.series[1].visible = false;
                chart.options.series[0].visible = true;
                chart.refresh();
       
        
    });

    $("#hide_col1").on("click", function() {
      var chart = $("#chart2").data("kendoChart");
         chart.options.series[0].visible = false
         chart.options.series[1].visible = true;
                chart.refresh();
        
    });
            }
          
           
          
        $(document).ready(function() {
                        $("#tabstrip").kendoTabStrip({
                            animation:  {
                                open: {
                                    effects: "fadeIn"
                                }
                            }
                        });
                    });
          
           $(document).ready(createChart2);
            $(document).bind("kendo:skinChange", createChart2);
           $(document).ready(createChart);
            $(document).bind("kendo:skinChange", createChart);
        </script>
               
      </div>



    </body>
    </html>

     

    Thanks,

    Lakshman

  2. Lakshman
    Lakshman avatar
    7 posts
    Member since:
    Oct 2016

    Posted 07 Nov in reply to Lakshman Link to this post

    Here is the another script which i was trying to run but not getting the aggregating sum values for the month.

    <!doCTYpe html> 
    <html> 
    <head> 
    <link href="kendo.metro.min.css" rel="stylesheet"> 
    <link href="kendo.common.min.css" rel="stylesheet"> 




    <script src="jquery.min.js"></script>
    <script src="kendo.all.min.js"></script>


    </head>
    <body>
    <div id="example">
        <div class="demo-section k-content wide">
            <div id="chart"></div>
        </div>
        <script>
    var monthdata = [
    {"month":"Jan","wordpress":"5","codeigniter":"5","highcharts":"8"},
    {"month":"Feb","wordpress":"5","codeigniter":"2","highcharts":"8"},
    {"month":"Mar","wordpress":"6","codeigniter":"3","highcharts":"9"},
    {"month":"Apr","wordpress":"2","codeigniter":"6","highcharts":"6"},
    {"month":"May","wordpress":"5","codeigniter":"7","highcharts":"7"},
    {"month":"Jun","wordpress":"7","codeigniter":"1","highcharts":"10"},
    {"month":"Jul","wordpress":"2","codeigniter":"2","highcharts":"9"},
    {"month":"Aug","wordpress":"1","codeigniter":"6","highcharts":"7"},
    {"month":"Sep","wordpress":"6","codeigniter":"6","highcharts":"6"},
    {"month":"Oct","wordpress":"7","codeigniter":"4","highcharts":"9"},
    {"month":"Nov","wordpress":"3","codeigniter":"6","highcharts":"8"},
    {"month":"Dec","wordpress":"4","codeigniter":"3","highcharts":"4"},
    {"month":"Jan","wordpress":"5","codeigniter":"6","highcharts":"7"}];

    var sharedDataSource = new kendo.data.DataSource({
        data: monthdata,
    group:{
    field: "month",
    aggregates:[
    {field: "wordpress" , aggregate:"sum"},
    {field: "codeigniter" , aggregate:"sum"},
    {field: "highcharts" , aggregate:"sum"}

    ]


    },


    });
    sharedDataSource.read();


    var seriesA = [],
        seriesB = [],
    seriesC = [],
        categories = [],
        items = sharedDataSource.view(),
        length = items.length,
        item;


    //create the chart series  
    for (var i = 0; i < length; i++) {
        item = items[i];

        //    This is what I want to do..
        //seriesA[0].push(item.aggregates.len.sum);
        //seriesA[1].push(item.aggregates.wid.sum);
        //     or
        //seriesA.push([{item.aggregates.len.sum},{item.aggregates.wid.sum}]);


        seriesA.push(item.aggregates.wordpress.sum);
        seriesB.push(item.aggregates.codeigniter.sum);
        seriesC.push(item.aggregates.highcharts.sum);
    categories.push(item.value);
    }
    $(document).ready(function() {

                $("#chart").kendoChart({
    dataSource: sharedDataSource,
                    title: {
                        text: "Chart Rating"
                    },
                    legend: {
                        visible: false
                    },
                    seriesDefaults: {
                        type: "bar",

                    },
                    series: [
    {
                        name: "wordpress",
                       data: seriesA,
    color: "#3CB371"},
    {
    name: "codeigniter",
                        data: seriesB,
    color: "#FFA500"
    },
    {
    name: "highcharts",
                        data: seriesC,
    color: "#FF0000"
                    }],
                    valueAxis: {

                        line: {
                            visible: true
                        },
                        minorGridLines: {
                            visible: true
                        }
                    },
                    categoryAxis: {
                        categories: categories,
                        majorGridLines: {
                            visible: false
                        }
                    },
                    tooltip: {
                        visible: true,
                        template: "#= series.name #: #= value #"
                    }
                });
    });



        </script>
    </div>




    </body>
    </html>

    could any one help me fix this issue.

    Thanks,

    Lakshman

  3. Kendo UI is VS 2017 Ready
  4. Lakshman
    Lakshman avatar
    7 posts
    Member since:
    Oct 2016

    Posted 07 Nov in reply to Lakshman Link to this post

    For the second script,we got the  output but the thing is we are not getting the months in order(i.e Jan,Feb....)

    schema:
    {
    model:{
    fields:{

    wordpress: { type: "number"},
    codeigniter: { type: "number"},
    highcharts: { type: "number"},


    }
    }
    }

     

    Thanks,

    Lakshman

  5. Lakshman
    Lakshman avatar
    7 posts
    Member since:
    Oct 2016

    Posted 07 Nov in reply to Lakshman Link to this post

    The other issue which we found was that when we added the static data then the result is shown as expected but when we try to bind the data from the database the graph doesn't show up.

    transport: {
           read: {
               url: "http://localhost/Project_Demo/Kendobardata.php",
               dataType: "json"
           }
       },

     

    Is there anything that we have missed?

    Thanks,

    Lakshman

  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 08 Nov Link to this post

    Hello Lakshman,

    Up to the questions
    - ...From this,it is clear that i am getting extra "Jan" at the category axis which i don't want...
    This outcome is expected and is caused by you have defined the category "Jan" twice (dojo). Keep in mind that when binding to arrays, the values will be plotted as defined in these arrays: 

    http://docs.telerik.com/kendo-ui/controls/charts/data-binding

    -... Here is the another script which i was trying to run but not getting the aggregating sum values for the month....
    If I understand correctly, you would like to display the total of all series in a particular category? If this is the case you could follow the approach suggested in this how-to: 

    http://docs.telerik.com/kendo-ui/controls/charts/how-to/show-stack-total

    - ...For the second script,we got the  output but the thing is we are not getting the months in order(i.e Jan,Feb....)...
    In order to get months in a chronological order you should use date axis

    http://docs.telerik.com/kendo-ui/controls/charts/date-series

    http://demos.telerik.com/kendo-ui/bar-charts/date-axis

    - ...The other issue which we found was that when we added the static data then the result is shown as expected but when we try to bind the data from the database the graph doesn't show up...
    Take a look at the following documentation section - it describes how to bind data to Kendo UI Chart: 

    http://docs.telerik.com/kendo-ui/controls/charts/data-binding

    On a side note, it is accepted to post different questions in separate threads - this will make tracking / handling your support history much easier. If you have further questions, please open new support conversations for each of them.

    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
Kendo UI is VS 2017 Ready