data is at the top

<div data-show="<%=  @options.first.dbrick.id %>_show" data-bar="<%=  @options.first.dbrick.id %>_bar" data-line="<%=  @options.first.dbrick.id %>_line">
<div class="show span pull-right show">Line</div><br />


<script type="text/javascript" charset="utf-8">

$(document).ready(function(){
  var s1 = <%= @options.map { |x| x.votes.count }.inspect %>;
    var s2 = <%= @options.map { |x| x.votes.count }.inspect %>;
    plot1 = $.jqplot("<%=  @options.first.dbrick.id %>_bar", [s2, s1], {
        // Turns on animatino for all series in this plot.
        animate: true,
        // Will animate plot on calls to plot1.replot({resetAxes:true})
        animateReplot: true,
        cursor: {
            show: true,
            zoom: true,
            looseZoom: true,
            showTooltip: true
        },
        series:[
            {
                pointLabels: {

                  show: true
                },
                renderer: $.jqplot.BarRenderer,
                showHighlight: false,
                yaxis: 'y2axis',
                rendererOptions: {
                    // Speed up the animation a little bit.
                    // This is a number of milliseconds.
                    // Default for bar series is 3000.
                    animation: {
                        speed: 2500
                    },
                    barWidth: 15,
                    barPadding: -15,
                    barMargin: 0,
                    highlightMouseOver: true
                }
            },
            {
                rendererOptions: {
                    // speed up the animation a little bit.
                    // This is a number of milliseconds.
                    // Default for a line series is 2500.
                    animation: {
                        speed: 2000
                    }
                }
            }
        ],
        axesDefaults: {
            pad: 0
        },
        axes: {
            // These options will set up the x axis like a category axis.
            xaxis: {
                tickInterval: 1,
                drawMajorGridlines: false,
                drawMinorGridlines: true,
                drawMajorTickMarks: false,
                rendererOptions: {
                tickInset: 0.5,
                minorTicks: 1

            }
            },
            yaxis: {
                tickOptions: {
                    formatString: "%'d"
                },
                rendererOptions: {

                    forceTickAt0: true
                }
            },
            y2axis: {
                tickOptions: {
                    formatString: "%'d"
                },
                rendererOptions: {
                    // align the ticks on the y2 axis with the y axis.
                    alignTicks: true,
                    forceTickAt0: true
                }
            }
        },
        highlighter: {
            show: true,
            showLabel: true,
            tooltipAxes: 'y',
            sizeAdjust: 7.5 , tooltipLocation : 'ne'
        }
  });
});

 </script>



<div id="<%=  @options.first.dbrick.id %>_bar" class="<%=  @options.first.dbrick.id %>_bar" style="width:630 px; height:150px; display:block" class="span"></div>





  <script type="text/javascript" charset="utf-8">

$(document).ready(function(){
  var s1 = <%= @options.map { |x| x.votes.count }.inspect %>;
    var s2 = <%= @options.map { |x| x.votes.count }.inspect %>;
    plot1 = $.jqplot("<%=  @options.first.dbrick.id %>_line  ", [s2, s1], {
        // Turns on animatino for all series in this plot.
        animate: true,
        // Will animate plot on calls to plot1.replot({resetAxes:true})
        animateReplot: true,
        cursor: {
            show: true,
            zoom: true,
            looseZoom: true,
            showTooltip: true
        },
        series:[
            {
                pointLabels: {

                  show: true
                },
                renderer: $.jqplot.BarRenderer,
                showHighlight: false,
                yaxis: 'y2axis',
                rendererOptions: {
                    // Speed up the animation a little bit.
                    // This is a number of milliseconds.
                    // Default for bar series is 3000.
                    animation: {
                        speed: 2500
                    },
                    barWidth: 15,
                    barPadding: -15,
                    barMargin: 0,
                    highlightMouseOver: true
                }
            },
            {
                rendererOptions: {
                    // speed up the animation a little bit.
                    // This is a number of milliseconds.
                    // Default for a line series is 2500.
                    animation: {
                        speed: 2000
                    }
                }
            }
        ],
        axesDefaults: {
            pad: 0
        },
        axes: {
            // These options will set up the x axis like a category axis.
            xaxis: {
                tickInterval: 1,
                drawMajorGridlines: false,
                drawMinorGridlines: true,
                drawMajorTickMarks: false,
                rendererOptions: {
                tickInset: 0.5,
                minorTicks: 1

            }
            },
            yaxis: {
                tickOptions: {
                    formatString: "%'d"
                },
                rendererOptions: {

                    forceTickAt0: true
                }
            },
            y2axis: {
                tickOptions: {
                    formatString: "%'d"
                },
                rendererOptions: {
                    // align the ticks on the y2 axis with the y axis.
                    alignTicks: true,
                    forceTickAt0: true
                }
            }
        },
        highlighter: {
            show: true,
            showLabel: true,
            tooltipAxes: 'y',
            sizeAdjust: 7.5 , tooltipLocation : 'ne'
        }
  });
});

 </script>



<div id="<%=  @options.first.dbrick.id %>_line" class="<%=  @options.first.dbrick.id %>_line" style="width:630 px; height:150px; display:none" class="span"></div>

</div>