title: Better way to use Ruby/Sinatra to pass data to Highcharts?
body: <p>I'm generally of the opinion that if it ain't broke don't fix it, but my current solution to this issue (though it does work) seems really ugly. I am using Ruby, Sinatra, Haml, and Highcharts, and I'd like to be able to pass data grabbed in Ruby and send to Highcharts.</p>
  
  <p>Currently, I'm essentially just creating a string object out of the entire Highcharts javascript and interpolating the ruby data into that. This works, but should I be taking a completely different approach to this? Here's exactly what I'm doing:</p>
  
  <p>I've defined a HighChart class with several properties that I want to be able to change via Ruby (e.g. chart title, data, etc). The example below (which works!) only sets two of these properties, leaving the rest as default:</p>
  
  <pre><code>    get '/' do
        @chart = HighChart.new(options={
                      :title_text =&gt; "Test Title",
                      :series_data =&gt; 
                      {
                      'Calvin' =&gt; [10, 2, 17],
                      'Hobbes' =&gt; [11, 14, 6]
                      }
                    }
                  )
        haml :index
      end
  </code></pre>
  
  <p>I'm using Haml's javascript filter in the view:</p>
  
  <pre><code>:javascript
    #{@chart.chart_js}
  </code></pre>
  
  <p>So far so good. The ugly part is the chart_js method. I have simply copied the full text of the HighChart javascript, pasted it in as a string, and then used Ruby interpolation to grab the variables from the HighChart object created in the controller:</p>
  
  <pre><code>    def chart_js  
        chart_js = "
        var chart1;
        $(document).ready(function() {
  
    chart1 = new Highcharts.Chart({
  
       chart: {
  
          renderTo: '#{render_to}',
  
          type: '#{chart_type}'
  
       },
  
       title: {
  
          text: '#{title_text}'
  
       },
  
       xAxis: {
  
          categories: #{x_categories}
  
       },
  
       yAxis: {
  
          title: {
  
             text: '#{y_categories}'
  
          }
  
       },
  
       series: [#{get_data_js(series_data)}]
  
    });
  
   });
    "
  end
  </code></pre>
  
  <p>And just in case it's helpful, here's the first part of the HighChart object class definition:</p>
  
  <pre><code>    class HighChart
  attr_accessor :render_to, :chart_type, :title_text, :x_categories, 
                :y_categories, :series_data
  
      def initialize(options={})
        self.render_to = options[:render_to] || 'container'
        self.chart_type = options[:chart_type] || 'bar'
        self.title_text = options[:title_text] || 'Fruit Consumption'
        self.x_categories = options[:x_categories] || ['Apples', 'Bananas', 'Oranges']
        self.y_categories = options[:y_categories] || 'Fruit eaten'
        self.series_data = options[:series_data] || {'Jane' =&gt; [1, 0, 4], 
                                                    'Bobbert' =&gt; [5, 7, 3],
                                                    'Zach' =&gt; [10, 2, 1]
                                                    }
      end
  </code></pre>