Para comenzar, les dejo el link oficial: http://www.flotcharts.org/
Ok, consideramos los siguientes datos a graficar:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic0JHUbIshoxmDmZyuZSo08yUZ4i1VQJOCtiwfaWTvbvQu9ZgJ_WfRkoSzI1VQt6GMq3APYKczRWUU_yOyzgIyiCnjuvxoiy_j_t64Zp1T2-V6MelWRUYWsjyqDQAZygIBfOvslwuQgKVX/s320/flot_1.jpg)
Lo primero que hago es crear un procedimiento almacenado que me devuelva la información de esta manera:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7QoadYT0RX0RAW41VmIib7jYO8BBxbEXcrLcGfCL_uFE4I_eZhDE_bGvhf-y23ug99U54FM_82NvkM7pby6BO15B6W8Mz4tqWJlUoX6Uq9aBVHnn6RKHewF6r0AcyiGasLT2ZE45lzoZz/s320/flot_2.jpg)
Luego, creo una clase pública que usaré en un WebMethod:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix5alnoTDPVp4hqlqSqNrLtcVBcLV7RYxUfFcE5pgSbIY17V0X8rGEAHUnBn0StNIVz7JT9nuBjKheLKLAZEIXpjmWPedy4A17C98kZKcMo4hqPjfDSMdGJHAPX7a87t4BzCN2CJ7KDflY/s320/flot_3.jpg)
Y este es mi WebMethod:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUmnaA1JDagjOfH7fPuDXPUTEhZnPUBHIV2InPYgjYr5pbdL8uqWAbDC62eo6wMt0GpUI47PDbXTvHDyXBPt-v2WgGkXcO1nC1ORRCPiCLJsNN9V2uXXnTEq_xP6S_BkWghsyLcSSmve-x/s320/flot_4.jpg)
En el código html, debo agregar un "div":
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEo0-ziqWwK1f3IQs5Q2n-qV9MSHCq8iy5mvop4I1pMpkT-Ra4pJgOeFu3OWIQXjxoHtl-q_x7vay-dB_JCDuFGXBJUknfTV59WXIx-VhwXv8lQGLBsAdygaF6EGNKH3-KJlcu_UGXOVu_/s320/flot_5.jpg)
Luego, la parte del script jQuery:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisb1FDg0SDaXdwC2n3y_rlEoMs5AnVaTv4VKntWko5CVDiMi-1c9np1OVglKQg6mwpcwf7Gd4GF4Xh78gweqP8Y7JuynUhotAIiNG5tADVb1wY0y4lXxh0ppoi_swEo9_mzH-9eFrKbARU/s320/flot_6.jpg)
y asi se ve nuestra gráfica
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDj7orUMM3bwGG_RhRfb7dR3aWEWtML46wH6TAnxI9pObvnnXMwzn09jIHAEwoZZeb4-_di7wwtg1hHjz-rnd_ijVEjjzviMPSOHEIkRh-UW9XBHv3XZdR3BUoPSutkCoNW6jjqi8Flwux/s320/flot_7.jpg)
No hay comentarios:
Publicar un comentario