Click here to Skip to main content
15,211,674 members
Rate this:
Please Sign up or sign in to vote.
I'm implementing asp.net core project. In the razor view my code is like the following:

In a div tag, I call PieChartShow(XLabels,YValues,piechart); and i want to pass XLabels, YValues and piechart as the input parameters of PieChartShow javascript function and the third parameter "piechart" is the related canvas id. But now my problem is myXLabels is unknown inside the block of data in the function PieChartShow. I appreciate if anyone suggests me how I can pass XLabels and YValues into PieChartShow function.

What I have tried:

@using System.Linq;

@model CSDDashboard.TempClasses.ChartListObjects
@{

    var XLabels = Newtonsoft.Json.JsonConvert.SerializeObject(Model.TotalReqStatus.Select(i => i.DimensionOne).ToList());
    var YValues = Newtonsoft.Json.JsonConvert.SerializeObject(Model.TotalReqStatus.Select(i => i.Quantity).ToList());
    ViewData["Title"] = "Pie Chart";
    //-----------------
    var XLabels1 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedTimeAvg.Select(i => i.DimensionOne).ToList());
    var YValues1 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedTimeAvg.Select(i => i.Quantity).ToList());
    ViewData["Title"] = "Line Chart";
    //------------------
    var XLabels2 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedPercent.Select(i => i.DimensionOne).ToList());
    var YValues2 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedPercent.Select(i => i.Quantity).ToList());
    ViewData["Title"] = "Line Chart";
    //------------------
    var XLabels3 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedApiToApplicantAvg.Select(i => i.DimensionOne).ToList());
    var YValues3 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedApiToApplicantAvg.Select(i => i.Quantity).ToList());
    ViewData["Title"] = "Line Chart";
}


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    @**@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

        html, body, h1, h2, h3, h4, h5 {
            font-family: "Raleway", sans-serif
        }
    </style>
</head>

<body>
    <canvas id="piechart" style="width:100%; height:500px"></canvas>
    <canvas id="linechart1" style="width:100%; height:500px"></canvas>
    <canvas id="linechart2" style="width:100%; height:500px"></canvas>
    <canvas id="linechart3" style="width:100%; height:500px"></canvas>
<div class="container" style="width:100%; height:500px">
        <div class="row">
 </div>
            <div class="col-3">
                @*style="width:30%">*@
                <!-- pie chart -->
                <script type="text/javascript">
@*Pie chart eliminated*@
                    PieChartShow(XLabels,YValues,piechart);
                </script>
                <!--cell 4 row 1-->
            </div>
        </div>
        <div class="row">
            <div class="col-4">
                <!-- line chart -->
                <script type="text/javascript">
                    LineChartShow(XLabels1, YLabels1,linechart1);
                </script>
                <!--cell 1 row 2-->
            </div>
            <div class="col-4">
                <!-- line chart -->
                <script type="text/javascript">
                    LineChartShow(XLabels2, YLabels2,linechart2);
                </script>
                <!--cell2 row 2-->
            </div>


            <div class="col-4">
                <!-- line chart -->
                <script type="text/javascript">
                    LineChartShow(XLabels3, YLabels3,,linechart3);
                </script>
                <!--cell3 row3-->
            </div>
       </div>
    </div>

</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    var PieChartShow =
    $(function () {
        // var chartName = "piechart";
Here is where I have problem in getting arguments[0]
        var myXLabels = arguments[0];
        var YYalues = arguments[1];
        var chartName = arguments[2];
    var ctx = document.getElementById(chartName).getContext('2d');
    var data = {
    labels: @Html.Raw(myXLabels),
    datasets: [{
    label: "API Charts",
    backgroundColor: [
    'rgba(255, 99, 132, 0.2)',
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(75, 192, 192, 0.2)',
    'rgba(153, 102, 255, 0.2)',
    'rgba(255, 159, 64, 0.2)',
    'rgba(255, 0, 0)',
    'rgba(0, 255, 0)',
    'rgba(0, 0, 255)',
    'rgba(192, 192, 192)',
    'rgba(255, 255, 0)',
    'rgba(255, 0, 255)'
    ],
    borderColor: [
    'rgba(255,99,132,1)',
    'rgba(54, 162, 235, 1)',
    'rgba(255, 206, 86, 1)',
    'rgba(75, 192, 192, 1)',
    'rgba(153, 102, 255, 1)',
    'rgba(255, 159, 64, 1)',
    'rgba(255, 0, 0)',
    'rgba(0, 255, 0)',
    'rgba(0, 0, 255)',
    'rgba(192, 192, 192)',
    'rgba(255, 255, 0)',
    'rgba(255, 0, 255)'
    ],
    borderWidth: 1,
    data: @Html.Raw(YValues)
    }]
    };

    var options = {
    maintainAspectRatio: false,
    scales: {
    yAxes: [{
    ticks: {
    min: 0,
    beginAtZero: true
    },
    gridLines: {
    display: true,
    color: "rgba(255,99,164,0.2)"
    }
    }],
    xAxes: [{
    ticks: {
    min: 0,
    beginAtZero: true
    },
    gridLines: {
    display: false
    }
    }]
    }
    };

    var myChart = new  Chart(ctx, {
    options: options,
    data: data,
    type:'pie'

    });
    });

    @**@
