none
Google Chart and ChartJs Export C# variable to Script side in Asp .NET Core 2.2 RRS feed

  • Question

  • Hi,
    I'm developing web application at ASP .Net Core 2.2. I have to stop at an issue because of being new in .Net Core.

    ASP In the .Net Core, I have two int arrays in backend.

    I want to show them through various graphs such as curved line and bar chart, but I couldn't evaluate them in the script structure while I could use the variables I took from class via @model.

    Sample:

    ChartJs Charts:

    <canvas id="myChart" width="400" height="400"></canvas>
    <script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
    
                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)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
    </script>

    Google Charts:

    <html>
      <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
          google.charts.load('current', {'packages':['corechart']});
          google.charts.setOnLoadCallback(drawChart);
    
          function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['Year', 'Sales', 'Expenses'],
              ['2004',  1000,      400],
              ['2005',  1170,      460],
              ['2006',  660,       1120],
              ['2007',  1030,      540]
            ]);
    
            var options = {
              title: 'Company Performance',
              curveType: 'function',
              legend: { position: 'bottom' }
            };
    
            var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
    
            chart.draw(data, options);
          }
        </script>
      </head>
      <body>
        <div id="curve_chart" style="width: 900px; height: 500px"></div>
      </body>
    </html>

    As you can see in the two code blocks I have illustrated above, the data was entered into the code blocks. At this point, I want to manipulate the data through a set of data, instead of entering the data manually.
    How do I pass the int arrays below into these code blocks? The elements of these int arrays will be obtained as a result of the calculation and how can I extract a curve from arrays in both Chart types?

    //My Arrays I want to use each integers.
    
    //x axis
    
    int[] x_ekseni_olculen_yillar = { 1997, 2003, 2005, 2009, 2014, 2018, 2019 };
    
    
    //y axis
    
    int[] y_ekseni_ofke_katsayisi = { 1, 3, 5, 3, 1, 18, 9 };

    • Moved by CoolDadTx Monday, April 22, 2019 2:01 PM ASP.NET related
    Saturday, April 20, 2019 6:29 PM

All replies

  • I could try but did not succeed like this method:

    @model List<BenimVerilerim>
    
    //BenimVerilerim is a class which includes two double type element variable. I've get x_axis and y_axis list.
    @{
    var XValues = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Select(x => x.X_Axis).ToList());
        var YValues = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Select(x => x.Y_Axis).ToList());
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <title>King</title>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
            google.charts.load('current', { 'packages': ['corechart'] });
            google.charts.setOnLoadCallback(drawChart);
    
            function drawChart() {
    
    
    
                var data = google.visualization.arrayToDataTable([
                    ['Age', 'Weight'],
    [@XValues,@YValues]
                ]);
    
                var options = {
                    title: 'distort comparison',
                    lineWidth: 2,
                    curveType:'function',
                };
    
                var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
    
                chart.draw(data, options);
            }
        </script>
    </head>
    </body>
    </html>


    Just white blank page.

    If I get x and y axes element with via writing, then Chart is well done like:

    @model List<BenimVerilerim>
    
    //BenimVerilerim is a class which includes two double type element variable. I've get x_axis and y_axis list.
    @{
    var XValues = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Select(x => x.X_Axis).ToList());
        var YValues = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Select(x => x.Y_Axis).ToList());
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <title>King</title>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
            google.charts.load('current', { 'packages': ['corechart'] });
            google.charts.setOnLoadCallback(drawChart);
    
            function drawChart() {
    
    
                var data = google.visualization.arrayToDataTable([
                    ['Age', 'Weight'],
                      [1, 12],
                    [2, 5.5],
                    [11, 14],
                    [14, 5],
                    [32, 3.5],
                    [46.5, 7]
                ]);
    
                var options = {
                    title: 'distort comparison',
                    lineWidth: 2,
                    curveType:'function',
                };
    
                var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
    
                chart.draw(data, options);
            }
        </script>
    </head>
    </body>
    </html>

    Sunday, April 21, 2019 12:08 AM
  • Is there any solution?
    Sunday, April 21, 2019 7:54 PM
  • Hi,

    According to your description, your issue is more related about ASP.NET. So, It will be more appropriate to ask your question at ASP.NET Forums.

    Thank you for your understanding.

    Regards,

    Kyle


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Monday, April 22, 2019 1:42 AM
  • Thank you. I've asked there.
    Monday, April 22, 2019 8:55 AM