javascript - Chart not displayed after second set of data added -
this part of grails application. user clicks button create api. sent page fill in data , click execute button. once api done executing redirected page (list.gsp), has chart @ top of it. bar chart displays data. chart should display 1 set of data, when second api executed same chart should redisplay two/both sets of data.
what's happening on laptop chart disappears after second api executed. on other developers laptop modified code displays fine. totally stumped on one. had them zip project , send me. ran theirs same results. running same version of java (7)and grails (2.2.5). pointers appreciated!
<%@ page import="foo.api" %> <!doctype html> <html> <head> <meta name="layout" content="main"> <g:set var="entityname" value="${message(code: 'default.api.label', default: 'api')}" /> <title><g:message code="default.list.label" args="[entityname]" /></title> <script src="https://cdn.anychart.com/js/latest/anychart.min.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.css"> </head> <body> <a href="#list-api" class="skip" tabindex="-1"><g:message code="default.link.skip.label" default="skip content…"/></a> <div class="nav" role="navigation"> <ul> <li><a class="home" href="${createlink(uri: '/')}"><g:message code="default.home.label"/></a></li> <li><g:link class="create" action="create"><g:message code="default.button.execute.label" args="[entityname]" /></g:link></li> </ul> </div> <div id="container" style="width: 500px; height: 400px;"></div> %{--<tr class="${(i % 2) == 0 ? 'even' : 'odd'}">--}% <script > anychart.ondocumentload(function(){ %{--var data = [--}% %{--["cheapest", ${fieldvalue(bean: apiinstance, field: "cheapestprice")}, 100, 175],--}% %{--["highest", ${fieldvalue(bean: apiinstance, field: "highestprice")}, 200, 250],--}% %{--["range", ${fieldvalue(bean: apiinstance, field: "rangeprice")}, 300, 400],--}% %{--["average", ${fieldvalue(bean: apiinstance, field: "averageprice")}, 500, 600],--}% %{--["median", ${fieldvalue(bean: apiinstance, field: "medianprice")}, 700, 800],--}% %{--["avg/50", ${fieldvalue(bean: apiinstance, field: "avg50")}, 900, 1000],--}% %{--];--}% var data = [ ["cheapest"], ["highest"], ["range"], ["average"], ["median"], ["avg/50"] ]; data.foreach(function(d){ <g:each in="${apiinstancelist}" var="apiinstance"> if(d[0] == "cheapest"){ d.push(${fieldvalue(bean: apiinstance, field: "cheapestprice")}); } else if (d[0] == "highest"){ d.push( ${fieldvalue(bean: apiinstance, field: "highestprice")}); }else if (d[0] == "range"){ d.push( ${fieldvalue(bean: apiinstance, field: "rangeprice")}); }else if (d[0] == "average"){ d.push( ${fieldvalue(bean: apiinstance, field: "averageprice")}); }else if (d[0] == "median"){ d.push( ${fieldvalue(bean: apiinstance, field: "medianprice")}); }else if (d[0] == "avg/50"){ d.push( ${fieldvalue(bean: apiinstance, field: "avg50")}); } </g:each> }); // create mapping list on 1 data set var datamappinglist = anychart.data.mapastable(data); // map x , value data set //compares every 2 apiinstances for(var i=0; i<datamappinglist.length; i+= 2){ var colchart = anychart.column(datamappinglist[i], datamappinglist[i+1]); colchart.title("top flight search statistics"); colchart.container("container"); colchart.draw(); } }); %{--anychart.ondocumentload(function() {--}% %{--var data = anychart.data.set([--}% %{--["cheapest", ${fieldvalue(bean: apiinstance, field: "cheapestprice")}],--}% %{--["highest", ${fieldvalue(bean: apiinstance, field: "highestprice")}],--}% %{--["range", ${fieldvalue(bean: apiinstance, field: "rangeprice")}],--}% %{--["average", ${fieldvalue(bean: apiinstance, field: "averageprice")}],--}% %{--["median", ${fieldvalue(bean: apiinstance, field: "medianprice")}],--}% %{--["avg/50", ${fieldvalue(bean: apiinstance, field: "avg50")}],--}% %{--<%-- example of changing color of 1 bar in chart ["peter", 13000, 16500, "#5cd65c", "#009933", null, {enabled: true}], --%>--}% %{--]);--}% %{--// create instance of chart data--}% %{--var chart = anychart.column();--}% %{--var series = chart.column(data);--}% %{--chart.title("top flight search statistics");--}% %{--// pass container id, chart displayed there--}% %{--chart.container("container");--}% %{--// call chart draw() method initiate chart display--}% %{--chart.draw();--}% %{--});--}% </script> %{--</tr>--}% <div id="list-api" class="content scaffold-list" role="main"> <h1><g:message code="default.list.label" args="[entityname]" /></h1> <g:if test="${flash.message}"> <div class="message" role="status">${flash.message}</div> </g:if> <table> <thead> <tr> <g:sortablecolumn property="origin" title="${message(code: 'api.origin.label', default: 'origin')}" /> <g:sortablecolumn property="destination" title="${message(code: 'api.destination.label', default: 'destination')}" /> <g:sortablecolumn property="departuredate" title="${message(code: 'api.departuredate.label', default: 'departure date')}" /> <g:sortablecolumn property="returndate" title="${message(code: 'api.returndate.label', default: 'return date')}" /> <g:sortablecolumn property="cabin" title="${message(code: 'api.cabin.label', default: 'cabin')}" /> <g:sortablecolumn property="cheapestprice" title="${message(code: 'api.cheapestprice.label', default: 'cheapest $')}" /> <g:sortablecolumn property="highestprice" title="${message(code: 'api.highestprice.label', default: 'highest $')}" /> <g:sortablecolumn property="averageprice" title="${message(code: 'api.averageprice.label', default: 'average $')}" /> </tr> </thead> <tbody> <g:each in="${apiinstancelist}" status="i" var="apiinstance"> <tr class="${(i % 2) == 0 ? 'even' : 'odd'}"> <td>${fieldvalue(bean: apiinstance, field: "origin")}</td> <td>${fieldvalue(bean: apiinstance, field: "destination")}</td> <td><g:formatdate date="${apiinstance.departuredate}" /></td> <td><g:formatdate date="${apiinstance.returndate}" /></td> <td>${fieldvalue(bean: apiinstance, field: "cabin")}</td> <td>${fieldvalue(bean: apiinstance, field: "cheapestprice")}</td> <td>${fieldvalue(bean: apiinstance, field: "highestprice")}</td> <td>${fieldvalue(bean: apiinstance, field: "averageprice")}</td> </tr> </g:each> </tbody> </table> <div class="pagination"> <g:paginate total="${apiinstancetotal}" /> </div> </div> </body>
Comments
Post a Comment