Gráficos de Fusión , Eventos de clic de datos de JavaScript C#

Estoy creando gráficos de fusión en .net, y funciona bien.

Chart MyFirstChart = new Chart(chartType, chartName, "100%", height.ToString(), "json", jsonData.ToString());

Los datos se recopilan de la tabla de datos del servidor SQL y se convierten a la cadena JSON.

Mi tabla de datos tiene los siguientes datos:

  • Fecha
  • No de estudiantes
  • Porcentaje
  • Nombre del Departamento

Me gustaría añadir un evento que si se hace clic en un diagrama de datos se muestran más detalles mostrando datos de una tabla de datos diferente, que contiene más detalles de ese Departamento.

Añadí el evento:

MyFirstChart.AddEvent("dataPlotClick" , "dataPlotClick");

// render chart
return MyFirstChart.Render();

Y llamó este evento en un Javascript

El clic en el diagrama de datos funciona bien, pero su obtiene los datos de la tabla de datos actual, y me gustaría obtener la tabla de datos más detallada y mostrar en una vista de la tabla en la página de asp.

¿Hay alguna manera de hacer eso?

Pregunta hecha hace 3 años, 4 meses, 27 días - Por codejuggernaut

2 Respuestas:

  • Para lograr obtener datos de una tabla de datos diferente al hacer clic en un diagrama de datos en FusionCharts, puedes seguir los siguientes pasos:

    • Cuando se produce el evento de clic en el diagrama de datos, puedes usar JavaScript para enviar una solicitud al servidor para obtener los datos detallados del Departamento seleccionado.
    • En el servidor, puedes ejecutar una consulta SQL para obtener los detalles del Departamento seleccionado desde la tabla de datos más detallada.
    • Luego, puedes devolver los datos obtenidos desde la tabla de datos detallada en formato JSON desde el servidor al cliente.
    • En la función `dataPlotClick` de tu Javascript, puedes actualizar el código para manejar los datos obtenidos de la tabla de datos detallada y mostrarlos en la página de ASP. Aquí te dejo un ejemplo de cómo podrías hacer esto:
    javascript
dataPlotClick = function (eventObj, dataObj) {
    console.log(eventObj);

    // Aquí puedes realizar una solicitud AJAX al servidor para obtener los datos detallados del Departamento seleccionado
    $.ajax({
        url: 'obtenerDatosDetallados.aspx?departamento=' + dataObj['Nombre del Departamento'],
        type: 'GET',
        success: function (response) {
            var datosDetallados = JSON.parse(response);

            // Mostrar los datos detallados en la vista de la tabla en la página de ASP
            var tablaDetallada = document.getElementById('tabla-detallada');
            tablaDetallada.innerHTML = '';

            for (var prop in datosDetallados) {
                var fila = document.createElement('tr');
                var celdaNombre = document.createElement('td');
                celdaNombre.innerHTML = prop;
                var celdaValor = document.createElement('td');
                celdaValor.innerHTML = datosDetallados[prop];

                fila.appendChild(celdaNombre);
                fila.appendChild(celdaValor);

                tablaDetallada.appendChild(fila);
            }
        },
        error: function (error) {
            console.log(error);
        }
    });
};

    Recuerda que en el servidor debes tener una página ASP (en este caso, obtenerDatosDetallados.aspx) que maneje la solicitud y devuelva los datos detallados en formato JSON.

    Espero que esta guía te ayude a implementar la funcionalidad que deseas en tu gráfico de FusionCharts. ¡Déjame saber si tienes alguna otra pregunta!

    Respondida el Dec 20, 2020 a las 12:36 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para mostrar datos de una tabla diferente cuando se hace clic en un punto de datos en un gráfico de FusionCharts, puedes seguir estos pasos:

    En el evento dataPlotClick de JavaScript, debes obtener el valor de la propiedad categoryLabel del objeto dataObj pasado al evento. Esta propiedad contiene el nombre del Departamento correspondiente al punto de datos en el que se hizo clic.

    Una vez que tengas el nombre del Departamento, puedes utilizar AJAX para enviar una solicitud al servidor y recuperar los datos detallados de ese Departamento desde la tabla diferente.

    En el controlador del lado del servidor, puedes consultar la tabla detallada para recuperar los datos y devolverlos en formato JSON.

    En el lado del cliente, puedes procesar la respuesta JSON y mostrarla en una tabla o en cualquier otro formato deseado.

    Aquí tienes un ejemplo de código que ilustra estos pasos:

    JavaScript:

    javascript
dataPlotClick = function(eventObj, dataObj) {
  var departmentName = dataObj.categoryLabel;

  // Utiliza AJAX para enviar una solicitud al servidor para obtener los datos detallados
  var request = new XMLHttpRequest();
  request.open('POST', 'GetDepartmentDetails.aspx');
  request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  request.send('departmentName=' + departmentName);

  request.onload = function() {
    if (request.status === 200) {
      // Procesa la respuesta JSON y muestra los datos detallados
      var data = JSON.parse(request.responseText);
      // ... Muestra los datos en una tabla o en cualquier otro formato deseado
    }
  };
};

    Controlador del lado del servidor (por ejemplo, en ASP.NET):

    csharp
public partial class GetDepartmentDetails : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string departmentName = Request.Form["departmentName"];

        // Consulta la tabla detallada para recuperar los datos
        DataTable data = GetDepartmentDetails(departmentName);

        // Convierte los datos a JSON y lo devuelve
        string json = JsonConvert.SerializeObject(data);
        Response.Write(json);
    }

    private DataTable GetDepartmentDetails(string departmentName)
    {
        // Implementa la consulta a la base de datos para recuperar los datos detallados
        // ...
    }
}

    Nota:

    Asegúrate de que el nombre del Departamento en la tabla de datos original y la tabla detallada coincidan. Si utilizas un marco diferente para el desarrollo del lado del servidor, como Node.js o Python, adapta el código del controlador del lado del servidor en consecuencia.

    Respondida el Dec 20, 2020 a las 12:44 - por Gemini

    Votos positivos: 0 | Votos negativos: 0