1

Quiero generar un gráfica similar a esta, con intervalos regulares de tiempo, con la librería highchart

Utilizo un función en java script, que utiliza un método estático para consultar al servidor, obteniendo como respuesta un DataSet con varias tablas sereializado como objeto JSON

(string json = JsonConvert.SerializeObject(_dsCon);) 

y lo retorno de esta forma a la funcion JavaScript, ya en la funcion JavaScript convierto esta respuesta a formato JSON

(var json = JSON.parse(resultado.d))

Ahora necesito organizar dicho JSON de forma que pueda enviarlo a la funcion y que me lo reconozca para que pueda pintar la grafica.

Hasta ahora solo obtengo respuesta del servidor de datos y en la parte del cliente no he avanzado nada, necesito su ayuda, muchas gracias.

Utilizo la libreria Highcharts, Graficos de Lines con intervalos de tiempos Irregulares.

el resultado de mi respuesta al hacer la llamada Ajax es la siguiente.

{
  "Table": [
    {
      "C019FechaIngreso": "21-Abril-2017",
      "mes": 4,
      "C019Resultado": 8,
      "C019CodMaestro": "ATP"
    },
    {
      "C019FechaIngreso": "24-Abril-2017",
      "mes": 4,
      "C019Resultado": 2,
      "C019CodMaestro": "ATP"
    },
    {
      "C019FechaIngreso": "22-Mayo-2017",
      "mes": 5,
      "C019Resultado": 9.5,
      "C019CodMaestro": "ATP"
    },
    {
      "C019FechaIngreso": "23-Mayo-2017",
      "mes": 5,
      "C019Resultado": 10,
      "C019CodMaestro": "ATP"
    },
    {
      "C019FechaIngreso": "24-Mayo-2017",
      "mes": 5,
      "C019Resultado": 3.75,
      "C019CodMaestro": "ATP"
    },
    {
      "C019FechaIngreso": "20-Junio-2017",
      "mes": 6,
      "C019Resultado": 1.1,
      "C019CodMaestro": "ATP"
    },
    {
      "C019FechaIngreso": "22-Junio-2017",
      "mes": 6,
      "C019Resultado": 1,
      "C019CodMaestro": "ATP"
    },
    {
      "C019FechaIngreso": "6-Junio-2017",
      "mes": 6,
      "C019Resultado": 16.33,
      "C019CodMaestro": "ATP"
    },
    {
      "C019FechaIngreso": "4-Agosto-2017",
      "mes": 8,
      "C019Resultado": 4,
      "C019CodMaestro": "ATP"
    }
  ],
  "Table1": [
    {
      "C019FechaIngreso": "4-Julio-2017",
      "mes": 7,
      "C019Resultado": -2.67,
      "C019CodMaestro": "RDM"
    },
    {
      "C019FechaIngreso": "4-Agosto-2017",
      "mes": 8,
      "C019Resultado": 1,
      "C019CodMaestro": "RDM"
    },
    {
      "C019FechaIngreso": "13-Septiembre-2017",
      "mes": 9,
      "C019Resultado": -10,
      "C019CodMaestro": "RDM"
    }
  ]
}

La forma en que la función recibe los datos es la siguiente:

series: [{
            name: "Winter 2014-2015",
            data: [
                [Date.UTC(1970, 10, 25), 0],
                [Date.UTC(1970, 11, 6), 0.25],
                [Date.UTC(1970, 11, 20), 1.41],
                [Date.UTC(1970, 11, 25), 1.64],
                [Date.UTC(1971, 0, 4), 1.6],
                [Date.UTC(1971, 0, 17), 2.55],

            ]
        }]

con esos datos quiero generar una gráfica como la de la imagen .

4
  • ¿Puedes poner más código? Por ejemplo el formato del dataset _dsCon y la variable resultado.d (que entiendo que será el de una llamada AJAX). Tienes que proveer del máximo de información que nos permite ver el problema
    – Kiko_L
    Commented el 9 abr. 2018 a las 14:47
  • Podrias ayudarme! Commented el 9 abr. 2018 a las 15:10
  • es primera vez que utilizo este medio y realmente no se como estructurar las preguntas bien Commented el 9 abr. 2018 a las 15:58
  • Mira esto Cómo preguntar y ejemplo mínimo verificable
    – Kiko_L
    Commented el 9 abr. 2018 a las 16:32

1 respuesta 1

1

