Grafico Google Charts

Asked

Viewed 75 times

-1

I found this example on the line-chasrts website

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

But consider the case where the following occurs:

var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2003',  870,          ],
    ['2004',  1000,      400],
    ['2005',  1170,      460],
    ['2006',  660,       1120],
    ['2007',  1030,      540]
]);

Note that in the first line Expanses did not have any combo with the year 2003

This will generate an error.

How to do it in this case?

javascript

  • It wasn’t easier just to do ['Year', 'Sales', 'Expenses'],&#xA; ['2003', 870, 0 ] ?

1 answer

0

It is right to treat this error. You can use a block tryfor that reason:

      try {
            var data = google.visualization.arrayToDataTable([
              ['Year', 'Sales', 'Expenses'],
              ['2004',  1000,      ],
              ['2005',  1170,      460],
              ['2006',  660,       1120],
              ['2007',  1030,      540]
            ]);

            var options = {
            title: 'Company Performance',
            curveType: 'function',
            legend: { position: 'bottom' }
            };

            var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

            chart.draw(data, options);
      } catch (e){
          alert("Não foi possível gerar o gráfico. Motivo: " + e); 
          // tratamento do erro é feito aqui!
      }

After the comments, I believe I understood the fear of using the vector for different classes in running time.

So I created a solution:

There will be 2 arrays with only the amounts of students in each period, in their respective schedules:

    var manha = [20, 30, 25, 40, 38]; // array dos horários da manhã
    var tarde = [32, 21, 42, 37, 32]; // array dos horarios da tarde

Then insert the values into the graph vector and display the graphical interface:

The code will look like this:

  function drawChart() {

            var manha = [20, 30, 25, 40, 38]; // array dos horários da manhã
            var tarde = [32, 21, 42, 37, 32]; // array dos horarios da tarde

            var arr = [
                ['Semana', 'Turma da Manhã', 'Turma da Tarde'],
                ['7:30',  0,   0],
                ['8:30',  0,   0],
                ['9:30',  0,   0],
                ['10:30',  0,   0],
                ['11:30',  0,   0],
                ['12:30',  0,   0],
                ['13:30',  0,   0],
                ['14:30',  0,   0],
                ['15:30',  0,   0],
                ['16:30',  0,   0]
            ];

            var x = 1; var y = 1; // posição inicial

            // insere no gráfico os valores da manhã
            for(var i = 0; i < manha.length; i++){
                arr[x][y] = manha[i]; x++;
            }
            y = 2;
            // insere no gráfico os valores da tarde
            for(var i = 0; i < tarde.length; i++){
                arr[x][y] = tarde[i]; x++;
            }

            var data = google.visualization.arrayToDataTable(arr);

            var options = {
                title: 'Presença de alunos por horário',
                curveType: 'function',
                legend: { position: 'bottom' }
            };

            var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

            chart.draw(data, options);

  }

This will prevent problems with different time loadings and you can display the chart with the running times.

  • Andrei thanks for the reply but it wasn’t quite what I taught. It’s as follows. Consider an array (date, gifts) that brings this comparison to a certain school class for example. But the school has other classes at other times. Consider for example class a in the schedule from 7 to 12pm and class B from 13 to 18hs, if the hours do not change from 2 classes, how to make this graph mostrandp, in the same graph, the number of students from both classes? Is it clearer? I think that the line-Chart model I’m walking is not the right one!

  • @Carlosrocha is just you give nomenclature the classes. I will insert an example.

  • @Carlosrocha remembering that his question was not about this right! = ) ... The question was: This will generate an error. How to do in this case?

  • put an example that instead of the day of the week brings the working time knowing that one class runs from 7 to 12 and another from 13 to 18

  • @Carlosrocha takes a look later at the issue I made. In the solution I created.

  • But in this case, by listing the classes that DO NOT have that time, you are saying that 0 students came, which is not real because the class will not be there at that time. But there may quietly be 0 students in the class on their regular schedule. I think I’m going to have to study this a little more because I can ask a question a little more coherent with my need. Thanks brother!

Show 1 more comment

Browser other questions tagged javascript

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