使用nvd3的实时图表说NoData Available

时间:2015-05-04 10:06:07

标签: angularjs html5 real-time nvd3.js

我使用public class DatabaseHandler extends SQLiteOpenHelper{ private static final int DATABASE_VERSION = 1; private static final String DATABASE_NAME = "FoodTekTrakr", DATABASE_TABLE = "AlarmManager", KEY_ID = "id", KEY_TITLE = "title", KEY_DATE = "date", KEY_TIME = "time", KEY_SONG = "song"; public DatabaseHandler(Context context) { super(context, DATABASE_NAME, null, DATABASE_VERSION); } @Override public void onCreate(SQLiteDatabase db){ db.execSQL("CREATE TABLE " + DATABASE_TABLE + "(" + KEY_ID + " INTEGER PRIMARY KEY AUTOINCREMENT," + KEY_TITLE + " TEXT," + KEY_DATE + " TEXT," + KEY_TIME + " TEXT," + KEY_SONG + " TEXT)"); } @Override public void onUpgrade(SQLiteDatabase db,int oldVersion, int newVersion) { db.execSQL("DROP TABLE IF EXISTS " + DATABASE_TABLE); onCreate(db); } public void createAlarm(UserInputAlarmData AlarmData){ SQLiteDatabase db = getWritableDatabase(); ContentValues values = new ContentValues(); values.put(KEY_TITLE, AlarmData.getTitle()); values.put(KEY_DATE, AlarmData.getDate()); values.put(KEY_TIME, AlarmData.getTime()); values.put(KEY_SONG, AlarmData.getSong()); db.insert(DATABASE_TABLE, null, values); db.close(); } public UserInputAlarmData getAlarmData(int id){ SQLiteDatabase db = getReadableDatabase(); Cursor cursor = db.query(DATABASE_TABLE, new String[] {KEY_ID, KEY_TITLE, KEY_DATE, KEY_TIME, KEY_SONG}, KEY_ID + "=?", new String[] {String.valueOf(id) }, null, null, null ); if (cursor != null) cursor.moveToFirst(); UserInputAlarmData AlarmData = new UserInputAlarmData(Integer.parseInt(cursor.getString(0)), cursor.getString(1), cursor.getString(2), cursor.getString(3), cursor.getString(4)); db.close(); cursor.close(); return AlarmData; } public void deleteAlarm(UserInputAlarmData AlarmData){ SQLiteDatabase db = getWritableDatabase(); db.delete(DATABASE_TABLE, KEY_ID + "=?", new String[] { String.valueOf(AlarmData.getId()) }); db.close(); } public int getAlarmDataCount() { SQLiteDatabase db =getReadableDatabase(); Cursor cursor = db.rawQuery("SELECT * FROM " + DATABASE_TABLE, null); int count = cursor.getCount(); db.close(); cursor.close(); return count; } public int updateAlarmData(UserInputAlarmData AlarmData){ SQLiteDatabase db = getWritableDatabase(); ContentValues values = new ContentValues(); values.put(KEY_TITLE, AlarmData.getTitle()); values.put(KEY_DATE, AlarmData.getDate()); values.put(KEY_TIME, AlarmData.getTime()); values.put(KEY_SONG, AlarmData.getSong()); return db.update(DATABASE_TABLE, values, KEY_ID + "=?", new String[] { String.valueOf(AlarmData.getId())}); } public List<UserInputAlarmData> getAllAlarmData() { List<UserInputAlarmData> AlarmDatas = new ArrayList<UserInputAlarmData>(); SQLiteDatabase db = getWritableDatabase(); Cursor cursor = db.rawQuery("SELECT * FROM " + DATABASE_TABLE, null); if (cursor.moveToFirst()) { do { UserInputAlarmData AlarmData = new UserInputAlarmData(Integer.parseInt(cursor.getString(0)), cursor.getString(1), cursor.getString(2), cursor.getString(3), cursor.getString(4)); AlarmDatas.add(AlarmData); } while (cursor.moveToNext()); } return AlarmDatas; } } 获取实时数据并使用angularjs绑定数据。有时会显示数据,否则会显示错误socket.io

以下是HTML:

No Data available

App.js

 <div ng-if="tab.displayType == 'info'">
          <div ng-repeat="content in tab.contents">
            <div ng-if="content.displayType == 'chart'">
                  <form name="userForm">
                    <h1>{{content.name}}</h1>                     
                      <div ng-if="displayData["TotalMemory"]">
                          <nvd3-line-chart
                                    data="displayData["TotalMemory"]"
                                    id="chart-{{tab.displayId}}-{{content.name}}"
                                    height="300"
                                    showXAxis="true"
                                    showYAxis="true"
                                    tooltips="true"
                                    interactive="true"
                                    useInteractiveGuideline="true"
                                   >
                                <svg></svg>
                            </nvd3-line-chart>
                        </div>
                    </form>                   
            </div>
          </div>
      </div>

数据保存app.js的更新,这里是示例数据

               for (var datum in data){
                countxx++;
                if ($scope.displayData[datum]){
                    var valueObj = $scope.displayData[datum][0];
                    if (valueObj.key){
                        if (valueObj.values.length > 10) valueObj.values.splice(0, 1); 
                        valueObj.values.push([countxx++, data[datum]]);
                    }
                }
            }
             Object.keys($scope.displayData).forEach(function(key) {
                  if (!key) {
                     delete $scope.displayData[key];
                     }
                }); 
            console.log(angular.toJson($scope.displayData));
            console.log($scope.displayData);

1 个答案:

答案 0 :(得分:1)

This is the underlying NVD3 source条件决定何时显示noData消息:

// Display noData message if there's nothing to show.
if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {...}

无论

  1. 没有要显示的系列数据数组。
  2. 有一个数据数组,但它是空的。
  3. 有一个非空的系列数组,但所有系列都有空的'values'数组(没有数据点)。
  4. 在将数据传递给图表模型之前,请尝试检查您获得的数据。