Why it does not work Var Options Min and Max in a gauge chart loop Google

Navigation
1

I need to create multiple Chart Gauges with values max and min variables. The solution I found is to insert the values at table and within a script go through the table to get the values. The drawings appear well except for the values max and min of each gauge . If I have more than one gauge, the value max and min of all gauges is the value max and min of the "last record". What am I doing wrong? 

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


<table id="myTable">
    <tr>
        <th>
            ID
        </th>
        <th>
            Name
        </th>
        <th>
            Value
        </th>
        <th>
            Value Min
        </th>
        <th>
            Value Max
        </th>
    </tr>
    <tr>
        <td id="ID">1</td>
        <td id="gauge">gauge1</td>
        <td id="value">20</td>
        <td id="min">0</td>
        <td id="max">40</td>
    </tr>
    <tr>
        <td id="ID">2</td>
        <td id="gauge">gauge2</td>
        <td id="value">800000</td>
        <td id="min">500000</td>
        <td id="max">1000000</td>
    </tr>
    <tr>
        <td id="ID">3</td>
        <td id="gauge">gauge3</td>
        <td id="value">25</td>
        <td id="min">10</td>
        <td id="max">30</td>
    </tr>
</table>
    <table>
        <tr>
            <td>
                <div id="chartID" style="width:400px"></div>
            </td>
        </tr>
    </table>


<script>


    google.charts.load('current', { 'packages': ['gauge'] });
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'value');

        //gets table
        var oTable = document.getElementById('myTable');

        //gets rows of table
        var rowLength = oTable.rows.length;

        for (i = 1; i < rowLength; i++) {

            //gets cells of current row
            var oCells = oTable.rows.item(i).cells;
            var ID = parseFloat(oCells.item(0).innerHTML);
            var chartID = 'chart_div_' + ID;
            var cellName = String(oCells.item(1).innerHTML);
            var cellValue = parseInt(oCells.item(2).innerHTML);
            var cellValMin = parseFloat(oCells.item(3).innerHTML);
            var cellValMax = parseFloat(oCells.item(4).innerHTML);

            //calculate major tick increments
            var increment = (parseFloat(cellValMax) - parseFloat(cellValMin)) / 4;
            var tick0 = cellValMin;
            var tick1 = parseFloat(cellValMin) + parseFloat(increment);
            var tick2 = parseFloat(tick1) + parseFloat(increment);
            var tick3 = parseFloat(tick2) + parseFloat(increment);
            var tick4 = cellValMax;

            var Ticks = [tick0, tick1, tick2, tick3, tick4];

            data.addRows([
                   [cellName, cellValue]
            ]);
            
            var options = {
                width: 400, height: 460,
                greenFrom: tick3, greenTo: cellValMax,
                yellowFrom: tick1, yellowTo: tick3,
                redFrom: cellValMin, redTo: tick1,
                minorTicks: cellValMin,
                majorTicks: Ticks,
                max: cellValMax,
                min: cellValMin
            };

            var chart = new google.visualization.Gauge(document.getElementById('chartID'));
            chart.draw(data, options);
        }
    }
</script>

link

The example shows how the gauges take the value max and min of the last record. It takes a while to draw the gauges. Thanks

    
asked by Ariel Quintana 31.08.2016 в 13:14
source

1 answer

1

Short answer

Although it is possible to draw several manometers using a single callback, they should have the same options. When they are required to be different, they should be drawn separately.

Explanation

On the documentation (in English) of the Google Charts, the section on manometers (gauges) includes an example showing three manometers. In this example although the values of the indicator (data) vary for each case, the division marks, the minimum and maximum values and other parameters (options) are the same. This is because using the make a call is valid because the options are the same for the three manometers.

Since in this case it is required that each graphic have different options, they should be drawn separately, as explained in the section on how to place several charts on a web page. It is said section that is called google.charts.setOnLoadCallback () with the callback that draws each graph as input and includes an example. This implies that it is required to include a <div> for each graph.

The following code is based on the code of the question.

  • the code was separated according to each section of the JavaScript / HTML / CSS fragment
  • the name was changed to the original drawChart function and
  • In the HTML section Three divs were included and for the purpose of being displayed on this page, the size was reduced to 100 px.
  • In the JavaScript section:
    • Three calls google.charts.setOnLoadCallback() were included
    • Three functions were included drawChartn , where n is 1, 2 or 3
    • The original function drawChart was renamed, the lines corresponding to the drawing of the pressure gauges were deleted and some lines of code such as the for. were commented. 

