0

I am trying to get data from an oracle database into an LineChart using GoogleCharts but I am always confronted with some errors.

If someone could help me, it'd be greatly appreciated !

Here is the script in order to get the line chart :

<html>
<head>


    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">


    $( document ).ready(function() {

      google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart);

        function drawChart (callback) {
        var jsonData = $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url:"getData.php",
            dataType:"json",
            async:false,



        }).responseText;

        //Create our data table out of JSON data loaded from server
        var data = new google.visualization.DataTable(jsonData);

        //PieCharts expects 2 columns of data: a label and a value, so we need to use a DataView to restrict to 2 columns
        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1]);


        var options = {
      title: 'Whatever'
    };
        //Instantiate and draw our chart, passing in some options
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
    });




    </script>

</head>

<body>
     <!--Div that will hold the pie chart-->
<div id="chart_div">Test</div>
</body>

And here is the Phpscript to get the data into a table :

    <?php 





//On exécute la requete









//on appelle la page connexion
include 'connexion.php';

//La requete

$query = "

select A.*  
from (
SELECT 
         EB_RESULTAT_DTM.VALEUR AS EB_RESULTAT_VALEUR, 
         EB_RESULTAT_DTM.INSERT_DATE AS EB_RESULTAT_INSERT_DATE,

         rank() over (partition by EB_INDICATEUR_DTM.INDICATEUR_NUM,to_char(EB_RESULTAT_DTM.INSERT_DATE,'yyyymm') order by to_char(EB_RESULTAT_DTM.INSERT_DATE,'yyyymmdd') asc) as rang,
         to_char(EB_RESULTAT_DTM.INSERT_DATE,'yyyymm') as MOIS_M
    FROM COMPTEUR_OWNER.EB_DOMAINE_DTM EB_DOMAINE_DTM
         INNER JOIN
         COMPTEUR_OWNER.EB_INDICATEUR_DTM EB_INDICATEUR_DTM
            ON EB_DOMAINE_DTM.EB_DOMAINE_DTM_NUM =
                  EB_INDICATEUR_DTM.X_EB_DOMAINE_DTM_NUM
         INNER JOIN
         COMPTEUR_OWNER.EB_RESULTAT_DTM EB_RESULTAT_DTM
            ON EB_INDICATEUR_DTM.INDICATEUR_NUM =
                  EB_RESULTAT_DTM.X_EB_INDICATEUR_DTM_NUM
   WHERE     EB_INDICATEUR_DTM.INDICATEUR_NUM = 106
         AND EB_RESULTAT_DTM.INSERT_DATE BETWEEN ADD_MONTHS (SYSDATE, -9) 
                                               AND SYSDATE
) a where a.rang=1
";

$stid = oci_parse($conn, $query);
oci_execute($stid);

$table = array();
$table['cols'] = array(
    /* define your DataTable columns here
     * each column gets its own array
     * syntax of the arrays is:
     * label => column label
     * type => data type of column (string, number, date, datetime, boolean)
     */
    array('label' => 'Nombres', 'type' => 'number'),
    array('label' => 'Date', 'type' => 'date'),
    // etc...
);

$rows = array();
while($r = oci_fetch_assoc($stid)) {
    $temp = array();
    // each column needs to have data inserted via the $temp array
    $temp[] = array('v' => $r['EB_RESULTAT_VALEUR']);
    $temp[] = array('v' => $r['EB_RESULTAT_INSERT_DATE']);
    // etc...

    // insert the temp array into $rows
    $rows[] = array('c' => $temp);
}

// populate the table with rows of data
$table['rows'] = $rows;

    // encode the table as JSON
    $jsonTable = json_encode($table);



    // return the JSON data
    echo $jsonTable;

    ?>

I ever get this message :

Error in response to storage.get: TypeError: Cannot read property 'style' of null

Or :

undefined is not a function
2
  • Can you update your question with a sample of the data returned by your AJAX call?
    – asgallant
    Jun 12, 2014 at 21:08
  • Hello, i just answered at the bottom if that helps you understand where the problem is ?
    – Oscynth
    Jun 13, 2014 at 14:45

2 Answers 2

0

There are a few errors I can see. First, you are parsing the wrong object in the arrayToDataTable method:

var data = google.visualization.arrayToDataTable($.parseJSON(drawChart));

should be:

var data = google.visualization.arrayToDataTable($.parseJSON(jsonData));

Then, your columns are in the wrong order. The LineCharts expect the x-axis values (your dates) to be the first column, then the y-values in the second column. Also, you need to output your numbers as numbers instead of strings; just add JSON_NUMERIC_CHECK to the json_encode function call:

echo json_encode($rows, JSON_NUMERIC_CHECK);
1
  • Hi, thanks again for your time I finally managed to make it work ! Although I couldn't use JSON_NUMERIC_CHECK because I was not using PHP 5.3. I instead used float : while($row = oci_fetch_array($sql, OCI_BOTH)){ array_push($rows, array(substr($row[1], 0, 9), floatval($row[0]))); } echo json_encode($rows);
    – Oscynth
    Jun 25, 2014 at 9:33
0

So i've changed both of the PHP and script but now get another error message :

