Criar gráfico de barras

Amigos,

Já não estou mais satisfeito só com o gráfico de linha que o scadabr mostra.

Meu interesse agora é construir um gráfico de barras, que mostre o acumulado de uma determinada grandeza por dia.

Especificamente de energia. Como tenho paineis solares queria mostrar um gráfico da energia produzida por dia, usando a unidade kw/h por dia.

Mas não sei onde começar. Alguem tem alguma dica?

1 curtida

Fala fazendeiro Sidney,

Vamos ver se conseguimos algo.. Por padrão os gráficos em barras ainda não estão disponíveis no ScadaBR, mas para resolver isto eu vejo pelo menos 3 possíveis soluções:

1 - Quando entramos no mundo java, os limites do ScadaBR se expandem em muito, eu mesmo preciso aprender melhor, mas inserindo um componente "script para o servidor" na view, seria possível construir isto, o problema é o tratamento do que foi acumulado no dia, seria necessário provavelmente trabalhar em duas etapas, uma previa tratando os dados e acumulando dia-a-dia, e só por fim fazer este script, mas precisa ser pesquisado um pouco melhor, provavelmente já exista algo pronto na net;

2 - Aproveitando o tratamento dos dados feito na solução 1, talvez com um meta datasource, poderia ser construído este gráfico de forma bem manual, não é o mais indicado e nem o menos trabalhoso, mas talvez o mais fácil. Seria necessário construir o fundo do gráfico e também barras verticais parecidas com o vertical level dos componentes dinâmicos, depois teria que colocar estas barras por cima do fundo do gráfico, alinhar e colocar algumas informações de data e valor. Como eu disse, bem trabalhoso, porque precisaria saber quantos dias iriam aparecer no gráfico para provavelmente criar um datapoint virtual por dia para acumular a medida de cada dia, ainda seria necessário rotacionar estes dados, dia-a-dia, enfim, tem muita coisa;

3 - Acho que esta é a melhor solução, como vc mesmo já me mostrou o "Open Energy Monitor" já é especialista em analise de dados com ótimos gráficos, precisamos olhar e ver o que seria necessário para integrar este software no ScadaBR;

Nenhuma solução, apenas sugestões, rs

Att

Engº Fabio

1 curtida

Eng. Fabio,

agora estamos de casa nova. Não esqueci esse projeto dos gráficos não. Vamos começar a estudar as integrações com o “Open Energy Monitor”.

Meu raspberry está chegando e a partir dai podemos conversar.

Boa tarde pessoal, como está a questão de novos gráficos, algumas novidade.

@KLEBER_ZEITOUNIAN,

Eu estou estudando mesmo esse método de criação de novos gráficos.
Mas veja que a saída até agora não é colocar no ScadaBR, e sim usar o BD como fonte dos dados.
Tem alguma idéia sobre isso?

Estou trabalhando em um integração para um cliente, é um piloto meu primeiro cliente nesta area de supervisório, estamos integrando 4 geradores de 1Mva, 1 QGBT, 10 no-breaks.

E sei que irão me solicitar gráficos que o ScadaBr não fornece, então estou averiguando a possibilidade de construir um programa em java, utilizando o jfreechart, em paralelo, com os gráficos em barras e pizza, dei uma olhada no código do ScadaBR afim de ver se é possível integrar novos gráficos mas ainda não achei o caminho.

http://www.jfree.org/jfreechart/

Está é a mesma lib que o Scada utiliza.

Opa Galera blz?
Continuando a linha de pensamento…
Desenvolvendo esse gráfico de forma manual seria possével criar um zoom dinâmico nele?
Kleber tbm estou trabalhando em um projeto em minha região e meu cliente já solicitou este tipo de gráfico , acredito que se trabalharmos juntos podemos chegar em um modelo interessante.

@fabiodurao já desenvolveu algum modelo parecido? que possa nos mandar imagem , para seguir um modelo?

Abraços.