google.charts.load('current', { 'packages': ['gauge'] });
google.charts.setOnLoadCallback(drawChart1);
google.charts.setOnLoadCallback(drawChart2);
google.charts.setOnLoadCallback(drawChart3);

function drawChart1(){
  var i = 1;
  var manometro = dibujarManometro(i);
  var cellName = manometro[0];
  var cellValue = manometro[1]
  var options = manometro[2];
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'value');
  data.addRows([
         [cellName, cellValue]
  ]);

  var chart = new google.visualization.Gauge(document.getElementById('chartID' + i));
  chart.draw(data, options);
}
function drawChart2(){
  var i = 2;
  var manometro = dibujarManometro(i);
  var cellName = manometro[0];
  var cellValue = manometro[1]
  var options = manometro[2];
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'value');
  data.addRows([
         [cellName, cellValue]
  ]);

  var chart = new google.visualization.Gauge(document.getElementById('chartID' + i));
  chart.draw(data, options);
}
function drawChart3(){
  var i = 3;
  var manometro = dibujarManometro(i);
  var cellName = manometro[0];
  var cellValue = manometro[1]
  var options = manometro[2];
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'value');
  data.addRows([
         [cellName, cellValue]
  ]);

  var chart = new google.visualization.Gauge(document.getElementById('chartID' + i));
  chart.draw(data, options);
}
function dibujarManometro(i) {
    /**
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'value');
    */

    //gets table
    var oTable = document.getElementById('myTable');

    //for (i = 1; i < rowLength; i++) {

        //gets cells of current row
        var oCells = oTable.rows.item(i).cells;
        var ID = parseFloat(oCells.item(0).innerHTML);
        var chartID = 'chart_div_' + ID;
        var cellName = String(oCells.item(1).innerHTML);
        var cellValue = parseInt(oCells.item(2).innerHTML);
        var cellValMin = parseFloat(oCells.item(3).innerHTML);
        var cellValMax = parseFloat(oCells.item(4).innerHTML);

        //calculate major tick increments
        var increment = (parseFloat(cellValMax) - parseFloat(cellValMin)) / 4;
        var tick0 = cellValMin;
        var tick1 = parseFloat(cellValMin) + parseFloat(increment);
        var tick2 = parseFloat(tick1) + parseFloat(increment);
        var tick3 = parseFloat(tick2) + parseFloat(increment);
        var tick4 = cellValMax;

        var Ticks = [tick0, tick1, tick2, tick3, tick4];

        /**
        data.addRows([
               [cellName, cellValue]
        ]);
        */
        
        var options = {
            width: 100, height: 100,
            greenFrom: tick3, greenTo: cellValMax,
            yellowFrom: tick1, yellowTo: tick3,
            redFrom: cellValMin, redTo: tick1,
            minorTicks: cellValMin,
            majorTicks: Ticks,
            max: cellValMax,
            min: cellValMin
        };
    //}
    return [cellName,cellValue,options];
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


<table id="myTable">
    <tr>
        <th>
            ID
        </th>
        <th>
            Name
        </th>
        <th>
            Value
        </th>
        <th>
            Value Min
        </th>
        <th>
            Value Max
        </th>
    </tr>
    <tr>
        <td id="ID">1</td>
        <td id="gauge">gauge1</td>
        <td id="value">20</td>
        <td id="min">0</td>
        <td id="max">40</td>
    </tr>
    <tr>
        <td id="ID">2</td>
        <td id="gauge">gauge2</td>
        <td id="value">800000</td>
        <td id="min">500000</td>
        <td id="max">1000000</td>
    </tr>
    <tr>
        <td id="ID">3</td>
        <td id="gauge">gauge3</td>
        <td id="value">25</td>
        <td id="min">10</td>
        <td id="max">30</td>
    </tr>
</table>
    <table>
        <tr>
            <td>
                <div id="chartID1" style="width:100px"></div>
            </td>
            <td>
                <div id="chartID2" style="width:100px"></div>
            </td>
            <td>
                <div id="chartID3" style="width:100px"></div>
            </td>
        </tr>
    </table>

Related:

answered by 03.04.2017 в 16:44
Variable CountryCriteriaId no longer exists in the Click_performance_report reports? Jquery DataTables with column image fails the search