How to include flotr2 charts in rails?

Question

I'm trying to include a chart in a view, but it doesn't work. Can somebody help?

That's what I have in the view (flotr2.min.js is in public/javascripts):

...
<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>

score 1 · Answer 1 · answered Feb 23 '12 at 22:18

1

You might need to fix your container size, try having this style in your head:

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

I have also found the current version on github isnt working. Try www.humblesoftware.com/static/js/flotr2.min.js

answered Feb 23 '12 at 22:18

Steven

3,844
3
32
53

1

Tried to change the container size, but still it doesn't work. If I use the js-file in a 'stand-alone' html file the chart is drawn. Thus, the flotr2.min.js itself should be ok. – Peterb Feb 24 '12 at 19:25
Is flotr2.min.js being included in the head tag with your ruby app? – Steven Feb 27 '12 at 01:36
Yes, I have tried both options. First, I had included the <%= javascript_include_tag "flotr2.min.js" %> in the view file and then I tried to include it in the application layout file. Could it be that there are some problems with the standard prototype javascript libraries? – Peterb Feb 27 '12 at 08:13
perhaps. perhaps grab the html source from your page into a local file. then start taking bits and pieces out until you find your problem. – Steven Feb 27 '12 at 23:41

Kuba · Answer 2 · 2013-01-14T10:48:05.990

You are missing container variable in your Script. Include flotr2.min.js in the head. Container MUST have positive width:

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

Try it like that:

 <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>

How to include flotr2 charts in rails?

2 Answers2