Exemplo Gráfico dygraph

Um exemplo de funcionalidade básica do dygraph

by Rodrigo Portillo

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.css">
<button onclick="dadosUm()">Dados 1</button>
<button onclick="dadosDois()">Dados 2</button>
<div id="area" style="width:600px; height:400px;"></div>

CSS

body{
  font-family: sans-serif;
}

JavaScript

var dados = [
							[0,0.5,1.0],
              [10,0.2,0.8],
              [15,0.7,0.2]
             ]; //Os dados seguem a mesma lógica das Etiquetas. Devem seguir, no caso, eixo x, linha A e linha B

//Os eixos são o que determminam a quantidade de linhas, em relação com as etiquetas (LABELS)
var grafico = new Dygraph( //Deve colocar em uma variável para alterar
  document.getElementById("area"),
  dados,
  {
    title: 'Coluna 1 x Coluna 2',
    ylabel: 'Informação Lateral',
    legend: 'always',
    showRangeSelector: true,
    drawPoints: true,
    valueRange: [0.0, 1.0],
    labels: ['x','A', 'B' ], // Eixo X (horizontal), Linha A e linha B
  }
);

function dadosUm(){
	dados = [
  					[0,0.7,0.1],
            [10,0.1,0.5],
            [15,0.5,0.3]
          ];
  //Recebe os dados e atualiza. File é o nome do parâmetro que vai ser atualizado apenas. Pela documentação você pode atualizar outras informações a partir dos parâmetros. Sendo dados o file.
	grafico.updateOptions( { 'file': dados, 'labels' : ['x','C','D']});
}

function dadosDois(){
	dados = [
  					[0,0.2,0.8],
            [10,0.3,0.7],
            [15,0.2,0.2]
          ];
	grafico.updateOptions( { 'file': dados , 'labels' : ['x','E','F']});
}