sim, estou no meio de uma implantação, tem muito equipamento para monitorar, integração, cabeamento e treinamento, mas na sequência já me solicitaram novos gráficos, estou vendo o chartjs, parece uma otíma alternativa, um membro de nosso grupo esta inciando um treinamento em java, mas de qualquer forma nas proximas semanas devo iniciar o processo aqui, mas já adianto, é muito simples, é só criar uma consulta que retorne os valores que necessita e colocar num array, na tela grafica vc adiciona um componente script para servidor, e ali vc irá inserir os scripts do chartjs, de uma olhada, assim que iniciar vamos conversando, já fiz umas brincadeiras aqui com ele, é bem bacana.

Olá Kleber, conseguiu algum avaço?

Então logo na sequencia de nossa conversar, iniciei os estudo do chartjs, consegui fazer codigo PHP com jascript que roda em um servidor apache, nele consulto o que preciso e faço o relatório, mas parei ai, nosso cliente aprovou nossos orçamentos, então iremos retomar a partir de agora, nosso parceiro Wagner de Queiroz está fazendo um treinamento java para iniciar em breve alterações no código,tanto nos gráficos quanto nos relatórios, por enquanto iremos usar o chartjs numa interface separada do scadabr.

ola galera eu ja fiz alguns …ultlizando o proprio datapoint sscript para o servidor, juntamente com recursos css…fuciona muito lega

@jorge23

Vai ter que mostrar amigo. Ficamos muito curiosos com esse uso.

Dá um print ai.

Bom dia

estou trabalhando em projeto java que esta usando o JfreeChart, mas não consigo aplicar no mesmo grafico linhas e barras juntos,

só barra ou só linha eu consigo.

mas preciso colocar os valores no grafico de barras e uma linha com a meta no mesmo grafico.

alguma diga.

@thc.napoleao

eu não usei esse JfreeChart.
Mas deve ser muito próximo do que eu uso, especialmente se já usou algum.
Fala o que já fez.

@farmsid
estou usando o cod abaixo.

tenho um pacote com.util com a classe GraficoBarras com o cod abaixo
package com.utils;

import java.awt.Color;
import java.text.DecimalFormat;
import java.util.List;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartPanel;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.labels.StandardCategoryItemLabelGenerator;
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.chart.renderer.category.BarRenderer;
import org.jfree.chart.renderer.category.CategoryItemRenderer;
import org.jfree.data.category.CategoryDataset;
import org.jfree.data.category.DefaultCategoryDataset;
import org.jfree.ui.ApplicationFrame;

/**
*

  • @author thiago.napoleao

*/

public class GraficoBarras extends ApplicationFrame {

public ChartPanel chartPanel;
private List<String> estacoes;
private List<String> erros;
private List<String> upm;



public GraficoBarras(String chartTitle, int x, int y, List<String> estacoes, List<String> erros) {
    super(chartTitle);
    this.estacoes = estacoes;
    this.erros = erros;
    
    
    //criando tipo de grafico
    JFreeChart chart =   ChartFactory.createBarChart(
            chartTitle,
            "",
            "",
            createDataset(),
            PlotOrientation.VERTICAL,//legenda
            false, true, true);
             
            //Cor da barra do Charts
          chart.getCategoryPlot().getRenderer(0).setSeriesPaint(0, Color.red);  
            
            //Cor de Fundo de tela do Charts
	chart.setBackgroundPaint(Color.white);
	CategoryPlot plot = chart.getCategoryPlot();
                    
	//Cor de Fundo do Chrats
	plot.setBackgroundPaint(Color.white);
                    
	 // colocando o gráfico em um painel
             this.chartPanel = new ChartPanel(chart);
             chartPanel.setPreferredSize(new java.awt.Dimension(x, y));
          
            // colocando valores no gráfico 
              CategoryItemRenderer itemRerender = plot.getRenderer();
              itemRerender.setItemLabelGenerator(new StandardCategoryItemLabelGenerator("{2}", new DecimalFormat("0")));
              itemRerender.setItemLabelsVisible(true);
             
              
                  BarRenderer renderer = (BarRenderer) chart.getCategoryPlot().getRenderer();
                  renderer.setMaximumBarWidth(0.03); //seta a largura da barra
       
         
           }

/**
 * Cria um conjunto de dados
 */
private CategoryDataset createDataset() {

    final String erros = "";
    final DefaultCategoryDataset dataset = new DefaultCategoryDataset();

    for (int i = 0; i < this.estacoes.size(); i++) {

        dataset.addValue(Double.parseDouble(this.erros.get(i)), erros, this.estacoes.get(i));
       
               
    }
    
    return dataset;

}

}


