Does anyone know how to fill a Pie Graphics from a driver?

Navigation
0

I have been searching the internet for a way to fill the data from a controller, the code is programmed in ASP.NET MVC 5 RAZOR.

I show you the code below:

VIEW 

<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();

        var options = {
            title: 'Inventario físico'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
    }
</script>

In the part that says var data = google.visualization.arrayToDataTable (); inside the parentheses is where I will put the driver's query to fill my pie chart.

Next I show you the CONTROLLER method. 

//OBTENEMOS DATOS DESDE LA BD PARA GENERAR LA GRAFICA DE PASTEL
        public string estadisticasGrafico()
        {
            DataTable datos = new DataTable();
            datos = FunctionInventario279.estadisticasGrafico();

            string strDatos = "[['Conteos pendientes', 'Cantidad'],";

            foreach (DataRow dr in datos.Rows)
            {
                strDatos = strDatos + "[";
                strDatos = strDatos + "'" + dr[4] + "'" + "," + dr[5];
                strDatos = strDatos + "],";
            }

            strDatos = strDatos + "]";

            return strDatos;

        }

Once the data has been consulted from the base, the pie chart can be displayed.

The data is sent to call from an SP, through a connection string (method) in which it returns a datatable.

    
asked by Francisco José Rivera Mundo 27.10.2017 в 01:33
source

1 answer

1

Assuming the estadisticasGrafico() method returns the following: 

[
    [
        "Conteos pendientes",
        "Cantidad"
    ],
    [
        "Item1",
        11
    ],
    [
        "Item2",
        2
    ],
    [
        "Item3",
        2
    ]
]

The double quotes make it work correctly, in this demo.

You must make a request Http XMLHttpRequest() (AJAX), to obtain the data and present them on screen.

For this, I have prepared a Helper function for requests XMLHttpRequest() , with what is necessary for your case. 

var newXHR;

function sendXHR(options, callback) {
  newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
  newXHR.open("GET", options.url, true);
  newXHR.send(null);
  newXHR.onreadystatechange = function() {
    if (this.status === 200 && this.readyState === 4) {
      callback(this.response);
    }
  };
}

Use: 

sendXHR({url: "http://miurl"}, function(datosRetornados)
{
   // Código con los datosRetornados.
});

Because I have no way to test your controller's method, I have the following URL to try.

link

Be sure to replace it with the correct url.

Demo: 

<html>

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    var newXHR;

    function sendXHR(options, callback) {
      newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
      newXHR.open("GET", options.url, true);
      newXHR.send(null);
      newXHR.onreadystatechange = function() {
        if (this.status === 200 && this.readyState === 4) {
          callback(this.response);
        }
      };
    }


    // Ejemplo de ejecución.
    sendXHR({
      url: "https://gist.githubusercontent.com/dannyjhonston/79f1d96defc939cd22c1cf60296c2bda/raw/1c8d792fb61f6186f1e329a34f214b66bfabb2d4/estadisticasGrafico.json"
    }, function(response) {
      var datosControlador = JSON.parse(response);

      google.charts.load('current', {
        'packages': ['corechart']
      });
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable(datosControlador);

        var options = {
          title: 'Inventario físico'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    });
  </script>
</head>

<body>
  <div id="piechart" style="width: 900px; height: 500px;"></div>
</body>

</html>
    
answered by 27.10.2017 в 23:34
Error voting response in model with polymorphism What are the problems that can occur over time, by allocating more memory to the java heap?