I am making an application and I need to plot some data, test with google chart, worked well, but I need to put several vertical shafts and Gogle chart does not allow more than two and a single label. I want to try JQPlot, so that I can see is complete, try to convert the application that had to Goggle chart and I can not load the data I get with Ajax and JSON. The following code:

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="Scripts/jqPlot/jquery.min.js"></script>
    <script src="Scripts/jqPlot/jquery.jqplot.min.js"></script>
    <link href="Scripts/jqPlot/jquery.jqplot.min.css" rel="stylesheet" />
    <link href="Scripts/jqPlot/jquery.jqplot.css" rel="stylesheet" />
    <script src="Scripts/jqPlot/plugins/jqplot.json2.min.js"></script>
 <script>
     var chartData; // globar variable for hold chart data
     google.load("visualization", "1", { packages: ["corechart"] });

     // Here We will fill chartData
     $(document).ready(function () {
         $("#<%=ImBtDivuj.ClientID%>").click(function () {

             $.jqplot('chart_div', [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]]);

         });
     });

     $(document).ready(function () {
         $("#<%=ImBtCargarDatos.ClientID%>").click(function () {
             var _puntoDeMedicionId = $('#<%= DropDownPtoMedicionGraf.ClientID %>').val();
             var _EntradaSalidaId = $('#<%= DropDownEntradaGraf.ClientID %>').val();
             var _FechaHoraRegistro = $('#<%= TextBoxFechaIniGraf.ClientID %>').val();

             $.ajax({
                 url: "Graficos.aspx/GetChartData",
                 data: "{'pPuntoDeMedicionId':'" + _puntoDeMedicionId + "'," +
                       " 'pEntradaSalidaId' : '" + _EntradaSalidaId + "'," +
                       " 'pFechaHoraRegistro' : '" + _FechaHoraRegistro + "'" +
                 "}",
                 dataType: "json",
                 type: "POST",
                 contentType: "application/json; chartset=utf-8",
                 success: function (data) {
                     chartData = data.d;  //data format in rows [Date_Time,Value,Pres,Minim]
                 },
                 error: function () {
                     alert("Error cargando los datos, conexion muy lenta, por favor reintente");
                 }
             }).done(function () {

            drawChart();

             });

         });
     });

     function drawChart() {

         // we have an empty data array here, but use the "dataRenderer"
         // option to tell the plot to get data from our renderer.
         var plot1 = $.jqplot('chart_div', [], {
             title: 'Sine Data Renderer',
             dataRenderer: chartData
         });
     }
 </script>

Make a small test loading a vector with values ​​and graph when I press on a button(ImBtDivuj), it works fine.

Data is retrieved through AJAX and JSON and has a small filter to take only the desired values​​, they work properly from the application of Google Char. As would be the way to link the data that I have on the function of Ajax, for viewing in jqplot.

Related posts

Recent Viewed