stackoom
  简体   繁体   中英

Google charts working with sample data but not with custom data

 原文  2018-11-06 18:04:47  5   1    php/ mysql/ charts/ google-visualization/ jsfiddle

Question

I'm currently trying to present a bar chart in a PHP, Mysql document and I'm having some issues.

1- the chart works almost fine on fiddle but not on my local machine. Chart on fiddle

this is my sample code for the chart:

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

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Data');
  data.addColumn('number', 'Valor de Renda');

  data.addRows([
   [new Date( 2010, 1, 01), 1500], [new Date( 2010, 1, 01), 1500], [new Date( 2010, 1, 01), 1500], [new Date( 2010, 1, 01), 1500], [new Date( 2010, 1, 01), 1500], [new Date( 2010, 1, 01), 1500], [new Date( 2010, 1, 01), 1500], [new Date( 2010, 1, 01), 1500], [new Date( 2010, 1, 01), 1500], [new Date( 2010, 1, 01), 1500], [new Date( 2010, 1, 01), 1500], [new Date( 2011, 1, 01), 1500], [new Date( 2011, 1, 01), 1500], [new Date( 2011, 1, 01), 1500], [new Date( 2011, 1, 01), 1500], [new Date( 2011, 1, 01), 1500], [new Date( 2011, 1, 01), 1500], [new Date( 2011, 1, 01), 1500], [new Date( 2011, 1, 01), 1500], [new Date( 2011, 1, 01), 1500], [new Date( 2011, 1, 01), 1500], [new Date( 2011, 1, 01), 1500], [new Date( 2011, 1, 01), 1500], [new Date( 2012, 1, 01), 1500], [new Date( 2012, 1, 01), 1500], [new Date( 2012, 1, 01), 1500], [new Date( 2012, 1, 01), 1500], [new Date( 2012, 1, 01), 1500], [new Date( 2012, 1, 01), 1500], [new Date( 2012, 1, 01), 1500], [new Date( 2012, 1, 01), 1500], [new Date( 2012, 1, 01), 1500], [new Date( 2012, 1, 01), 1500], [new Date( 2012, 1, 01), 1500], [new Date( 2012, 1, 01), 1500], [new Date( 2013, 1, 01), 1500], [new Date( 2013, 1, 01), 1500], [new Date( 2013, 1, 01), 1500], [new Date( 2013, 1, 01), 1500], [new Date( 2013, 1, 01), 1500], [new Date( 2013, 1, 01), 1500], [new Date( 2013, 1, 01), 1500], [new Date( 2013, 1, 01), 1500], [new Date( 2013, 1, 01), 1500], [new Date( 2013, 1, 01), 1500], [new Date( 2013, 1, 01), 1500], [new Date( 2013, 1, 01), 1500], [new Date( 2014, 1, 01), 1500], [new Date( 2014, 1, 01), 1500], [new Date( 2014, 1, 01), 1500], [new Date( 2014, 1, 01), 1500], [new Date( 2014, 1, 01), 1500], [new Date( 2014, 1, 01), 1500], [new Date( 2014, 1, 01), 1500], [new Date( 2014, 1, 01), 1500], [new Date( 2014, 1, 01), 1500], [new Date( 2014, 1, 01), 1500], [new Date( 2014, 1, 01), 1500], [new Date( 2014, 1, 01), 1500], [new Date( 2015, 1, 01), 1500], [new Date( 2015, 1, 01), 1500], [new Date( 2015, 1, 01), 1500], [new Date( 2015, 1, 01), 1500], [new Date( 2015, 1, 01), 1500], [new Date( 2015, 1, 01), 1500], [new Date( 2015, 1, 01), 1500], [new Date( 2015, 1, 01), 1500], [new Date( 2015, 1, 01), 1500], [new Date( 2015, 1, 01), 1500], [new Date( 2015, 1, 01), 1500], [new Date( 2015, 1, 01), 1500], [new Date( 2019, 1, 01), 1000], [new Date( 2019, 1, 01), 1000], [new Date( 2019, 1, 01), 1000], [new Date( 2019, 1, 01), 1000], [new Date( 2019, 1, 01), 1000], [new Date( 2019, 1, 01), 1000], [new Date( 2019, 1, 01), 1000], [new Date( 2019, 1, 01), 1000], [new Date( 2019, 1, 01), 1000], [new Date( 2019, 1, 01), 1000], [new Date( 2019, 1, 01), 1000], [new Date( 2019, 1, 01), 1000], [new Date( 2020, 1, 01), 1000], [new Date( 2020, 1, 01), 1000], [new Date( 2020, 1, 01), 1000], [new Date( 2020, 1, 01), 1000], [new Date( 2020, 1, 01), 1000], [new Date( 2020, 1, 01), 1000], [new Date( 2020, 1, 01), 1000], [new Date( 2020, 1, 01), 1000], [new Date( 2020, 1, 01), 1000], [new Date( 2020, 1, 01), 1000], [new Date( 2020, 1, 01), 1000], [new Date( 2020, 1, 01), 1000], [new Date( 2021, 1, 01), 1000], [new Date( 2021, 1, 01), 1000], [new Date( 2021, 1, 01), 1000], [new Date( 2021, 1, 01), 1000], [new Date( 2021, 1, 01), 1000], [new Date( 2021, 1, 01), 1000], [new Date( 2021, 1, 01), 1000], [new Date( 2021, 1, 01), 1000], [new Date( 2021, 1, 01), 1000], [new Date( 2021, 1, 01), 1000], [new Date( 2021, 1, 01), 1000], [new Date( 2021, 1, 01), 1000], [new Date( 2022, 1, 01), 1000], [new Date( 2022, 1, 01), 1000], [new Date( 2022, 1, 01), 1000], [new Date( 2022, 1, 01), 1000], [new Date( 2022, 1, 01), 1000], [new Date( 2022, 1, 01), 1000], [new Date( 2022, 1, 01), 1000], [new Date( 2022, 1, 01), 1000], [new Date( 2022, 1, 01), 1000], [new Date( 2022, 1, 01), 1000], [new Date( 2022, 1, 01), 1000], [new Date( 2022, 1, 01), 1000], [new Date( 2023, 1, 01), 1000], [new Date( 2023, 1, 01), 1000], [new Date( 2023, 1, 01), 1000], [new Date( 2023, 1, 01), 1000], [new Date( 2023, 1, 01), 1000], [new Date( 2023, 1, 01), 1000], [new Date( 2023, 1, 01), 1000], [new Date( 2023, 1, 01), 1000], [new Date( 2023, 1, 01), 1000], [new Date( 2023, 1, 01), 1000], [new Date( 2023, 1, 01), 1000], [new Date( 2023, 1, 01), 1000], [new Date( 2024, 1, 01), 1000], [new Date( 2024, 1, 01), 1000], [new Date( 2024, 1, 01), 1000], [new Date( 2024, 1, 01), 1000], [new Date( 2024, 1, 01), 1000], [new Date( 2024, 1, 01), 1000], [new Date( 2024, 1, 01), 1000], [new Date( 2024, 1, 01), 1000], [new Date( 2024, 1, 01), 1000], [new Date( 2024, 1, 01), 1000], [new Date( 2024, 1, 01), 1000], [new Date( 2024, 1, 01), 1000], [new Date( 2025, 1, 01), 1000],
  ]);

  var linearOptions = {
  axes: {
        y: {
            all: {
                range: {
                    max: 3000,
                    min: 000
                }
            }
        }
    },
    bars: 'vertical', // Required for Material Bar Charts.
    width: 800,
    height: 300
  };


  var linearChart = new google.visualization.LineChart(document.getElementById('linear_div'));
   linearChart.draw(data, linearOptions);


}

