sql server - Highcharts not rendering after post ajax request -
i have 2 asp pages, in first 1 have form inform parameter using ajax , send second asp page connect mssql database, run query using date parameter came first asp page , return query result asp variables , populates highcharts.
graphics works fine passing variables throght querystrings, using ajax graphics wont draw,no error, simples returns blank graphic.
teste.asp
<!--#include virtual ="/bi/header.asp"--> <!--#include virtual ="/bi/sidebar.asp"--> <% %> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <script> function oncheckavailability() { if(window.xmlhttprequest) { orequest = new xmlhttprequest(); } else if(window.activexobject) { orequest = new activexobject("microsoft.xmlhttp"); } orequest.open("post", "vendas.asp", true); orequest.onreadystatechange = updatecheckavailability; orequest.setrequestheader("content-type", "application/x-www-form-urlencoded"); orequest.send("strcmd=availability&strdata1=" + document.form1.data1.value); } function updatecheckavailability() { document.getelementbyid("available").innerhtml = orequest.responsetext; } </script> </head> <body> <center> <div> <form method="post" action="javascript:void(0);" name="form1"> <label for="newuserid">data:</label> <input type="text" name="data1" id="data1 size="20" /> <input id="btncheckavailability" type="button" value="check availability" onclick="oncheckavailability();"><br> <div id="available"></div> </form>vendas.asp
<!--#include virtual ="/bi/lib/lib.asp"--> <% ' form variables dim strcmd dim strdata1 strcmd = trim(request.form("strcmd").item) strdata1 = trim(request.form("strdata1").item) 'nlimfor = request.querystring("fornec") 'nlimprod = request.querystring("produto") dim nlimfor dim nlimprod dim data1 dim cempr dim cemprold dim cfil dim cfilialf dim cfilialp dim cfornp dim strqryl dim strqryf dim strqryp dim strtot dim strpt dim ncont 'conexão com o banco de dados ' criar objeto de conexão com base de dados e executar query na tabela sm0 set rsvendef = server.createobject("adodb.recordset") rsvendef.open qryempfil, strconn 'seta variaveis nlimfor = 15 nlimprod = 15 'data1 = strdata1 data1 = dia() ncont = 0 cempr = rsvendef.fields("m0_codigo") cfil = rsvendef.fields("m0_codfil") cemprold = "" cfornp = "" 'query das lojas strqryl = " declare "&_ " @data varchar(8) = '"&data1&"' "&_ " select filial, quant, prodval "&_ " from( "&_ " select isnull(l2_filial,'') filial, isnull(sum(l2_quant),0) quant, isnull(sum(l2_vrunit),0) prodval "&_ " from "&xgempr("sl2", cempr)&" sl2 "&_ " where l2_emissao = @data "&_ " group l2_filial cube " 'query de fornecedores strqryf = " declare "&_ " @data varchar(8) = "&data1&", "&_ " @rows int = "&nlimfor&" "&_ "select rank, filial, nomefor, quant, prodval "&_ "from "&_ "( "&_ " select rank() over(partition filial order prodval desc, filial, nomefor) rank, "&_ " filial, nomefor, quant, prodval "&_ " from( "&_ " select l2_filial filial, a2_nreduz nomefor, isnull(sum(l2_quant),0) quant, isnull(sum(l2_vlritem),0) prodval "&_ " from "&xgempr("sl2", cempr)&" sl2 "&_ " inner join "&xgempr("sb1", cempr)&" sb1 on b1_filial = '"&xfilial("sb1",cempr,cfil)&"' , b1_cod = l2_produto , b1_msblql <> '1' , sb1.d_e_l_e_t_ = '' "&_ " inner join "&xgempr("sa2", cempr)&" sa2 on a2_filial = '"&xfilial("sa2",cempr,cfil)&"' , a2_cod = b1_proc , a2_msblql <> '1' , sa2.d_e_l_e_t_ = '' "&_ " where l2_emissao = @data , sl2.d_e_l_e_t_ = '' "&_ " group by l2_filial, a2_nreduz "&_ " ) tab11 " 'query de produtos strqryp = " declare "&_ " @data varchar(8) = '"&data1&"', "&_ " @rows int = "&nlimprod&" "&_ " select rank, filial, nomefor, nomeprod, quant, prodval "&_ " "&_ " ( "&_ " select rank() over(partition nomefor order prodval desc, filial, nomefor, nomeprod) rank, "&_ " filial, nomefor, nomeprod, quant, prodval "&_ " "&_ " ( "&_ " select isnull(l2_filial,'') filial, isnull(a2_nreduz,'') nomefor, isnull(b1_desc,'') nomeprod, "&_ " isnull(sum(l2_quant),0) quant, isnull(sum(l2_vlritem),0) prodval "&_ " from "&xgempr("sl2", cempr)&" sl2 "&_ " inner join "&xgempr("sb1", cempr)&" sb1 on "&_ " b1_filial = '' , b1_cod = l2_produto , b1_msblql <> '1' and sb1.d_e_l_e_t_ = '' "&_ " inner join "&xgempr("sa2", cempr)&" sa2 on "&_ " a2_filial = '' , a2_cod = b1_proc , a2_nreduz in "&_ " ( select nomefor "&_ " from( "&_ " select rank() over(partition filial order prodval desc, filial, nomefor) rank, "&_ " filial, nomefor, quant, prodval "&_ " from( "&_ " select l2_filial filial, a2_nreduz nomefor, isnull(sum(l2_quant),0) quant, isnull(sum(l2_vlritem),0) prodval "&_ " from "&xgempr("sl2", cempr)&" sl2 "&_ " inner join "&xgempr("sb1", cempr)&" sb1 on b1_filial = '"&xfilial("sb1",cempr,cfil)&"' , b1_cod = l2_produto , b1_msblql <> '1' , sb1.d_e_l_e_t_ = '' "&_ " inner join "&xgempr("sa2", cempr)&" sa2 on a2_filial = '"&xfilial("sa2",cempr,cfil)&"' , a2_cod = b1_proc , a2_msblql <> '1' , sa2.d_e_l_e_t_ = '' "&_ " where l2_filial = '"&xfilial("sl2",cempr,cfil)&"' , l2_emissao = @data , sl2.d_e_l_e_t_ = '' "&_ " group by l2_filial, a2_nreduz "&_ " ) tab11 "&_ " )tab21 "&_ " where tab21.rank <= @rows "&_ " order by filial, prodval desc offset 0 rows fetch next @rows rows "&_ " ) "&_ " and a2_msblql <> '1' , sa2.d_e_l_e_t_ = '' "&_ " where l2_filial = '"&xfilial("sl2",cempr,cfil)&"' , l2_emissao = @data , sl2.d_e_l_e_t_ = '' "&_ " group by l2_filial, a2_nreduz, b1_desc, l2_vlritem "&_ " ) " cemprold = cempr rsvendef.movenext while not rsvendef.eof cempr = rsvendef.fields("m0_codigo") cfil = rsvendef.fields("m0_codfil") 'ncont = ncont + 1 if cemprold <> cempr cemprold = cempr 'query das lojas continuação strqryl = strqryl + " union "&_ " select isnull(l2_filial,'') filial, isnull(sum(l2_quant),0) quant, isnull(sum(l2_vrunit),0) prodval "&_ " from "&xgempr("sl2", cempr)&" sl2 "&_ " where l2_emissao = @data "&_ " group l2_filial cube " 'query de fornecedores continuação strqryf = strqryf + " union "&_ " select rank() over(partition filial order prodval desc, filial, nomefor) rank, "&_ " filial, nomefor, quant, prodval "&_ " from( "&_ " select l2_filial filial, a2_nreduz nomefor, isnull(sum(l2_quant),0) quant, isnull(sum(l2_vlritem),0) prodval "&_ " from "&xgempr("sl2", cempr)&" sl2 "&_ " inner join "&xgempr("sb1", cempr)&" sb1 on b1_filial = '"&xfilial("sb1",cempr,cfil)&"' , b1_cod = l2_produto , b1_msblql <> '1' , sb1.d_e_l_e_t_ = '' "&_ " inner join "&xgempr("sa2", cempr)&" sa2 on a2_filial = '"&xfilial("sa2",cempr,cfil)&"' , a2_cod = b1_proc , a2_msblql <> '1' , sa2.d_e_l_e_t_ = '' "&_ " where l2_emissao = @data , sl2.d_e_l_e_t_ = '' "&_ " group by l2_filial, a2_nreduz "&_ " ) tab12 " end if 'query de produtos continuação strqryp = strqryp + " union "&_ " select rank() over(partition nomefor order prodval desc, filial, nomefor, nomeprod) rank, "&_ " filial, nomefor, nomeprod, quant, prodval "&_ " "&_ " ( "&_ " select isnull(l2_filial,'') filial, isnull(a2_nreduz,'') nomefor, isnull(b1_desc,'') nomeprod, "&_ " isnull(sum(l2_quant),0) quant, isnull(sum(l2_vlritem),0) prodval "&_ " from "&xgempr("sl2", cempr)&" sl2 "&_ " inner join "&xgempr("sb1", cempr)&" sb1 on "&_ " b1_filial = '' , b1_cod = l2_produto , b1_msblql <> '1' and sb1.d_e_l_e_t_ = '' "&_ " inner join "&xgempr("sa2", cempr)&" sa2 on "&_ " a2_filial = '' , a2_cod = b1_proc , a2_nreduz in "&_ " ( select nomefor "&_ " from( "&_ " select rank() over(partition filial order prodval desc, filial, nomefor) rank, "&_ " filial, nomefor, quant, prodval "&_ " from( "&_ " select l2_filial filial, a2_nreduz nomefor, isnull(sum(l2_quant),0) quant, isnull(sum(l2_vlritem),0) prodval "&_ " from "&xgempr("sl2", cempr)&" sl2 "&_ " inner join "&xgempr("sb1", cempr)&" sb1 on b1_filial = '"&xfilial("sb1",cempr,cfil)&"' , b1_cod = l2_produto , b1_msblql <> '1' , sb1.d_e_l_e_t_ = '' "&_ " inner join "&xgempr("sa2", cempr)&" sa2 on a2_filial = '"&xfilial("sa2",cempr,cfil)&"' , a2_cod = b1_proc , a2_msblql <> '1' , sa2.d_e_l_e_t_ = '' "&_ " where l2_filial = '"&xfilial("sl2",cempr,cfil)&"' , l2_emissao = @data , sl2.d_e_l_e_t_ = '' "&_ " group by l2_filial, a2_nreduz "&_ " ) tab11 "&_ " )tab21 "&_ " where tab21.rank <= @rows "&_ " order by filial, prodval desc offset 0 rows fetch next @rows rows "&_ " ) "&_ " and a2_msblql <> '1' , sa2.d_e_l_e_t_ = '' "&_ " where l2_filial = '"&xfilial("sl2",cempr,cfil)&"' , l2_emissao = @data , sl2.d_e_l_e_t_ = '' "&_ " group by l2_filial, a2_nreduz, b1_desc, l2_vlritem "&_ " ) " rsvendef.movenext loop 'query de lojas finalizando strqryl = strqryl + " ) l "&_ " order by filial ;" 'query de fornecedores finalizando strqryf = strqryf + " ) tab21 "&_ " where tab21.rank <= @rows "&_ " order by filial, prodval desc ;" 'query de produtos finalizando strqryp = strqryp + ") b "&_ "where b.rank <= @rows "&_ "order "&_ " filial, nomefor, prodval desc-- offset 0 rows fetch next @rows rows ;" 'criando um objeto de conexão com base de dados e executamos query set rsqryl=server.createobject("adodb.recordset") rsqryl.open strqryl, strconexao set rsqryf=server.createobject("adodb.recordset") rsqryf.open strqryf, strconexao set rsqryp=server.createobject("adodb.recordset") rsqryp.open strqryp, strconexao 'totalizadores while not rsqryl.eof if rsqryl.fields("filial") <> "" exit end if strtot = strtot + cdbl(rsqryl.fields("prodval")) strpt = strpt + cdbl(rsqryl.fields("quant")) ' strt = 100 'strt + cdbl(rsqry.fields("clientes")) ' strtkt = 100 'strtkt + cdbl(rsqry.fields("ticket")) rsqryl.movenext loop 'strtkt = strtkt / ncont %> <!-- trecho html fonte--> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="css/datepicker3.css" rel="stylesheet"> <link href="css/styles.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <style type="text/css"> ${demo.css} </style> <!-- continuação trecho highcharts fonte--> <script type="text/javascript"> $( function () { //create variable can pass value dynamically var chartype = 'column'; //on page load call function setdynamicchart setdynamicchart(chartype); //jquery part a- on click call function setdynamicchart(dynval) , pass chart type $('.option').click(function(){ //get value 'a' tag var chartype = $(this).attr('id'); setdynamicchart(chartype); }); function setdynamicchart(chartype){ // create chart $('#container').highcharts ( { chart: { type: chartype }, exporting: { enabled: true }, navigation: { menuitemstyle: { fontweight: 'normal', background: 'none' }, buttonoptions: { align: 'left' }, menuitemhoverstyle: { fontweight: 'bold', background: 'none', color: 'black' } }, title: { text: 'vendas no dia' }, subtitle: { text: 'clique para detalhes.' }, xaxis: { type: 'category' }, yaxis: { title: { text: 'valor total por loja em r$' } }, legend: { enabled: false }, plotoptions:{ series: { borderwidth: 0, datalabels: { enabled: true, format: '{point.y:.2f}' } } }, tooltip: { headerformat: '<span style="font-size:11px">{series.name}</span><br>', pointformat: '<span style="color:{point.color}">{point.name}</span>: <b>r$ {point.y:.2f}}</b><br/>' }, series: [{ name: "lojas", colorbypoint: true, data: [<% while not rsqryl.eof %> <%if rsqryl.fields("filial") <> "" then%> { name: "filial: <%=rsqryl.fields("filial")%>", y: <%response.write( replace(rsqryl.fields("prodval"),",",".") )%> , drilldown: "detalhes f<%=rsqryl.fields("filial")%>" }, <% end if %> <% rsqryl.movenext %> <% loop %> ] }], drilldown: { series: [<% while not rsqryf.eof %> { name: "detalhes f<%=rsqryf.fields("filial")%>", colorbypoint: true, id: "detalhes f<%=rsqryf.fields("filial")%>", data: [ <% cfilialf = rsqryf.fields("filial") %> <% do while not rsqryf.eof if rsqryf.fields("filial") <> cfilialf exit end if%> { name: "<%=rsqryf.fields("nomefor")%>", y: <%response.write( replace(rsqryf.fields("prodval"),",",".") )%>, drilldown: "f_<%=(rsqryf.fields("filial")&rsqryf.fields("nomefor"))%>" }, <% rsqryf.movenext %> <%loop %> ] }, <% if not rsqryp.eof cfilialp = rsqryp.fields("filial") end if %> <% while not rsqryp.eof if rsqryp.fields("filial") <> cfilialp exit end if%> { name: "f_<%=(rsqryp.fields("filial") & rsqryp.fields("nomefor") )%>", id: "f_<%=(rsqryp.fields("filial") & rsqryp.fields("nomefor") )%>", data: [ <%cfornp = rsqryp.fields("filial") & rsqryp.fields("nomefor") do while not rsqryp.eof if rsqryp.fields("filial") & rsqryp.fields("nomefor") <> cfornp exit end if%> { name: "<%=rsqryp.fields("nomeprod")%>", y: <%response.write( replace(rsqryp.fields("prodval"),",",".") )%> }, <% rsqryp.movenext loop %> ] }, <%loop loop%> ] } }); } }); <% ' fecha os record set's rsvendef.close rsqryl.close rsqryf.close rsqryp.close %> </script> <!-- fim trecho highcharts fonte--> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/data.js"></script> <script src="https://code.highcharts.com/modules/drilldown.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> </head> <body> <div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main"><!--/.row--> <div class="row"> <div class="col-lg-12"> <h1 class="page-header"><!--/.row--> </h1> </div> </div> <div class="row"> <div class="col-xs-12 col-md-6 col-lg-3"> <div class="panel panel-blue panel-widget "> <div class="row no-padding"> <div class="col-sm-3 col-lg-5 widget-left"> <em class="glyphicon glyphicon-shopping-cart glyphicon-l"></em> </div> <div class="col-sm-9 col-lg-7 widget-right"> <div class="small">venda total</div> <div class="small"><% response.write(formatcurrency(strtot))%></div> </div> </div> </div> </div> <div class="col-xs-12 col-md-6 col-lg-3"> <div class="panel panel-orange panel-widget"> <div class="row no-padding"> <div class="col-sm-3 col-lg-5 widget-left"> <em class="glyphicon glyphicon-comment glyphicon-l"></em> </div> <div class="col-sm-9 col-lg-7 widget-right"> <div class="small">itens vendidos</div> <div class="small"><%response.write(strpt)%></div> </div> </div> </div> </div> <div class="col-xs-12 col-md-6 col-lg-3"> <div class="panel panel-teal panel-widget"> <div class="row no-padding"> <div class="col-sm-3 col-lg-5 widget-left"> <em class="glyphicon glyphicon-user glyphicon-l"></em> </div> <div class="col-sm-9 col-lg-7 widget-right"> <div class="small">clientes</div> <div class="small"><%response.write(strt)%></div> </div> </div> </div> </div> <div class="col-xs-12 col-md-6 col-lg-3"> <div class="panel panel-red panel-widget"> <div class="row no-padding"> <div class="col-sm-3 col-lg-5 widget-left"> <em class="glyphicon glyphicon-stats glyphicon-l"></em> </div> <div class="col-sm-9 col-lg-7 widget-right"> <div class="small">ticket med.</div> <div class="small"><%response.write(formatcurrency(strtkt))%></div> </div> </div> </div> </div> </div><!--/.row--> <div class="row"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-heading">vendas dia</div> <div class="panel-body"> <div align="right" style="width: 100%; margin: 0 auto; height: 15px;"> <a href="javascript:void(0);" class="option" id="column">colunas - </a> <a href="javascript:void(0);" class="option" id="bar">barras - </a> <a href="javascript:void(0);" class="option" id="line">linhas - </a> <a href="javascript:void(0);" class="option" id="pie">pizza</a> </div> <div id="container" style="min-width: 310px; height: 100%; margin: 0 auto"></div> </body> </html> <!-- fim trecho html fonte-->
the main issue code not triggering setdynamicchart function. in current code, called on load of page, during ajax load, not happening. have call function after ajax load complete.
as using jquery, have changed code ajax call jquery way:
<!--#include virtual ="/bi/header.asp"--> <!--#include virtual ="/bi/sidebar.asp"--> <% 'your asp code is.. %> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> </head> <body> <center> <div> <form method="post" action="javascript:void(0);" name="form1"> <label for="newuserid">data:</label> <input type="text" name="data1" id="data1 size="20" /> <input id="btncheckavailability" type="button" value="check availability"><br> <div id="available"> <script> function drawgraph() { var chartype='column'; setdynamicchart(chartype); } $("#btncheckavailability").on("click",function(){ $.post("vendas.asp",{"strcmd":"availability","strdata1":$("#data1").val()}, function(data) { if(data) { $("#available").html(data); drawgraph(); } else { console.log("no data"); } }); }); </script> </div> </div> </form> </body> </html> in called page, can remove script includes.
this works me dummy values, since don't have db setup. have make changes @ end.
Comments
Post a Comment