Populate (Bind) AMcharts 4 from database using jQuery AJAX in ASP.Net

Hi gkoutsiv,

Refer below sample. Bind the data from database instead of temporary list.

HTML

<div id="chartdiv"></div>
<script type="text/javascript" src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script type="text/javascript" src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script type="text/javascript" src="https://cdn.amcharts.com/lib/4/themes/material.js"></script>
<script type="text/javascript" src="https://cdn.amcharts.com/lib/4/lang/de_DE.js"></script>
<script type="text/javascript" src="https://cdn.amcharts.com/lib/4/geodata/germanyLow.js"></script>
<script type="text/javascript" src="https://cdn.amcharts.com/lib/4/fonts/notosans-sc.js"></script>
<script type="text/javascript" src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
    #chartdiv {
        width: 100%;
        height: 500px;
    }
</style>
<script type="text/javascript">
    var data;
    $(function () {
        $.ajax({
            type: "POST",
            url: 'Default.aspx/GetData',
            data: {},
            contentType: "application/json; charset=utf-8",
            dataType: "text",
            success: function (r) {
                data = JSON.parse(r).d;
                am4core.useTheme(am4themes_animated);
                var chart = am4core.create('chartdiv', am4charts.XYChart)
                chart.colors.step = 2;
                chart.legend = new am4charts.Legend()
                chart.legend.position = 'top'
                chart.legend.paddingBottom = 20
                chart.legend.labels.template.maxWidth = 95

                var xAxis = chart.xAxes.push(new am4charts.CategoryAxis())
                xAxis.dataFields.category = 'category'
                xAxis.renderer.cellStartLocation = 0.1
                xAxis.renderer.cellEndLocation = 0.9
                xAxis.renderer.grid.template.location = 0;

                var yAxis = chart.yAxes.push(new am4charts.ValueAxis());
                yAxis.min = 0;

                function createSeries(value, name) {
                    var series = chart.series.push(new am4charts.ColumnSeries())
                    series.dataFields.valueY = value
                    series.dataFields.categoryX = 'category'
                    series.name = name

                    series.events.on("hidden", arrangeColumns);
                    series.events.on("shown", arrangeColumns);

                    var bullet = series.bullets.push(new am4charts.LabelBullet())
                    bullet.interactionsEnabled = false
                    bullet.dy = 30;
                    bullet.label.text = '{valueY}'
                    bullet.label.fill = am4core.color('#ffffff')

                    return series;
                }

                chart.data = data;
                createSeries('first', 'First');
                createSeries('second', 'Second');
                createSeries('third', 'Third');
                createSeries('fourth', 'Fourth');

                function arrangeColumns() {
                    var series = chart.series.getIndex(0);
                    var w = 1 - xAxis.renderer.cellStartLocation - (1 - xAxis.renderer.cellEndLocation);
                    if (series.dataItems.length > 1) {
                        var x0 = xAxis.getX(series.dataItems.getIndex(0), "categoryX");
                        var x1 = xAxis.getX(series.dataItems.getIndex(1), "categoryX");
                        var delta = ((x1 - x0) / chart.series.length) * w;
                        if (am4core.isNumber(delta)) {
                            var middle = chart.series.length / 2;

                            var newIndex = 0;
                            chart.series.each(function (series) {
                                if (!series.isHidden && !series.isHiding) {
                                    series.dummyData = newIndex;
                                    newIndex++;
                                }
                                else {
                                    series.dummyData = chart.series.indexOf(series);
                                }
                            })
                            var visibleCount = newIndex;
                            var newMiddle = visibleCount / 2;

                            chart.series.each(function (series) {
                                var trueIndex = chart.series.indexOf(series);
                                var newIndex = series.dummyData;

                                var dx = (newIndex - trueIndex + middle - newMiddle) * delta

                                series.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
                                series.bulletsContainer.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
                            })
                        }
                    }
                }

                arguments.callee;
            }
        });
    })
</script>

Code

C#

[System.Web.Services.WebMethod]
public static List<ChartDetails> GetData()
{
    List<ChartDetails> dataList = new List<ChartDetails>();
    dataList.Add(new ChartDetails { category = "Place #1", first = 22, second = 55, third = 60, fourth = 28 });
    dataList.Add(new ChartDetails { category = "Place #2", first = 30, second = 78, third = 69, fourth = 28 });
    dataList.Add(new ChartDetails { category = "Place #3", first = 27, second = 40, third = 45, fourth = 00 });
    dataList.Add(new ChartDetails { category = "Place #4", first = 50, second = 33, third = 22, fourth = 00 });

    return dataList;
}

public class ChartDetails
{
    public string category { get; set; }
    public int first { get; set; }
    public int second { get; set; }
    public int third { get; set; }
    public int fourth { get; set; }
}

VB.Net

<Services.WebMethod>
Public Shared Function GetData() As List(Of ChartDetails)
    Dim dataList As List(Of ChartDetails) = New List(Of ChartDetails)()
    dataList.Add(New ChartDetails With {.category = "Place #1", .first = 22, .second = 55, .third = 60, .fourth = 28})
    dataList.Add(New ChartDetails With {.category = "Place #2", .first = 30, .second = 78, .third = 69, .fourth = 28})
    dataList.Add(New ChartDetails With {.category = "Place #3", .first = 27, .second = 40, .third = 45, .fourth = 0})
    dataList.Add(New ChartDetails With {.category = "Place #4", .first = 50, .second = 33, .third = 22, .fourth = 0})
    Return dataList
End Function

Public Class ChartDetails
    Public Property category As String
    Public Property first As Integer
    Public Property second As Integer
    Public Property third As Integer
    Public Property fourth As Integer
End Class

Screenshot