Te dejo un ejemplo aproximado y con comentarios de lo que tendrías que hacer:

var items = {
  "Table": [
    {
      "C019FechaIngreso": "21-Abril-2017",
      "mes": 4,
      "C019Resultado": 8,
      "C019CodMaestro": "ATP"
    },
    {
      "C019FechaIngreso": "24-Abril-2017",
      "mes": 4,
      "C019Resultado": 2,
      "C019CodMaestro": "ATP"
    },
    {
      "C019FechaIngreso": "22-Mayo-2017",
      "mes": 5,
      "C019Resultado": 9.5,
      "C019CodMaestro": "ATP"
    },
    {
      "C019FechaIngreso": "23-Mayo-2017",
      "mes": 5,
      "C019Resultado": 10,
      "C019CodMaestro": "ATP"
    },
    {
      "C019FechaIngreso": "24-Mayo-2017",
      "mes": 5,
      "C019Resultado": 3.75,
      "C019CodMaestro": "ATP"
    },
     {
      "C019FechaIngreso": "6-Junio-2017",
      "mes": 6,
      "C019Resultado": 16.33,
      "C019CodMaestro": "ATP"
    },
    {
      "C019FechaIngreso": "20-Junio-2017",
      "mes": 6,
      "C019Resultado": 1.1,
      "C019CodMaestro": "ATP"
    },
    {
      "C019FechaIngreso": "22-Junio-2017",
      "mes": 6,
      "C019Resultado": 1,
      "C019CodMaestro": "ATP"
    },   
    {
      "C019FechaIngreso": "4-Agosto-2017",
      "mes": 8,
      "C019Resultado": 4,
      "C019CodMaestro": "ATP"
    }
  ],
  "Table1": [
    {
      "C019FechaIngreso": "4-Julio-2017",
      "mes": 7,
      "C019Resultado": -2.67,
      "C019CodMaestro": "RDM"
    },
    {
      "C019FechaIngreso": "4-Agosto-2017",
      "mes": 8,
      "C019Resultado": 1,
      "C019CodMaestro": "RDM"
    },
    {
      "C019FechaIngreso": "13-Septiembre-2017",
      "mes": 9,
      "C019Resultado": -10,
      "C019CodMaestro": "RDM"
    }
  ]
};

var name;
var tables = [];
var auxFecha = [];
//Obtenemos los objetos del JSON (Table y Table1)
var arr = Object.values(items);

//Recorremos los objetos
for (var i in arr){
 	var obj = arr[i];
  //Obtenemos el nombre de la serie (ATP y RDM)
  name = obj[0].C019CodMaestro;
  var serie = {};
  serie.name= name;
 	serie.data = [];  
  //Obtenemos los puntos UTC de cada serie (ATP y RDM)
    for (var i in obj){
        serie.data[i] = [];
        auxFecha = obj[i].C019FechaIngreso.split("-");
        serie.data[i]= [Date.UTC(auxFecha[2],obj[i].mes-1, auxFecha[0]),obj[i].C019Resultado];    
    }
    //Añadimos la serie al array tables 
    tables.push(serie)    
}

Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    title: {
        text: 'Chart de prueba'
    },
    subtitle: {
        text: 'Irregular time data in Highcharts JS'
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
            month: '%e. %b',
            year: '%b'
        },
        title: {
            text: 'Date'
        }
    },
    yAxis: {
        title: {
            text: 'Snow depth (m)'
        },
        min: -20
    },
    tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
    },

    plotOptions: {
        spline: {
            marker: {
                enabled: true
            }
        }
    },

    colors: ['#6CF', '#39F', '#06C', '#036', '#000'],



    // Define the data points. All series have a dummy year
    // of 1970/71 in order to be compared on the same x axis. Note
    // that in JavaScript, months start at 0 for January, 1 for February etc.
    series: tables
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

La solución, básicamente, ha consistido en recorrer el JSON y crear un array de objetos con la estructura aceptada por Highcharts

Nota: Tu JSON no venía correctamente ordenado por fechas (el 6 de junio venía después del 20 y del 22) así que he tenido que ordenarlo a mano. Lo ideal es que lo ordenes en tu dataset ya que si no habría que hacer más ingeniería en JS.

Espero que te sirva

1
  • Perfecto, era solo eso, muchas gracias hermano, soy novato en este del desarrollo web y su ayuda era lo que necesitaba, muchas gracias.... @Kiko_L Commented el 10 abr. 2018 a las 22:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.