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

我正在做一个使用Phonegap（科尔多瓦）的应用程序，我正在使用jquery mobile。我想知道如何动态显示图表。图表的数据将从sqlite数据库中检索。图表将在饼图中。请帮帮我。如何在phonegap应用程序后端sqlite中动态显示图表？

来源

2014-02-19 Arul

你应该尝试google charts

<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

来源

2014-02-19 09:40:22 skhurams

但我想从sqlite动态检索数据？ – Arul

你可以在页面加载时从sqlite中查询数据吗？即你需要饼图的两列 – skhurams

是的..使用phonegap我可以从sqlite获取数据 – Arul

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

回答

相关问题