来自csv文件的实时图形数据,使用dimple.js或dygraph

时间:2015-06-25 11:30:14

标签: dygraphs dimple.js

我在dimple中尝试过的代码

 <html>
   <head>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <script src="http://d3js.org/d3.v3.min.js"></script>
      <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
   </head>
   <body>

      <script type="text/javascript">

    $.ajax("data.csv", {
    success: function(data) {
     var csv = d3.csv.parse(data);
        var svg = dimple.newSvg("body", 490, 430);
        var chart = new dimple.chart(svg, csv);
chart.addCategoryAxis("x", "Reading time");
chart.addMeasureAxis("y", "Level");
chart.addSeries(null, dimple.plot.bar);
chart.draw();
    }
});   

 </script>
   </body>
</html>

我在dygraph中尝试的代码是,

'<html>
    <head>
  <script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.0/dygraph-combined-dev.js"></script>
    </head>
    <body>
        <div id="graphdiv2"
            style="width:100%; height:75%;"></div><br>
        <script type="text/javascript">
            g2 = new Dygraph(
                             document.getElementById("graphdiv2"),
                             "te1.csv", // path to CSV file
                             {  title: 'Title',
                                xlabel: 'date',
                                ylabel: 'pressure',
                                legend: 'always',
                                labelsDivStyles: {'textAlign': 'right'},
                               
                             } );
            </script>
    </body>
</html>'

我尝试了很多例子,bcoz我是新手,我无法理解得到我的结果。在我的csv文件中我有日期,时间,数据。在这里我想要X轴的日期和时间以及Y轴的数据 如果有必要,我可以在一个单元格中创建日期时间,在另一个单元格中的数据也可以在csv中进行,以便

我可以利用这个例子var format = d3.time.format("%Y-%m-%d %H:%M:%S");

但我不知道如何连接我的csv文件与这个dimplejs以及如何根据我的各种输入编辑属性

在dygraph中我不知道如何在一个轴上获取时间和日期, 我每天有100个数据显示在图表中。在这方面,它每天只需要一个数据

bcoz我在csv中有一年的数据显示在网页的折线图中。 PLs引导我。在dygraph和dimple.js中看到很多例子之后我很困惑,我没有得到它..

0 个答案:

没有答案