How to pass the input arguments of a function into the block body of it

Question

0.00/5 (No votes)

See more:

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 1-Jun-20 7:51am

ElenaRez

Updated 2-Jun-20 0:09am

v2

Add a Solution

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Richard Deeming · Answer 1 · 2020-06-02T00:10:00

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.

Razor

@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>