2- I've tried using the data as it is showed in fiddle and still nothing appears on the page.

3 - with the sample data works local, but not when I change to my data

My data is gathered from a Mysql query that i'm "echoing" where i should:

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

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Data');
  data.addColumn('number', 'Valor de Renda');

  data.addRows([
   <?php echo $listagem ;?>
  ]);

  var linearOptions = {
  axes: {
        y: {
            all: {
                range: {
                    max: 3000,
                    min: 000
                }
            }
        }
    },
    bars: 'vertical', // Required for Material Bar Charts.
    width: 800,
    height: 300
  };


  var linearChart = new google.visualization.LineChart(document.getElementById('linear_div'));
   linearChart.draw(data, linearOptions);


}

UPDATE:

AS suggested I tried to convert the data into a Json object in my query: 

$rows = array();
$table = array();

$table['cols'] = array(
    array('label' => 'Data', 'type' => 'date'),
    array('label' => 'Valor', 'type' => 'number')
);


$query_old_date = "SELECT ContratoFraccaoInicio AS INICIO, ContratoFraccaoFim AS FIM FROM TbContratoFraccao WHERE FkFracao=" . $id_fraccao . " ORDER BY ContratoFraccaoInicio ASC";
$result_old_date = mysqli_query($link, $query_old_date);