var LineChartShow = $(function () {

            var chartName = arguments[2];
            var ctx = document.getElementById(chartName).getContext('2d');
            var data = {
                labels: @Html.Raw(arguments[0]),
                @*labels: @Html.Raw(),*@
                @*labels: @Html.Raw(),*@
                datasets: [{
                    label: "API Charts",
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)',
                        'rgba(255, 0, 0)',
                        'rgba(0, 255, 0)',
                        'rgba(0, 0, 255)',
                        'rgba(192, 192, 192)',
                        'rgba(255, 255, 0)',
                        'rgba(255, 0, 255)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)',
                        'rgba(255, 0, 0)',
                        'rgba(0, 255, 0)',
                        'rgba(0, 0, 255)',
                        'rgba(192, 192, 192)',
                        'rgba(255, 255, 0)',
                        'rgba(255, 0, 255)'
                    ],
                    borderWidth: 1,
                    data: @Html.Raw(YValues1)
            }]
            };

            var options = {
                maintainAspectRatio: false,
                scales: {
                    yAxes: [{
                        ticks: {
                            min: 0,
                            beginAtZero: true
                        },
                        gridLines: {
                            display: true,
                            color: "rgba(255,99,164,0.2)"
                        }
                    }],
                    xAxes: [{
                        ticks: {
                            min: 0,
                            beginAtZero: true
                        },
                        gridLines: {
                            display: false
                        }
                    }]
                }
            };

            var myChart = new Chart(ctx, {
                options: options,
                data: data,
                type: 'line'

            });
        });

</script>
Posted
Updated 2-Jun-20 0:09am
v2
Comments
Richard MacCutchan 1-Jun-20 15:34pm
   
"how I can pass XLabels and YValues into PieChartShow function."
Sorry to state the bl***ing obvious, but you need to get them into that body of code first.

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

Your variables are defined in your server-side code. To transfer them to the client-side Javascript, you need to encode them and send them to the client with the script.

In ASP.NET Core, that's fairly simple - you just need to use the Json.Serialize helper.

You'll also need to define the nnnChartShow functions before you can call them.
@using System.Linq;

@model CSDDashboard.TempClasses.ChartListObjects
@{
    // NB: No point in setting the title multiple times; only one will be used:
    ViewData["Title"] = "Charts";
    
    var XLabels = Model.TotalReqStatus.Select(i => i.DimensionOne).ToList();
    var YValues = Model.TotalReqStatus.Select(i => i.Quantity).ToList();

    var XLabels1 = Model.GrantedTimeAvg.Select(i => i.DimensionOne).ToList();
    var YValues1 = Model.GrantedTimeAvg.Select(i => i.Quantity).ToList();

    var XLabels2 = Model.GrantedPercent.Select(i => i.DimensionOne).ToList();
    var YValues2 = Model.GrantedPercent.Select(i => i.Quantity).ToList();

    var XLabels3 = Model.GrantedApiToApplicantAvg.Select(i => i.DimensionOne).ToList();
    var YValues3 = Model.GrantedApiToApplicantAvg.Select(i => i.Quantity).ToList();
}
<!DOCTYPE html>
...
<script>
$(function(){
    function PieChartShow(xLabels, yValues, chartId) {
        var ctx = document.getElementById(chartId).getContext("2d");
        
        var data = {
            labels: xLabels,
            datasets: [{
                ...
                data: yValues
            }]
        };
        
        var options = { ... };
        var myChart = new Chart(ctx, { options: options, data: data, type: "pie" });
    }
    
    function LineChartShow(xLabels, yValues, chartId) {
        var ctx = document.getElementById(chartId).getContext("2d");
        
        var data = {
            labels: xLabels,
            datasets: [{
                ...
                data: yValues
            }]
        };
        
        var options = { ... };
        var myChart = new Chart(ctx, { options: options, data: data, type: "line" });
    }
    
    PieChartShow(@Json.Serialize(XLabels), @Json.Serialize(YValues), "piechart");
    
    LineChartShow(@Json.Serialize(XLabels1), @Json.Serialize(YValues1), "linechart1");
    
    LineChartShow(@Json.Serialize(XLabels2), @Json.Serialize(YValues2), "linechart2");
    
    LineChartShow(@Json.Serialize(XLabels3), @Json.Serialize(YValues3), "linechart3");
});
</script>
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100