Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Plotando 2 graficos com javaScript

Boa tarde, ja estou quebrando cabeça faz tempo, estou usando a biblioteca do fusioncharts para plotar graficos... Quando ploto UM grafico na pagina, roda beleza, quando tento 2 ou mais, nao consigo...

    <script type="text/javascript">//GRÁFICO QUE MOSTRA O KWH DA ULTIMA SEMANA

const dataSource = {
  "chart": {
    "caption": "Total vendido",
    "subcaption": "Histórico dos últimos dias",
    "xaxisname": "Data",
    "yaxisname": "Valor vendido (R$)",
    "numberuffix": "R$",
    "theme": "fusion"
  },
  "data": [
<?php
    $sql = "select * from vendavalor order by data";
    $result = $conn->query($sql);
    while($row = $result->fetch_assoc()) {
?>
    {
      "label": "<?php echo date('d/m/Y', strtotime($row['data'])); ?>",
      "value": "<?php echo $row['total']; ?>"
    },
<?php } ?>
  ]
};

FusionCharts.ready(function() {
   var myChart = new FusionCharts({
      type: "column2d",
      renderAt: "chart-container2",
      width: "100%",
      height: "400px",
      dataFormat: "json",
      dataSource
   }).render();
});
    </script>

ja tentei trocar esse nome 'dataSource' pra nao ficar repetido;;; essa variavel myChart, mas tbm nao rola, nunca da certo colocar dois ou mais . o renderAt sempre troco, ja que tenho que chamar ela em uma div...

Alguem usa essa biblioteca ?

3 respostas

Tentei isso, mas ainda assim nada

Não apresenta nenhum erro no console, mas na area do grafico da como no data do display

FusionCharts.ready(function() {
   var myChart = new FusionCharts({
      type: "column2d",
      renderAt: "chart-container",
      width: "100%",
      height: "400px",
      dataFormat: "json",
      dataSource
   }).render();

   var Outrografico = new FusionCharts({
      type: "stackedcolumn2d",
      renderAt: "chart",
      width: "100%",
      height: "100%",
      dataFormat: "json",
      dataExtra
   }).render();
});
solução!

Nothing ?

Tente fazer da seguinte forma, crie um arquivo PHP apenas para gerar os dados. Ao abrir este arquivo, ele deve imprimir na tela os dados do gráfico, no formato que você vai trabalhar. (o que você tentou fazer na variável datasource).

No seu HTML, faça da seguinte forma:

<div id="div_grafico1">Gráfico esta sendo carregado!</div> 
 <script type="text/javascript">
    FusionCharts.ready(function() {
    var myChart = new FusionCharts({
        "type": "column2d",
        "renderAt": "div_grafico1",
        "width": "100%",
        "height": "100%",
        "dataFormat": "xmlurl",
        "dataSource": "dados.php"
    });
    myChart.render();
    });                                      
</script> 

No meu caso, o dataFormat está como xmlurl porque eu trabalho com XML, No seu caso, você está usando JSON, basta atualizar.