while($datas = mysqli_fetch_assoc($result_old_date)){

    $old_date = $datas['INICIO'];
    $end_date = $datas['FIM'];

$data_inicio = date('Y-m-d', strtotime($old_date));
$data_fim = date('Y-m-d', strtotime($end_date));


$start    = (new DateTime($data_inicio))->modify('first day of this month');
$end      = (new DateTime($data_fim))->modify('first day of next month');
$interval = DateInterval::createFromDateString('1 month');
$period   = new DatePeriod($start, $interval, $end);

foreach ($period as $dt) {
   $mes =  $dt->format("Y-m-d");




    $query_valor_mes = "SELECT MAX(Data) AS DATAVALOR FROM TbContratoFracaoPreco WHERE FkFraccao='$id'  and data<='" . $mes . "'";

    $result_valor_mes = mysqli_query($link, $query_valor_mes);

    while($row_valor_mes = mysqli_fetch_assoc($result_valor_mes)){
        $data_valor = $row_valor_mes['DATAVALOR'];




        $query_obter_valor = " SELECT * FROM TbContratoFracaoPreco WHERE FkFraccao='$id' and data='" . $data_valor . "'";
        $result_obter_valor = mysqli_query($link, $query_obter_valor);

        while($row_renda = mysqli_fetch_assoc($result_obter_valor)){

            $rent = $row_renda['ContratoFracaoPreco'];


            $date_year = date('Y', strtotime($mes));
            $date_month = date('m', strtotime($mes))-1;
            $date_day = date('d', strtotime($mes));

            $listing =  "Date(" . $date_year.", " . $date_month .", " . $date_day . ")";


                $temp = array();
  $temp[] = array('v' => (string) $listing);
  $temp[] = array('v' => (float) $rent);
  $rows[] = array('c' => $temp);



        };



    };
};
};


$table['rows'] = $rows;

$dados_chart = json_encode($table);

And in the chart I have:

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

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Data');
  data.addColumn('number', 'Valor de Renda');
  data.addRows(<?php echo $dados_chart;?>);

  var linearOptions = {
  axes: {
        y: {
            all: {
                range: {
                    max: 3000,
                    min: 000
                }
            }
        }
    },
    bars: 'vertical', // Required for Material Bar Charts.
    width: 800,
    height: 300
  };


  var linearChart = new google.visualization.LineChart(document.getElementById('linear_div'));
   linearChart.draw(data, linearOptions);


}

And beside a blank page the only thing I have is this console error:

在此处输入图片说明

Sample result after echo the $dados_chart object:

