Good afternoon community. I am a newbie in web development and I need to make a dynamic graphics using the library chart js, I use a function in java script, which uses a static method to query the server, obtaining as response a DataSet with several tables sereializado as a JSON object. / p>
(string json = JsonConvert.SerializeObject(_dsCon);)
and I return it in this way to the JavaScript function, since in the JavaScript function I convert this response to JSON format
(var json = JSON.parse(resultado.d))
Now I need to organize this JSON so that I can send it to the function and recognize it so I can paint the graphic.
So far I only get a response from the data server and in the client's part I have not advanced anything, I need your help, thank you very much.
my json would be something like this, the date set that serialized, can bring several tables and the name of the serious would be the property that has as alias C019NomMaestro:
{
"Table": [{
"C019Anio": 2017,
"C019Mes": 4,
"C019Dia": 21,
"C019Horas": 16,
"C019Minutos": 0,
"C019Segundos": 6,
"C019Milisegundos": 40,
"C019Resultado": "8",
"C019NomMaestro": "Determinación de ATP por bioluminiscencia"
}, {
"C019Anio": 2017,
"C019Mes": 4,
"C019Dia": 24,
"C019Horas": 7,
"C019Minutos": 40,
"C019Segundos": 44,
"C019Milisegundos": 983,
"C019Resultado": "2",
"C019NomMaestro": "Determinación de ATP por bioluminiscencia"
}, {
"C019Anio": 2017,
"C019Mes": 5,
"C019Dia": 22,
"C019Horas": 14,
"C019Minutos": 14,
"C019Segundos": 5,
"C019Milisegundos": 733,
"C019Resultado": "10",
"C019NomMaestro": "Determinación de ATP por bioluminiscencia"
}, {
"C019Anio": 2017,
"C019Mes": 5,
"C019Dia": 22,
"C019Horas": 16,
"C019Minutos": 46,
"C019Segundos": 51,
"C019Milisegundos": 53,
"C019Resultado": "9",
"C019NomMaestro": "Determinación de ATP por bioluminiscencia"
}, {
"C019Anio": 2017,
"C019Mes": 5,
"C019Dia": 23,
"C019Horas": 9,
"C019Minutos": 44,
"C019Segundos": 12,
"C019Milisegundos": 913,
"C019Resultado": "10",
"C019NomMaestro": "Determinación de ATP por bioluminiscencia"
}, {
"C019Anio": 2017,
"C019Mes": 5,
"C019Dia": 23,
"C019Horas": 9,
"C019Minutos": 49,
"C019Segundos": 13,
"C019Milisegundos": 946,
"C019Resultado": "10",
"C019NomMaestro": "Determinación de ATP por bioluminiscencia"
}, {
"C019Anio": 2017,
"C019Mes": 5,
"C019Dia": 23,
"C019Horas": 9,
"C019Minutos": 56,
"C019Segundos": 12,
"C019Milisegundos": 83,
"C019Resultado": "10",
"C019NomMaestro": "Determinación de ATP por bioluminiscencia"
}, {
"C019Anio": 2017,
"C019Mes": 5,
"C019Dia": 24,
"C019Horas": 14,
"C019Minutos": 55,
"C019Segundos": 27,
"C019Milisegundos": 970,
"C019Resultado": "6",
"C019NomMaestro": "Determinación de ATP por bioluminiscencia"
}, {
"C019Anio": 2017,
"C019Mes": 5,
"C019Dia": 24,
"C019Horas": 14,
"C019Minutos": 55,
"C019Segundos": 36,
"C019Milisegundos": 140,
"C019Resultado": "2",
"C019NomMaestro": "Determinación de ATP por bioluminiscencia"
}, {
"C019Anio": 2017,
"C019Mes": 5,
"C019Dia": 24,
"C019Horas": 14,
"C019Minutos": 55,
"C019Segundos": 41,
"C019Milisegundos": 6,
"C019Resultado": "3",
"C019NomMaestro": "Determinación de ATP por bioluminiscencia"
}, {
"C019Anio": 2017,
"C019Mes": 5,
"C019Dia": 24,
"C019Horas": 14,
"C019Minutos": 55,
"C019Segundos": 50,
"C019Milisegundos": 446,
"C019Resultado": "4",
"C019NomMaestro": "Determinación de ATP por bioluminiscencia"
}, {
"C019Anio": 2017,
"C019Mes": 6,
"C019Dia": 6,
"C019Horas": 14,
"C019Minutos": 12,
"C019Segundos": 20,
"C019Milisegundos": 820,
"C019Resultado": "15",
"C019NomMaestro": "Determinación de ATP por bioluminiscencia"
}, {
"C019Anio": 2017,
"C019Mes": 6,
"C019Dia": 6,
"C019Horas": 14,
"C019Minutos": 17,
"C019Segundos": 47,
"C019Milisegundos": 796,
"C019Resultado": "15",
"C019NomMaestro": "Determinación de ATP por bioluminiscencia"
}, {
"C019Anio": 2017,
"C019Mes": 6,
"C019Dia": 6,
"C019Horas": 14,
"C019Minutos": 21,
"C019Segundos": 9,
"C019Milisegundos": 536,
"C019Resultado": "19",
"C019NomMaestro": "Determinación de ATP por bioluminiscencia"
}, {
"C019Anio": 2017,
"C019Mes": 6,
"C019Dia": 20,
"C019Horas": 15,
"C019Minutos": 21,
"C019Segundos": 7,
"C019Milisegundos": 140,
"C019Resultado": "1.1",
"C019NomMaestro": "Determinación de ATP por bioluminiscencia"
}, {
"C019Anio": 2017,
"C019Mes": 6,
"C019Dia": 22,
"C019Horas": 15,
"C019Minutos": 50,
"C019Segundos": 57,
"C019Milisegundos": 590,
"C019Resultado": "1",
"C019NomMaestro": "Determinación de ATP por bioluminiscencia"
}, {
"C019Anio": 2017,
"C019Mes": 8,
"C019Dia": 4,
"C019Horas": 16,
"C019Minutos": 37,
"C019Segundos": 23,
"C019Milisegundos": 760,
"C019Resultado": "4",
"C019NomMaestro": "Determinación de ATP por bioluminiscencia"
}, {
"C019Anio": 2017,
"C019Mes": 9,
"C019Dia": 14,
"C019Horas": 9,
"C019Minutos": 12,
"C019Segundos": 7,
"C019Milisegundos": 986,
"C019Resultado": "2",
"C019NomMaestro": "Determinación de ATP por bioluminiscencia"
}, {
"C019Anio": 2017,
"C019Mes": 9,
"C019Dia": 14,
"C019Horas": 9,
"C019Minutos": 23,
"C019Segundos": 5,
"C019Milisegundos": 596,
"C019Resultado": "2",
"C019NomMaestro": "Determinación de ATP por bioluminiscencia"
}, {
"C019Anio": 2017,
"C019Mes": 9,
"C019Dia": 14,
"C019Horas": 9,
"C019Minutos": 41,
"C019Segundos": 21,
"C019Milisegundos": 890,
"C019Resultado": "2",
"C019NomMaestro": "Determinación de ATP por bioluminiscencia"
}],
"Table1": [{
"C019Anio": 2017,
"C019Mes": 6,
"C019Dia": 20,
"C019Horas": 10,
"C019Minutos": 53,
"C019Segundos": 32,
"C019Milisegundos": 820,
"C019Resultado": "1",
"C019NomMaestro": "Número más probable Coliformes/cm3"
}, {
"C019Anio": 2017,
"C019Mes": 6,
"C019Dia": 20,
"C019Horas": 15,
"C019Minutos": 49,
"C019Segundos": 12,
"C019Milisegundos": 686,
"C019Resultado": "0.1",
"C019NomMaestro": "Número más probable Coliformes/cm3"
}, {
"C019Anio": 2017,
"C019Mes": 7,
"C019Dia": 31,
"C019Horas": 15,
"C019Minutos": 53,
"C019Segundos": 58,
"C019Milisegundos": 430,
"C019Resultado": "0",
"C019NomMaestro": "Número más probable Coliformes/cm3"
}]
}
I need your help, please! very please haha, since the data can be with irregular intervals of time that one series may have more data than the other at different times. help me please!
the escrip to generate the graphics would be something like that, take it from the documentation of charts.js ..
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, ],
datasets: [{
label: 'Reparaciones x dia',
data: ['0', '4', '1', '3', '1', '0', '0', '1', ],
backgroundColor: "rgba(0,255,51,0.5)",
borderColor: "rgba(0,255,51,0.5)",
fill: false
}, {
label: 'Totales',
data: [0, 4, 5, 8, 9, 9, 9, 10, 21, 25, 33, 40, 45, 50, 51, 53, 58, 61, 69, 73],
backgroundColor: "rgba(0,153,255,0.5)",
borderColor: "rgba(0,153,255,0.5)",
fill: false
}]
},
options: {
//lineaHorizontal: 55,
//lineaHorizontalDos: 5
}
})