e tenho um frame com o cod abaixo

package com.principal;

import com.bean.Upm;
import com.dao.UpmDAO;
import com.utils.GraficoBarras;
import com.utils.GraficoBarrasHora;
import java.awt.BorderLayout;
import java.util.ArrayList;
import java.util.List;

/**
*

  • @author thiago.napoleao
    */
    public class GraficoHora extends javax.swing.JPanel {

    /**

    • Creates new form GraficoHora
      */
      public GraficoHora() {
      initComponents();
      graficoHora();
      graficoHoraErros();
      }

    public void graficoHora(){

    List erroH = UpmDAO.getInstance().findAll();

    /******************* criação do gráfico *********************/

     List<String> hora = new ArrayList();
     List<String> upm = new ArrayList();
    
     
     for (int i = 0; i < erroH.size(); i++) {
         hora.add(erroH.get(i).getHorasG());
         upm.add(Integer.toString(erroH.get(i).getUpm()));
         
         
         
                             
     }
    
     GraficoBarras grafico = new GraficoBarras(" UPM / Hora", 500, 270, hora, upm);
     pnlGrafico1.removeAll();
     pnlGrafico1.add(grafico.chartPanel, BorderLayout.CENTER);
     pnlGrafico1.revalidate();
     pnlGrafico1.repaint();
    
    
     /******************* criação do gráfico *********************/
    

    }

Como foi implementado esse codigo Java no Scada?

Ola @farmsid ,

De uma olhada no meu resultado, eu estou pegando 3 TAG RAM e montando um grafico com uma library do google.

1 . C:\Program Files\ScadaBR\webapps\ScadaBR\WEB-INF\tags\page.tag
ADD
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

2 . Crie 3 TAG e pega o X ID
3 . Na view add um componente script servidor

    var grafico = "";
var dpDao = new com.serotonin.mango.db.dao.PointValueDao();
var painel1 = dpDao.getLatestPointValue('9');
var painel2 = dpDao.getLatestPointValue('10');
var painel3 = dpDao.getLatestPointValue('11');


  grafico += "  <script type=\"text/javascript\">";
   grafico += " google.charts.load('current', {'packages':['bar']});";
  grafico += "  google.charts.setOnLoadCallback(drawStuff);";

   grafico += " function drawStuff() {";
     grafico += " var data = new google.visualization.arrayToDataTable([";
     grafico += "   ['Move', 'Valor'],";
    grafico += "    [\"PAINEL 1\","+painel1.value+"],";
     grafico += "   [\"Painel 2\", "+painel2.value+"10],";
    grafico += "    ['Painel 3', "+painel3.value+"3]";
   grafico += "   ]);";

    grafico += "  var options = {";
    grafico += "    width: 800,";
     grafico += "   legend: { position: 'none' },";
    grafico += "    chart: {";
       grafico += "   title: 'JONATAS CASSSA',";
       grafico += "   subtitle: 'JONATAS CASSA' },";
     grafico += "   axes: {";
     grafico += "     x: {";
      grafico += "      0: { side: 'top', label: 'White to move'} ";
   grafico += "       }";
      grafico += "  },";
     grafico += "   bar: { graficooupWidth: \"90%\" }";
   grafico += "   };";

    grafico += "  var chart = new google.charts.Bar(document.getElementById('top_x_div'));";
   grafico += "   chart.draw(data, google.charts.Bar.convertOptions(options));";
   grafico += " };";
grafico += "  </script>";
 grafico += "<div id=\"top_x_div\" style=\"width: 800px; height: 600px;\"></div>";return grafico;

Substitua os valores 9,10,11 pelo seu TAG

4 curtidas

@jrcassa,

amigo Jonatas, você foi profundo no estudo. Mas já procurava esse caminho faz muito tempo, e você abriu a trilha. Já estudei o chart.js e o minha limitação é pegar algo direto no BD.

Vamos fazer testes essa semana.

Muito obrigado por sua disposição em contribuir com a construção do conhecimento.

Jonatas, eu tenho que inserir essa linha no arquivo page.tag?

Exatamente, add na pag.tag