{"cols":[{"label":"Data","type":"date"},{"label":"Valor","type":"number"}],"rows":[{"c":[{"v":"Date(2010, 1, 01)"},{"v":1500}]},{"c":[{"v":"Date(2010, 2, 01)"},{"v":1500}]},{"c":[{"v":"Date(2010, 3, 01)"},{"v":1500}]},{"c":[{"v":"Date(2010, 4, 01)"},{"v":1500}]},{"c":[{"v":"Date(2010, 5, 01)"},{"v":1500}]},{"c":[{"v":"Date(2010, 6, 01)"},{"v":1500}]},{"c":[{"v":"Date(2010, 7, 01)"},{"v":1500}]},{"c":[{"v":"Date(2010, 8, 01)"},{"v":1500}]},{"c":[{"v":"Date(2010, 9, 01)"},{"v":1500}]},{"c":[{"v":"Date(2010, 10, 01)"},{"v":1500}]},{"c":[{"v":"Date(2010, 11, 01)"},{"v":1500}]},{"c":[{"v":"Date(2011, 0, 01)"},{"v":1500}]},{"c":[{"v":"Date(2011, 1, 01)"},{"v":1500}]},{"c":[{"v":"Date(2011, 2, 01)"},{"v":1500}]},{"c":[{"v":"Date(2011, 3, 01)"},{"v":1500}]},{"c":[{"v":"Date(2011, 4, 01)"},{"v":1500}]},{"c":[{"v":"Date(2011, 5, 01)"},{"v":1500}]},{"c":[{"v":"Date(2011, 6, 01)"},{"v":1500}]},{"c":[{"v":"Date(2011, 7, 01)"},{"v":1500}]},{"c":[{"v":"Date(2011, 8, 01)"},{"v":1500}]},{"c":[{"v":"Date(2011, 9, 01)"},{"v":1500}]},{"c":[{"v":"Date(2011, 10, 01)"},{"v":1500}]},{"c":[{"v":"Date(2011, 11, 01)"},{"v":1500}]},{"c":[{"v":"Date(2012, 0, 01)"},{"v":1500}]},{"c":[{"v":"Date(2012, 1, 01)"},{"v":1500}]},{"c":[{"v":"Date(2012, 2, 01)"},{"v":1500}]},{"c":[{"v":"Date(2012, 3, 01)"},{"v":1500}]},{"c":[{"v":"Date(2012, 4, 01)"},{"v":1500}]},{"c":[{"v":"Date(2012, 5, 01)"},{"v":1500}]},{"c":[{"v":"Date(2012, 6, 01)"},{"v":1500}]},{"c":[{"v":"Date(2012, 7, 01)"},{"v":1500}]},{"c":[{"v":"Date(2012, 8, 01)"},{"v":1500}]},{"c":[{"v":"Date(2012, 9, 01)"},{"v":1500}]},{"c":[{"v":"Date(2012, 10, 01)"},{"v":1500}]},{"c":[{"v":"Date(2012, 11, 01)"},{"v":1500}]},{"c":[{"v":"Date(2013, 0, 01)"},{"v":1500}]},{"c":[{"v":"Date(2013, 1, 01)"},{"v":1500}]},{"c":[{"v":"Date(2013, 2, 01)"},{"v":1500}]},{"c":[{"v":"Date(2013, 3, 01)"},{"v":1500}]},{"c":[{"v":"Date(2013, 4, 01)"},{"v":1500}]},{"c":[{"v":"Date(2013, 5, 01)"},{"v":1500}]},{"c":[{"v":"Date(2013, 6, 01)"},{"v":1500}]},{"c":[{"v":"Date(2013, 7, 01)"},{"v":1500}]},{"c":[{"v":"Date(2013, 8, 01)"},{"v":1500}]},{"c":[{"v":"Date(2013, 9, 01)"},{"v":1500}]},{"c":[{"v":"Date(2013, 10, 01)"},{"v":1500}]},{"c":[{"v":"Date(2013, 11, 01)"},{"v":1500}]},{"c":[{"v":"Date(2014, 0, 01)"},{"v":1500}]},{"c":[{"v":"Date(2014, 1, 01)"},{"v":1500}]},{"c":[{"v":"Date(2014, 2, 01)"},{"v":1500}]},{"c":[{"v":"Date(2014, 3, 01)"},{"v":1500}]},{"c":[{"v":"Date(2014, 4, 01)"},{"v":1500}]},{"c":[{"v":"Date(2014, 5, 01)"},{"v":1500}]},{"c":[{"v":"Date(2014, 6, 01)"},{"v":1500}]},{"c":[{"v":"Date(2014, 7, 01)"},{"v":1500}]},{"c":[{"v":"Date(2014, 8, 01)"},{"v":1500}]},{"c":[{"v":"Date(2014, 9, 01)"},{"v":1500}]},{"c":[{"v":"Date(2014, 10, 01)"},{"v":1500}]},{"c":[{"v":"Date(2014, 11, 01)"},{"v":1500}]},{"c":[{"v":"Date(2015, 0, 01)"},{"v":1500}]},{"c":[{"v":"Date(2015, 1, 01)"},{"v":1500}]},{"c":[{"v":"Date(2015, 2, 01)"},{"v":1500}]},{"c":[{"v":"Date(2015, 3, 01)"},{"v":1500}]},{"c":[{"v":"Date(2015, 4, 01)"},{"v":1500}]},{"c":[{"v":"Date(2015, 5, 01)"},{"v":1500}]},{"c":[{"v":"Date(2015, 6, 01)"},{"v":1500}]},{"c":[{"v":"Date(2015, 7, 01)"},{"v":1500}]},{"c":[{"v":"Date(2015, 8, 01)"},{"v":1500}]},{"c":[{"v":"Date(2015, 9, 01)"},{"v":1500}]},{"c":[{"v":"Date(2015, 10, 01)"},{"v":1500}]},{"c":[{"v":"Date(2015, 11, 01)"},{"v":1500}]},{"c":[{"v":"Date(2019, 0, 01)"},{"v":1000}]},{"c":[{"v":"Date(2019, 1, 01)"},{"v":1000}]},{"c":[{"v":"Date(2019, 2, 01)"},{"v":1000}]},{"c":[{"v":"Date(2019, 3, 01)"},{"v":1000}]},{"c":[{"v":"Date(2019, 4, 01)"},{"v":1000}]},{"c":[{"v":"Date(2019, 5, 01)"},{"v":1000}]},{"c":[{"v":"Date(2019, 6, 01)"},{"v":1000}]},{"c":[{"v":"Date(2019, 7, 01)"},{"v":1000}]},{"c":[{"v":"Date(2019, 8, 01)"},{"v":1000}]},{"c":[{"v":"Date(2019, 9, 01)"},{"v":1000}]},{"c":[{"v":"Date(2019, 10, 01)"},{"v":1000}]},{"c":[{"v":"Date(2019, 11, 01)"},{"v":1000}]},{"c":[{"v":"Date(2020, 0, 01)"},{"v":1000}]},{"c":[{"v":"Date(2020, 1, 01)"},{"v":1000}]},{"c":[{"v":"Date(2020, 2, 01)"},{"v":1000}]},{"c":[{"v":"Date(2020, 3, 01)"},{"v":1000}]},{"c":[{"v":"Date(2020, 4, 01)"},{"v":1000}]},{"c":[{"v":"Date(2020, 5, 01)"},{"v":1000}]},{"c":[{"v":"Date(2020, 6, 01)"},{"v":1000}]},{"c":[{"v":"Date(2020, 7, 01)"},{"v":1000}]},{"c":[{"v":"Date(2020, 8, 01)"},{"v":1000}]},{"c":[{"v":"Date(2020, 9, 01)"},{"v":1000}]},{"c":[{"v":"Date(2020, 10, 01)"},{"v":1000}]},{"c":[{"v":"Date(2020, 11, 01)"},{"v":1000}]},{"c":[{"v":"Date(2021, 0, 01)"},{"v":1000}]},{"c":[{"v":"Date(2021, 1, 01)"},{"v":1000}]},{"c":[{"v":"Date(2021, 2, 01)"},{"v":1000}]},{"c":[{"v":"Date(2021, 3, 01)"},{"v":1000}]},{"c":[{"v":"Date(2021, 4, 01)"},{"v":1000}]},{"c":[{"v":"Date(2021, 5, 01)"},{"v":1000}]},{"c":[{"v":"Date(2021, 6, 01)"},{"v":1000}]},{"c":[{"v":"Date(2021, 7, 01)"},{"v":1000}]},{"c":[{"v":"Date(2021, 8, 01)"},{"v":1000}]},{"c":[{"v":"Date(2021, 9, 01)"},{"v":1000}]},{"c":[{"v":"Date(2021, 10, 01)"},{"v":1000}]},{"c":[{"v":"Date(2021, 11, 01)"},{"v":1000}]},{"c":[{"v":"Date(2022, 0, 01)"},{"v":1000}]},{"c":[{"v":"Date(2022, 1, 01)"},{"v":1000}]},{"c":[{"v":"Date(2022, 2, 01)"},{"v":1000}]},{"c":[{"v":"Date(2022, 3, 01)"},{"v":1000}]},{"c":[{"v":"Date(2022, 4, 01)"},{"v":1000}]},{"c":[{"v":"Date(2022, 5, 01)"},{"v":1000}]},{"c":[{"v":"Date(2022, 6, 01)"},{"v":1000}]},{"c":[{"v":"Date(2022, 7, 01)"},{"v":1000}]},{"c":[{"v":"Date(2022, 8, 01)"},{"v":1000}]},{"c":[{"v":"Date(2022, 9, 01)"},{"v":1000}]},{"c":[{"v":"Date(2022, 10, 01)"},{"v":1000}]},{"c":[{"v":"Date(2022, 11, 01)"},{"v":1000}]},{"c":[{"v":"Date(2023, 0, 01)"},{"v":1000}]},{"c":[{"v":"Date(2023, 1, 01)"},{"v":1000}]},{"c":[{"v":"Date(2023, 2, 01)"},{"v":1000}]},{"c":[{"v":"Date(2023, 3, 01)"},{"v":1000}]},{"c":[{"v":"Date(2023, 4, 01)"},{"v":1000}]},{"c":[{"v":"Date(2023, 5, 01)"},{"v":1000}]},{"c":[{"v":"Date(2023, 6, 01)"},{"v":1000}]},{"c":[{"v":"Date(2023, 7, 01)"},{"v":1000}]},{"c":[{"v":"Date(2023, 8, 01)"},{"v":1000}]},{"c":[{"v":"Date(2023, 9, 01)"},{"v":1000}]},{"c":[{"v":"Date(2023, 10, 01)"},{"v":1000}]},{"c":[{"v":"Date(2023, 11, 01)"},{"v":1000}]},{"c":[{"v":"Date(2024, 0, 01)"},{"v":1000}]},{"c":[{"v":"Date(2024, 1, 01)"},{"v":1000}]},{"c":[{"v":"Date(2024, 2, 01)"},{"v":1000}]},{"c":[{"v":"Date(2024, 3, 01)"},{"v":1000}]},{"c":[{"v":"Date(2024, 4, 01)"},{"v":1000}]},{"c":[{"v":"Date(2024, 5, 01)"},{"v":1000}]},{"c":[{"v":"Date(2024, 6, 01)"},{"v":1000}]},{"c":[{"v":"Date(2024, 7, 01)"},{"v":1000}]},{"c":[{"v":"Date(2024, 8, 01)"},{"v":1000}]},{"c":[{"v":"Date(2024, 9, 01)"},{"v":1000}]},{"c":[{"v":"Date(2024, 10, 01)"},{"v":1000}]},{"c":[{"v":"Date(2024, 11, 01)"},{"v":1000}]},{"c":[{"v":"Date(2025, 0, 01)"},{"v":1000}]}]}

1 answers

solution1
 1 ACCPTED  2018-11-06 23:03:26

with the updated json object,
you can create the data table directly,
without addColumn and addRows

replace this...

var data = new google.visualization.DataTable();
data.addColumn('date', 'Data');
data.addColumn('number', 'Valor de Renda');
data.addRows(<?php echo $dados_chart;?>);

with this...

var data = new google.visualization.DataTable(<?php echo $dados_chart;?>);

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question trouble getting google charts / json data working Google Charts and JSON data Insert database data into Google charts? Populating MySQL data with Google Charts Using Google charts with php data? Format data for Google Charts in PHP Google Charts - Labels not matching data google charts no data (blank page) Using Google Charts with PHP Data Google charts Pie without data
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM