How to get Dynamic series name with respective data(field)

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

    Posted 12 Oct Link to this post

    Hi all,

    I am very new in kendo UI.

    I am trying to create a stacked bar graph using remote connection and my code is as below:

    <!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 sharedDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "http://localhost/Project_Demo/Kendobardata.php",
                dataType: "json"
            }
        },
    schema: {
    data: "data",
    model: {

    fields: {

    wordpress: {type: "number"},
    month: {type: "string"}
    }
    }
    }
    });
            
                $("#chart").kendoChart({
    dataSource: sharedDataSource,
                    title: {
                        text: "Charts Rating"
                    },
                    legend: {
                        visible: false
                    },
                    seriesDefaults: {
                        type: "bar",
                        stack: true
                    },
                    series: [{
                        name: "wordpress",
                        field: "wordpress",
    color: "#3CB371"},
    {
    name: "codeigniter",
                        field: "codeigniter",
    color: "#FFA500"
    },
    {
    name: "highcharts",
                        field: "highcharts",
    color: "#FF0000"
                    }],
                    valueAxis: {
                        
                        line: {
                            visible: true
                        },
                        minorGridLines: {
                            visible: true
                        }
                    },
                    categoryAxis: {
                        field: "month",
                        majorGridLines: {
                            visible: false
                        }
                    },
                    tooltip: {
                        visible: true,
                        template: "#= series.name #: #= value #"
                    }
                });
           

        </script>
    </div>


    </body>
    </html>

     

    I am finding a difficulty to get the series "name" as dynamic which will come from database.

    let say example:

    There are 10 "appointment owner", their respective "appointment count" values and "months" are in json format.

    I want to create a stacked bar graph in that month will be on category axis and in series appointment owner and appointment count should be their.

    Kindly please help me to achieve this.

    Thanks,

    Amit

  2. Vessy
    Admin
    Vessy avatar
    1382 posts

    Posted 12 Oct Link to this post

    Hi Amit,

    I am not sure I understand properly the exact issue you are facing. Basically, you can stack the series in the chart by setting the seriesDefaults.stack property to true like in this demo. A sample with the updated version of the provided by you code can be tested here:
    http://dojo.telerik.com/@veselinar/oYIxI

    If this is not the case - can you elaborate a bit on the scenario you want to achieve and which is the configuration that prevents you from that?

    Regards,
    Vessy
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Amit
    Amit avatar
    5 posts
    Member since:
    Oct 2016

    Posted 13 Oct in reply to Vessy Link to this post

    Hi Vessy,

    Sorry for not making you clear.
    Basically I want to fetch the series name from database instead of giving a static name, like in my example i have given (  name: "wordpress", name: "codeigniter", name: "highcharts", ).

    That's why i had given example that if there are 10 "appointment owner" then i want to display the 10 appointment owner "name" in series dynamically instead of static, because that data will be coming from database.

    I hope that this time I have made clear with my issue.

  5. Vessy
    Admin
    Vessy avatar
    1382 posts

    Posted 14 Oct Link to this post

    Hi Amit,

    Thank you for the clarification, Amit. The dynamic setting of the series names can be achieved by implementing grouping and utilizing the group's template functionality.  This can be done by configuring the group property of the DataSource to the name of the column which will be the criteria for grouping the chart series:

    series: [{
        type: "line",
        field: "close",
        name: "#= group.value # (close)"
    }]


    You can examine the following two live demos, demonstrating similar to the described approach:
    http://demos.telerik.com/kendo-ui/line-charts/grouped-data

    http://demos.telerik.com/kendo-ui/bar-charts/grouped-stacked-bar


    Regards,
    Vessy
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready