vtiger has own js files think there maybe conflicts. anyway in browser console:
synchronous xmlhttprequest on main thread deprecated because of detrimental effects end user's experience. more http://xhr.spec.whatwg.org/
error: google charts loader.js can loaded once.
the later maybe because vtiger calls .tpl file twice dont know why.
as first warning : apperently happens if jquery appends external js files. read should work if async set false dont know how in vtiger
if refresh page everthing works nicely.
.tpl :
{strip} <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script> var rawdata = {$sales|@json_encode}; var scatterdata = []; var mydata = []; var count = 0; var sum = 0; var num = 0; for(var = 0 ; < rawdata.length; i++){ for(var j = 0 ; j < rawdata[i][1]; j++){ scatterdata[count] = []; scatterdata[count][0] = rawdata[i][0]; scatterdata[count][1] = rawdata[i][2]; count++; } } count = 0; for(i = 0; < scatterdata.length; i++){ sum = 0; num = 0; for(j = 0; j < scatterdata.length; j++){ if(scatterdata[i][0] == scatterdata[j][0]){ sum += scatterdata[j][1]; num++; } } mydata[count] = []; var tmpdate = scatterdata[i][0].split("-"); mydata[count][0] = []; mydata[count][0][0] = tmpdate[0]; mydata[count][0][1] = tmpdate[1]; mydata[count][0][2] = tmpdate[2]; mydata[count][1] = scatterdata[i][1]; mydata[count][2] = sum / num; count++; } </script> <script type="text/javascript" src="resources/pfgraph.js"></script> <pre> {$sales|@debug_print_var} </pre> <form> <table class="table table-bordered equalsplit detailview-table"> <thead> <tr> <th class="blockheader" colspan="4"> <img class="cursorpointer alignmiddle blocktoggle hide" src="layouts/vlayout/skins/alphagrey/images/arrowright.png" data-mode="hide" data-id="31"> <img style="display: inline;" class="cursorpointer alignmiddle blocktoggle" src="layouts/vlayout/skins/alphagrey/images/arrowdown.png" data-mode="show" data-id="31"> details </th> </tr> </thead> <tbody> <tr> <td class="fieldlabel medium"> <label class="muted pull-right marginright10px">product</label> </td> <td class="fieldvalue medium">{$product[0]}</td> <td class="fieldlabel medium"> <label class="muted pull-right marginright10px">min amount</label> </td> <td class="fieldvalue medium"><input type="text" name="minamount"></td> </tr> <tr> <td class="fieldlabel medium"> <label class="muted pull-right marginright10px">list price</label> </td> <td class="fieldvalue medium">{$product[1]}</td> <td class="fieldlabel medium"> <label class="muted pull-right marginright10px">max amount</label> </td> <td class="fieldvalue medium"><input type="text" name="maxamount"></td> </tr> <tr> <td class="fieldlabel medium"> <label class="muted pull-right marginright10px">lowest price</label> </td> <td class="fieldvalue medium"></td> <td class="fieldlabel medium"> <label class="muted pull-right marginright10px">min price</label> </td> <td class="fieldvalue medium"><input type="text" name="minprice"></td> </tr> <tr> <td class="fieldlabel medium"> <label class="muted pull-right marginright10px">average price</label> </td> <td class="fieldvalue medium"></td> <td class="fieldlabel medium"> <label class="muted pull-right marginright10px">max price</label> </td> <td class="fieldvalue medium"><input type="text" name="maxprice"></td> </tr> <tr> <td class="fieldlabel medium"> <label class="muted pull-right marginright10px">highest price</label> </td> <td class="fieldvalue medium"></td> <td class="fieldlabel medium"> <label class="muted pull-right marginright10px">test</label> </td> <td class="fieldvalue medium"><button>filter</button></td> </rt> </tbody> </table> </form> <style> #chart_div{ margin: 20px 0px; padding: 25px; background-color: white; width: 96%; -webkit-box-shadow: 4px 4px 15px 0px rgba(50, 50, 50, 0.3); -moz-box-shadow: 4px 4px 15px 0px rgba(50, 50, 50, 0.3); box-shadow: 4px 4px 15px 0px rgba(50, 50, 50, 0.3); } </style> <div id="chart_div" ></div> {/strip} .js :
google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setonloadcallback(drawchart); function drawchart() { var data = new google.visualization.datatable(); data.addcolumn('datetime', 'date'); data.addcolumn('number', 'price'); data.addcolumn('number', 'price (average)'); var maxval = 0; for(var = 0; < mydata.length; i++ ){ data.addrow([new date(mydata[i][0][0], mydata[i][0][1], mydata[i][0][2]), mydata[i][1], mydata[i][2]]); //get highest price if (mydata[i][1] > maxval){ maxval = mydata[i][1]; } } var options = { haxis: { title: 'date', viewwindow: { min: new date(mydata[0][0][0], mydata[0][0][1], mydata[0][0][2]), max: new date(mydata[mydata.length-1][0][0], mydata[mydata.length-1][0][1], mydata[mydata.length-1][0][2]) }, gridlines: { count: -1, units: { days: { format: ['mmm dd'] }, } }, }, vaxis: { title: 'price', minvalue: 0, maxvalue: maxval }, legend: 'none', series: { 0: { pointsize: 8, dataopacity: 0.6, pointshape: 'diamond' }, 1: { linewidth: 2, color: '#509c49', pointsize: 0 } } }; var chart = new google.visualization.scatterchart(document.getelementbyid('chart_div')); chart.draw(data, options); }
try adding js files using getheaderscripts in modules/(your_module)/views/edit.php.
function getheaderscripts(vtigercrm_request $request) { $headerscriptinstances = parent::getheaderscripts($request); $jsfilenames = array( 'libraries.jquery.multiplefileupload.jquery_multifile' ); // add js path did jquery_multifile $jsscriptinstances = $this->checkandconvertjsscripts($jsfilenames); $headerscriptinstances = array_merge($headerscriptinstances, $jsscriptinstances); return $headerscriptinstances; } 
Comments
Post a Comment