Plotly ASP.NET Core MVC Ajax Json 调用

Question

Hello I am using to Plotly JavaScript Open Source Graphing Library on my .NET CORE MVC project. I don't know how can i use my JSON data at my bar graph's axes. Here i used to sample default data to use bar graph.

Index.cshtml

<div id="locationDiv"></div>

<script>
    var trace1 = {
        type: 'bar',
        x: ["İstanbul", "Ankara", "İzmir", "Antalya"],
        y: [50, 40, 20, 15],
        marker: {
            color: '#C8A2C8',
            line: {
                width: 2.5
            }
        }
    };

    var locationData = [trace1];

    var locationLayout = {
        title: 'Locations',
        yaxis: {
            title: 'number'
        },
        xaxis: {
            title: 'location name'
        },
        font: { size: 18 }
    };

    Plotly.newPlot('locationDiv', locationData, locationLayout, { responsive: true });
</script>

here output view this code

And I try to get x-axis values from my database.

Index.cshtml

<div id="locationDiv"></div>

@section scripts {
    <script>
        $.ajax({
            type: "POST",
            url: "/Line/Dashboards",
            dataSrc: "",
            success: function (response) {
                successFunc(response);
            }
        });

        function successFunc(jsondata) {
            var trace1 = {
                type: 'bar',
                json: jsondata, 
                x: "locationName", //Default value:= x: ["İstanbul", "Ankara", "İzmir"],
//POSTMAN result:= [{"locationName": "İstanbul"},{"locationName": "Ankara"},{"locationName": "İzmir"}]
                y: [50, 40, 20],
                marker: {
                    color: '#3399FF',
                    line: {
                        width: 2.5
                    }
                }
            };
            var locationData = [trace1];

            var locationLayout = {
                yaxis: {
                    title: 'number'
                },
                xaxis: {
                    title: 'location name'
                },
                font: { size: 18 }
            };

            Plotly.newPlot('locationDiv', locationData, locationLayout, { responsive: true });
        }
</script>
}

LineController.cs

[HttpPost]
public IActionResult Dashboards()
{
    var dashboardDataList = _lineService.GetLineList();
    var totalRecords = dashboardDataList.Count();

    var DashboardDataResult = from line in dashboardDataList
                              select new
                             {
                                 LocationName = line.Location.LocationName                                         
                             };

    DashboardDataResult = DashboardDataResult.Distinct();

    return Json(DashboardDataResult);
}

My path is true. I tried it with Postman and the result was

[{"locationName": "İstanbul"},{"locationName": "Ankara"},{"locationName": "İzmir"}]

Answer 1

Try the following method :

function successFunc(jsondata) {
        function unpack(rows, key) {
            return rows.map(function(row) { return row[key]; });
        }

        var x = unpack(jsondata, 'locationName');
        var trace1 = {
            type: 'bar',
            json: jsondata,
            x: x, 
            y: [50, 40, 20,15],
            marker: {
                color: '#3399FF',
                line: {
                    width: 2.5
                }
            }
        };
        var locationData = [trace1];

        var locationLayout = {
            title:'Locations',
            yaxis: {
                title: 'number'
            },
            xaxis: {
                title: 'location name'
            },
            font: { size: 18 }
        };

        Plotly.newPlot('locationDiv', locationData, locationLayout, { responsive: true });
    }

Reference: https://plot.ly/javascript/axes/#set-and-style-axes-title-labels-and-ticks