flotr2グラフをレールに含めるにはどうすればいいですか？

Question

ビューにグラフを含めることはできますが、動作しません。誰かが助けることができますか？

私は（flotr2.min.jsは、公共/ JavaScriptのである）のビューを持っているものです。

... 
<div id="container"> 
    <!--[if lt IE 9]> 
    <script type="text/javascript" src="/static/lib/FlashCanvas/bin/flashcanvas.js">  </script> 
    <![endif]--> 
    <%= javascript_include_tag "flotr2.min.js" %> 
    <script type="text/javascript"> 

    (function() { 
     var d1 = [ 
     [1, 10], [2, 8], [3, 5],[4, 13]], 
    d2 = [[1,12],[2,12],[3,12],[4,12],[5, 12]] 

    graph = Flotr.draw(container, [{data: d1, label: "Test"}, {data: d2, lines:{show: true}, points: {show: true}}], { 
mode: 'time', 
    xaxis: { 
    ticks: [[1, "Jan"],[2, "Feb"], [3, "Mrz"], [4, "Apr"], [5, "Mai"], [6, "Jun"], 
       [7, "Jul"],[8, "Aug"], [9, "Sep"], [10, "Okt"], [11, "Nov"], [12, "Dez"]]  

    }, 
    grid: { 
     minorVerticalLines: true, 
    backgroundColor: 'white' 
    } 
    }); 
})(); 
</script> 

</div> 

Answer 1

あなたはあなたの頭の中でこのスタイルを持ってみてください、あなたのコンテナのサイズを修正する必要があります

<style type="text/css"> 
    #container { 
    width : 600px; 
    height: 384px; 
    margin: 8px auto; 
    } 
</style> 

github isntの現在のバージョンも動作しています。お試しくださいwww.humblesoftware.com/static/js/flotr2.min.js

Answer 2

あなたのスクリプトにはコンテナ変数がありません。頭にflotr2.min.jsを含めてください。コンテナは、正の幅れている必要があります。

<div id="container" style="height: 420px; width: 100%;"></div> 

そのようにそれを試してみてください。

<script type="text/javascript"> 
    var container = document.getElementById('container'), 
    d1 = [[1, 10], [2, 8], [3, 5],[4, 13]], 
    d2 = [[1,12],[2,12],[3,12],[4,12],[5, 12]]; 

     Flotr.draw(container, [{data: d1, label: "Test"}, {data: d2, lines:{show: true}, points: {show: true}}], 
    {mode: 'time', 
     xaxis: { 
     ticks: [[1, "Jan"],[2, "Feb"], [3, "Mrz"], [4, "Apr"], [5, "Mai"], [6, "Jun"], 
        [7, "Jul"],[8, "Aug"], [9, "Sep"], [10, "Okt"], [11, "Nov"], [12, "Dez"]]  
     }, 
     grid: { 
      minorVerticalLines: true, 
     backgroundColor: 'white' 
     } 
     }); 
    </script>