Graph bars in red when value below the stipulated average

Asked

Viewed 35 times

0

I use this script to generate average graph of questions, how to make the bars change color (red for example) when the media is less than 8 (for example)

<script type="text/javascript">
//carregando modulo visualization
google.load("visualization", "1", {packages:["corechart"]});

//função de monta e desenha o gráfico
function drawChart() {
//variavel com armazenamos os dados, um array de array's
//no qual a primeira posição são os nomes das colunas
var data = google.visualization.arrayToDataTable([

<?php

                    //get records from database
                    $query = $db->query("SELECT avg(`Nota`)*10 as media FROM cs_gabFacil_media_questoes gf


                     ");
                    if($query->num_rows > 0){ 
                        while($row = $query->fetch_assoc()){ ?>

                    ['', 'Media'],
                    ['<?php echo $row['labelQuestion']; ?>', <?php echo round($row['media'],2); ?>],
                    <?php } }else{ 


 ?>
                    <?php } ?>

]);
//opções para exibição do gráfico
var options = {
title: 'Media Questões',//titulo do gráfico
is3D: true // false para 2d e true para 3d o padrão é false
};
//cria novo objeto PeiChart que recebe
//como parâmetro uma div onde o gráfico será desenhado
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
//desenha passando os dados e as opções
chart.draw(data, options);
}
//metodo chamado após o carregamento
google.setOnLoadCallback(drawChart);
</script>

<body>
<div id="chart_div" style="width: 98%; height: 600px;"></div>
</body>

inserir a descrição da imagem aqui

php javascript mysql
  • 1

    You’ve seen this solution: https://stackoverflow.com/a/40720444/5675325 ?

  • I will try to apply, I know nothing of javascript, rsrs

  • Resolvi, the @tiagoperes tip gave right, how do I do now? I put the solution I used, I got the code almost all ready.

  • 1

    Yes, put the code in response giving an explanation of what was done and mark it as the right answer.

1 answer

0


Response based on this link:

https://stackoverflow.com/a/40720444/5675325

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Asset','Days in Stock'],
    ['4990/473',606],['4990/489',504],['4990/557',159],['4990/559',147],
    ['4990/578',87],['4990/581',63],['4990/582',53],['4990/586',41],
    ['4990/590',25],['4990/592',20],['4990/593',5],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
    // style column
    {
      calc: function (dt, row) {
        if ((dt.getValue(row, 1) >= 0) && (dt.getValue(row, 1) <= 60)) {
          return 'green';
        } else if ((dt.getValue(row, 1) > 60) && (dt.getValue(row, 1) <= 100)) {
          return 'yellow';
        } else {
          return 'red';
        }
      },
      type: 'string',
      role: 'style'
    },
    // annotation column
    {
      calc: 'stringify',
      sourceColumn: 1,
      type: 'string',
      role: 'annotation'
    }
  ]);

  var options = {
    title: '',
    titleTextStyle: {
      fontSize: 16,
      bold: true
    },
    backgroundColor: 'transparent',
    chartArea: {
      left:80,
      top:30,
      bottom:60,
      right:10
    },
    legend: {
      textStyle: {
        fontSize: 11
      }
    },
    vAxis: {
      title: 'Asset',
      textStyle: {
        fontName: 'Arial',
        fontSize: 10
      },
      titleTextStyle: {
        fontSize: 12,
        italic: false,
        bold:true
      }
    },
    hAxis: {
      title: 'Days in Stock',
      gridlines: {
        count: 22
      },
      textStyle: {
        fontName: 'Arial',
        fontSize: 11
      },
      titleTextStyle: {
        fontSize: 12,
        italic: false ,
        bold:true
      }
    },
    pointSize: 3,
    pointShape: 'circle',
    annotations: {
      alwaysOutside: true,
      textStyle: {
        fontName: 'Arial',
        fontSize: 9,
        color: '#000000',
        opacity: 1
      }
    }
  };

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.BarChart(chartDiv);
  chart.draw(view, options);
}

div

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Browser other questions tagged php javascript mysql

You are not signed in. Login or sign up in order to post.