Uncaught Error: Not an array 

Here is the php getData2.php :

<?php



include 'connexion.php';
//


$sql  = oci_parse($conn, "select A.*  
from (
SELECT 
         EB_RESULTAT_DTM.VALEUR AS EB_RESULTAT_VALEUR, 
         EB_RESULTAT_DTM.INSERT_DATE AS EB_RESULTAT_INSERT_DATE,

         rank() over (partition by EB_INDICATEUR_DTM.INDICATEUR_NUM,to_char(EB_RESULTAT_DTM.INSERT_DATE,'yyyymm') order by to_char(EB_RESULTAT_DTM.INSERT_DATE,'yyyymmdd') asc) as rang,
         to_char(EB_RESULTAT_DTM.INSERT_DATE,'yyyymm') as MOIS_M
    FROM COMPTEUR_OWNER.EB_DOMAINE_DTM EB_DOMAINE_DTM
         INNER JOIN
         COMPTEUR_OWNER.EB_INDICATEUR_DTM EB_INDICATEUR_DTM
            ON EB_DOMAINE_DTM.EB_DOMAINE_DTM_NUM =
                  EB_INDICATEUR_DTM.X_EB_DOMAINE_DTM_NUM
         INNER JOIN
         COMPTEUR_OWNER.EB_RESULTAT_DTM EB_RESULTAT_DTM
            ON EB_INDICATEUR_DTM.INDICATEUR_NUM =
                  EB_RESULTAT_DTM.X_EB_INDICATEUR_DTM_NUM
   WHERE     EB_INDICATEUR_DTM.INDICATEUR_NUM = 106
         AND EB_RESULTAT_DTM.INSERT_DATE BETWEEN ADD_MONTHS (SYSDATE, -9) 
                                               AND SYSDATE
) a where a.rang=1");

oci_execute($sql);

//while (($row = oci_fetch_array($sql, OCI_BOTH)) != false) {
    // Utilisez des noms de colonne en majuscule pour les indices des tableau associatif
   // echo $row['EB_RESULTAT_VALEUR'];
 //   echo $row['EB_RESULTAT_INSERT_DATE'];
//}

//json_encode($row);

$rows = Array();

while($row = oci_fetch_array($sql, OCI_BOTH)){
     array_push($rows, $row[0], $row[1]);
}

echo json_encode($rows);

    oci_free_statement($sql);
    oci_close($conn);
?>

It returns this :

["9415094","14\/09\/13 14:39:56,000000","9419954","02\/11\/13 13:25:26,000000","9355868","07\/12\/13 13:25:58,000000","9369691","04\/01\/14 13:24:19,000000","9385231","01\/02\/14 13:26:36,000000","9414700","01\/03\/14 13:26:28,000000"]

And here is the index_4.php (script) :

<html>
<head>
    <title>Donné volumétrique</title>
    <!-- Load jQuery -->
    <script language="javascript" type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
    </script>
    <!-- Load Google JSAPI -->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);

        function drawChart() {
            var jsonData = $.ajax({
                url: "getData2.php",
                dataType: "json",
                async: false
            }).responseText;

            var data = google.visualization.arrayToDataTable($.parseJSON(drawChart));

            var options = {
                title: 'Donnée Volumétrique'
            };

            var chart = new google.visualization.LineChart(
                        document.getElementById('chart_div'));
            chart.draw(data, options);
        }

    </script>
</head>
<body>
    <div id="chart_div" style="width: 900px; height: 500px;">
    </div>
</body>
</html>

And here's what I get :

http://imgur.com/w8jexhJ "Error message"


EDIT 1 : $rows = Array(); to $rows = Array(array('Nombres', 'Date'));

AND

array_push($rows, $row[0], $row[1]); to array_push($rows, array($row[0], $row[1]));

Getting : [["Nombres","Date"],["9419954","02\/11\/13 13:25:26,000000"],["9355868","07\/12\/13 13:25:58,000000"],["9369691","04\/01\/14 13:24:19,000000"],["9385231","01\/02\/14 13:26:36,000000"],["9414700","01\/03\/14 13:26:28,000000"]]

4
  • This one fails because the arrayToDataTable function expects an array of arrays. Change $rows = Array(); to $rows = Array(array('Nombres', 'Date')); to add your column headers and change array_push($rows, $row[0], $row[1]); to array_push($rows, array($row[0], $row[1])); to fix the rows.
    – asgallant
    Jun 13, 2014 at 15:40
  • Hello, first thank you for your time. I did the change you suggested but it still returns an error : "Table has no columns.×"
    – Oscynth
    Jun 23, 2014 at 8:18
  • Can you update your question with a sample of the contents of jsonData?
    – asgallant
    Jun 24, 2014 at 1:08
  • I hope that's what you meant : [["Nombres","Date"],["9419954","02\/11\/13 13:25:26,000000"],["9355868","07\/12\/13 13:25:58,000000"],["9369691","04\/01\/14 13:24:19,000000"],["9385231","01\/02\/14 13:26:36,000000"],["9414700","01\/03\/14 13:26:28,000000"]]
    – Oscynth
    Jun 24, 2014 at 7:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.