Ошибка при добавлении графиков Google в vtiger

Question

Vtiger имеет свои собственные файлы js, поэтому я думаю, что там могут быть конфликты. Во всяком случае, это то, что я получаю в моем браузере консоли:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/

Error: Google Charts loader.js can only be loaded once.

Чем позже, может быть, потому что Vtiger называет файл .TPL дважды, но я не знаю, почему.

Что касается первого предупреждения: это происходит, если jquery добавляет внешние js-файлы. Я также читал, что он должен работать, если для async установлено значение false, но я не знаю, как это сделать в vtiger

Если я обновляю страницу, все работает хорошо.

.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 i = 0 ; i < 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; i < 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 i = 0; i < 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); 
} 

Answer 1

Попробуйте с добавлением ваши JS файлов с помощью getHeaderScripts в modules/(YOUR_MODULE)/views/Edit.php.

function getHeaderScripts(VtigerCrm_Request $request) { 
      $headerScriptInstances = parent::getHeaderScripts($request); 

      $jsFileNames = array(
       'libraries.jquery.multiplefileupload.jquery_MultiFile' 
      ); 
      // Add your js path like i did for jquery_MultiFile 
      $jsScriptInstances = $this->checkAndConvertJsScripts($jsFileNames); 
      $headerScriptInstances = array_merge($headerScriptInstances, $jsScriptInstances); 
      return $headerScriptInstances; 
    }