Cannot create property 'datasets' on string with Chart.js

[Corobori]

I am having a go at Charts.js I bumped into an issue when wanting to use the data coming from my .net code.

   <WebMethod()>
Public Shared Function GetChart() As String

    Dim sData As String = ""
    Dim sColor As String = ""
    Dim sLabel As String = ""


    '.... reading my db stuff ....

    Dim sReturn As String = ""
    sReturn = sReturn & " labels: [ "
    sReturn = sReturn & sLabel.Remove(sLabel.Length - 1, 1)
    sReturn = sReturn & " ], "

    sReturn = sReturn & " datasets: [{   data: ["
    sReturn = sReturn & sData.Remove(sData.Length - 1, 1)
    sReturn = sReturn & " ], "
    sReturn = sReturn & "  backgroundColor: [ "
    sReturn = sReturn & sColor.Remove(sColor.Length - 1, 1)
    sReturn = sReturn & " ] "
    sReturn = sReturn & " }] "

    Return sReturn

End Function

On the client side when using this

<script type="text/javascript">
$(function () {
LoadChart();

});
function LoadChart() {
   
    var ctx = document.getElementById("chart-area").getContext('2d');


 $.ajax({
    type: "POST",
    url: "_TempEntrada.aspx/GetChart",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (r) {
       var config = {
            type: 'doughnut',
            data: r.d,
            options: {
                responsive: true,
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'Chart.js Doughnut Chart'
                },
                animation: {
                    animateScale: true,
                    animateRotate: true
                }
            }
        };

        var myDoughnutChart = new Chart(ctx, config);
       
       
      
    },
    failure: function (response) {
        alert('There was an error.');
    }
});
}
</script>    

I am getting this error: Chart.bundle.js:8152 Uncaught TypeError: Cannot create property ‘datasets’ on string ’ labels: [ “1 Empresa”,“2 Servicio Público”,“3 Particular” ], datasets: [{ data: [8,1,1 ], backgroundColor: [ “#41F22B”,“#41F22B”,“#41F22B” ] }] ’
at initConfig (Chart.bundle.js:8152)

Changing “data: r.d,” by the data I am getting from the server it works fine. I tried returning with or without {} and it didn’t make any difference

data: {labels: ["1 Empresa", "2 Servicio Público", "3 Particular"], datasets: [{ data: [8, 1, 1], backgroundColor: ["#8215C8", "#8215C8", "#8215C8"] }] },

[Corobori]

I have fixed my issue

Here is the new server code:

<WebMethod()>
Public Shared Function GetChart() As List(Of Object)

    Dim iData As New List(Of Integer)()
    Dim sColor As New List(Of String)()
    Dim sLabel As New List(Of String)()
    Dim chartData As New List(Of Object)()

    Dim objConn As New SqlConnection(ConfigurationManager.ConnectionStrings("conProcase").ToString)
    objConn.Open()

    Try

       '... my db stuff

        Do While objRdr.Read()
            iData.Add(Convert.ToInt32(objRdr("iCount")))
            sColor.Add([String].Format("#{0:X6}", New Random().Next(&H1000000)))
            sLabel.Add(objRdr("Co_Desc"))

        Loop

        objRdr.Close()


    Catch ex As Exception


    Finally

        If Not IsNothing(objConn) Then
            objConn.Close()
            objConn = Nothing
        End If

    End Try

    chartData.Add(iData)
    chartData.Add(sColor)
    chartData.Add(sLabel)

    Return chartData


End Function

The jquery side:

 function LoadChart() {
   
    var ctx = document.getElementById("chart-area").getContext('2d');


 $.ajax({
    type: "POST",
    url: "_TempEntrada.aspx/GetChart",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (r) {
            var sData =
            {
                labels: r.d[2] ,
                datasets: [
                    {
                        backgroundColor: r.d[1],
                        data: r.d[0] 
                    },

                ]
            };
        
        var config = {
            type: 'doughnut',
            data:sData,
            options: {
                responsive: true,
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'Chart.js Doughnut Chart'
                },
                animation: {
                    animateScale: true,
                    animateRotate: true
                }
            }
        };

        var myDoughnutChart = new Chart(ctx, config);
       
       
      
    },
    failure: function (response) {
        alert('There was an error.');
    }
});
}