Question

我正在使用Phonegap（Cordova）做一个应用程序，我正在使用jquery mobile。我想知道如何动态显示图表。图表数据将从sqlite数据库中检索。该图表将以饼图形式显示。请帮我。

Answer 1

<html>
  <head>
    <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 sqlitedata ;
     //var data = google.visualization.arrayToDataTable(
         //     [ 
          //    ['Task', 'Hours per Day'],
          //    ['Work',     11],
          //    ['Eat',      2],
          //    ['Commute',  2],
          //    ['Watch TV', 2],
          //    ['Sleep',    7] 
          //  ]
         //   );
       var data = google.visualization.arrayToDataTable(sqlitedata );

            var options = {
              title: 'My Daily Activities'
            };

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

//等待加载设备API库

document.addEventListener("deviceready", onDeviceReady, false);

// Populate the database
//
function populateDB(tx) {

    tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
    tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');//comments this line after first user
    tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');//comments this line after first user
}

// Query the database
//
function queryDB(tx) {
    tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB);
}

// Query the success callback

  function querySuccess(tx, results) {
    var len = results.rows.length;
     var row;
    console.log("DEMO table: " + len + " rows found.");
    for (var i=0; i<len; i++){
        console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " +    results.rows.item(i).data);

//在这里获取两列并将其插入

    sqlitedata="[[" +  row[0].item(i) + "], [" +  row[1].item(i) + "]]"
    }
} 

// Transaction error callback
//
function errorCB(err) {
    console.log("Error processing SQL: "+err.code);
}

// Transaction success callback
//
function successCB() {
    var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
    db.transaction(queryDB, errorCB);
}

// device APIs are available
//
function onDeviceReady() {
    var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
    db.transaction(populateDB, errorCB, successCB);
}


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

获取数据请阅读phonegap document

如何在phonegap应用程序后端sqlite中动态显示图表？

1 个答案: