2017-01-23 12 views
0

私はc3.jsを使用してグラフを描画しようとしています。私は、モジュールが正しく動作していることを知っているので、私は自分自身のデータを使用しようとするとグラフが表示されないという問題を抱えています。私は、データベースからデータを取得し、そのようにそれを格納していますjavascript express routesを使用してJSONをC3.jsにロードする

[{"_id":"5885dc66c2ef160d2163fb79", 
"temperature":18, 
"humidity":27, 
"visibleLight":260, 
"irLight":255, 
"date":"2017-01-23T10:35:16+00:00", 
"epochtime":1485167716703}] 

このデータ:私はこの作品を特定するために知って

MongoClient.connect(url, function(err, db) { 
    assert.equal(null, err); 
    console.log("Connected successfully to server"); 
    findDocuments(db, function(docs){ 
     //console.log(docs); 
     exports.getData = function(){ 
     return docs; 
     } 
    db.close(); 
    }); 
}); 

は、それが長い文字列で次のような出力を提供します次のようにindex.jsを使用して私のビューにロードされます:

router.get('/', function (req, res) { 
    res.render('index', { 
    title: 'Dashboard', 
    allData: db.getData() 
    }); 
}) 

これらのサンプルによれば、http://c3js.org/samples/data_json.html 私は、グラフを描画しようとすると:

var chart = c3.generate({ 
    data: { 
    json: allData, 
    keys: { 
     x: 'date', // it's possible to specify 'x' when category axis 
     value: ['temperature', 'humidity'], 
    } 
    }, 
    axis: { 
    x: { 
     type: 'timeseries' 
    } 
    } 
}); 
+0

ここにいくつかのアイデアを捨ててください。 'router.get()'約束が解決される前に 'c3.generate()'コード行がヒットしている可能性はありますか?テストのように、 'json:allData'をハードコードされたサンプルに置き換えると、期待どおりに動作しますか? –

答えて

0

ここでの問題は、あなたのタイムスタンプがどのように見えるかのあなたの行方不明の定義です。 c3/d3はどのようなパターンを使いますか?

var chart = c3.generate({ 
    data: { 
      //use xFormat to define how your pattern looks like 
      xFormat: '%Y-%m-%dT%H:%M:%S+00:00', 
      json: [ 
       // your awesome data 
      ], 
      keys: { 
       x: 'date', 
       value: ['temperature', 'humidity'], 
      } 
     }, 
     axis: { 
      x: { 
       type: 'timeseries', 
       tick: { 
       //use tick.format to change how your pattern 
       //will look in your chart (maybe more user friendly) 
       format: '%Y-%m-%d' 
       } 
      } 
     } 
}); 

あなたのタイムゾーンオフセットはかなり奇妙に見えるので(+00:00)あなたは、所望のパターンを得るために、D3のtime formatting apiを見てみる必要があります。

関連する問題