Google Chart API

[jose_dli]

Hello, I am trying to implement the use of surplus photovoltaic energy taking into account the weather and radiation forecast. Now I am trying to tune the algorithm, plotting with google charts some info. I am able to plot different values, but I am not able to solve two issues

- With several plots, tooltip is only visible in the first #plan. Exchanging from one #plan to the other, the one that wasn't working now works, and vice versa.

- there is differenci if I access to the plan from home page or directly from specific url, i.e. http://192.168.0.10/scada-vis/#21. now the information lixe axes title and legend

I attach a snapshot of plan21, whose has the first chart, the tooltip works properly but not the info like legend. I draw the cursor by hand  


The #plan24 has not work the tooltip


Changing the plot form #plan24 to #plan21 tooltips work well. And if I load 192.168.0.10/scada-vis/#21 the information like legend, it is showed



The javascript used:

Code:

$(function(){
  // load chart JS
  $.getScript('https://www.gstatic.com/charts/loader.js', function() {
   
    google.charts.load('current', {'packages':['gauge', 'corechart'],language: 'es'});
 
    google.charts.setOnLoadCallback(drawSolcast);
    google.charts.setOnLoadCallback(drawGraphBC);

    //------------------------------------------------------------------------------------------------
    //-- plan21, graph consumo BC
    //--- 
    function drawGraphBC() { 

      // create empty element and add it to plan with ID=21
      var graphEl = $('<div></div>').css({
        position: 'absolute',
        width: 1000, height: 350,
        top: 20,  left: 20
      }).appendTo('#plan-21');

      $.getJSON('/user/energia.lp', function(jsonData) {
        console.log(jsonData);

        var data4 = new google.visualization.arrayToDataTable(jsonData);
    
        var opt4 = { title: 'Calefacción / ACS' ,
          width: 1000, height: 350,
          // Gives each series an axis that matches the vAxes number below.
          focusTarget: 'category', 
          seriesType: 'bars',
          series: {
            0: {targetAxisIndex: 0, areaOpacity: 1, lineWidth: 1},
            1: {targetAxisIndex: 0, areaOpacity: 1, lineWidth: 1},
            2: {targetAxisIndex: 1, areaOpacity: 0, visibleInLegend: false, type: 'line'}
          } ,
          vAxes: {
            // Adds titles to each axis.
            0: {title: 'Potencia [kW]', viewWindow: {min: 0, max:2500} },
            1: { title: 'COP', gridlines: { interval: [ 1, 2, 3, 4, 5, 6 ] },
                viewWindow: {min: 1, max: 6}, gridlines: { count: 0} }
          }
        };
        var chart4 = new google.visualization.ComboChart(graphEl.get(0));
        chart4.draw(data4, opt4);
      }); //getJSON
    }; //drawWCons   

    //------------------------------------------------------------------------------------------------
    //-- plan24, grafica weather
    //---
    function drawSolcast() { 
      // create empty element and add it to plan with ID=24
      var graphSol = $('<div></div>').css({
        position: 'absolute',
        width: 1000, height: 350,
        top: 400, left: 20,
        border: 'solid'
      }).appendTo('#plan-21');
     
      $.getJSON('/user/sol2graph.lp', function(jsonObj) {
        console.log(jsonObj);

        var data5 = new google.visualization.DataTable();
        data5.addColumn('date', 'fecha');
        data5.addColumn('number', "pv_estimate");
        data5.addColumn('number', "kWh/dia");
       
          // a formato tiempo
        for (var i = 0; i < jsonObj.length; i++) {
          jsonObj[i][0] = new Date( jsonObj[i][0] * 1000);
        }
     
        data5.addRows(jsonObj);
       
        var tickMarks = [];
        var hoy = new Date()
        for (var i = 0; i < 7; i++) {
          tickMarks.push(new Date(hoy.getTime() + i*24*60*60*1000));
        }              
       
        var opt5 = { title: 'Pv kWh' ,
          width: 1000, height: 350,
          chartArea: {width: '90%', height: '80%'},
          focusTarget: 'category', 
          seriesType: 'lines',
          hAxis: {
            format: 'EE, d MMM',
            gridlines: { count: 7},
            ticks: tickMarks
          }, 
          series: {
            0: {targetAxisIndex: 0, areaOpacity: 1, lineWidth: 1},
            1: {targetAxisIndex: 1, areaOpacity: 0.2, lineWidth: 1, type: 'area', color: '#f1ca3a' }
          },
          vAxes: {
            // Adds titles to each axis.
            0: {title: '[kW]', viewWindow: {min: 0, max:3.5}, gridlines: {interval: [ 0.5, 1, 1.5, 2, 2.5, 3 ] }},
            1: { viewWindow: {min: 0, max: 70}, gridlines: { count: 0}, ticks: [ ] }
          }
        };
       
        var date_formatter = new google.visualization.DateFormat({ pattern: 'dd MMM, HH:mm' });
        date_formatter.format(data5, 0);
       
        var chart5 = new google.visualization.ComboChart(graphSol.get(0));
          
         
        chart5.draw(data5, opt5);

      }); //getJSON
    }; //drawSolcast   
  
   
  }); // getscript
});

Any help is welcome, thanks

Jose
--