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

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

3 Answers 443 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Amit
Top achievements
Rank 1
Amit asked on 12 Oct 2016, 12:36 PM

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

3 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 12 Oct 2016, 03:21 PM
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.
 
0
Amit
Top achievements
Rank 1
answered on 13 Oct 2016, 06:39 AM

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.

0
Vessy
Telerik team
answered on 14 Oct 2016, 10:35 AM
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.
 
Tags
Charts
Asked by
Amit
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Amit
Top achievements
Rank 1
Share this question
or