title: Dynamic data in Highcharts waterfall using Rails3
body: <p>I am trying to implement Highcharts Waterfall graph in rails 3.Currently I am just using the default data as provided by <a href="http://www.highcharts.com/demo/" rel="nofollow">http://www.highcharts.com/demo/</a> Following is my view file for testing purpose</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;title&gt;Highcharts Example&lt;/title&gt;
  &lt;script type="text/javascript"&gt;
  $(function () {
  $('#container').highcharts({
      chart: {
          type: 'waterfall'
      },
  
      title: {
          text: 'Highcharts Waterfall'
      },
  
      xAxis: {
          type: 'category'
      },
  
      yAxis: {
          title: {
              text: 'USD'
          }
      },
  
      legend: {
          enabled: false
      },
  
      tooltip: {
          pointFormat: '&lt;b&gt;${point.y:,.2f}&lt;/b&gt; USD'
      },
  
      series: [{
          upColor: Highcharts.getOptions().colors[2],
          color: Highcharts.getOptions().colors[3],
          data: [{
              name: 'Start',
              y: 120000
          }, {
              name: 'Product Revenue',
              y: 569000
          }, {
              name: 'Service Revenue',
              y: 231000
          }, {
              name: 'Positive Balance',
              isIntermediateSum: true,
              color: Highcharts.getOptions().colors[1]
          }, {
              name: 'Fixed Costs',
              y: -342000
          }, {
              name: 'Variable Costs',
              y: -233000
          }, {
              name: 'Balance',
              isSum: true,
              color: Highcharts.getOptions().colors[1]
          }],
          dataLabels: {
              enabled: true,
              formatter: function () {
                  return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k';
              },
              style: {
                  color: '#FFFFFF',
                  fontWeight: 'bold',
                  textShadow: '0px 0px 3px black'
              }
          },
          pointPadding: 0
     }]
   });
  });
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Now what I want to achieve is firstly the data required should be dynamic basically the <strong>name:</strong> and the <strong>y:</strong> values. The values can be passed using a json object but how to build the json when the values are inconsistent as in case of</p>
  
  <pre><code>name: 'Positive Balance',
          isIntermediateSum: true,
          color: Highcharts.getOptions().colors[1]  
  </code></pre>
  
  <p>and </p>
  
  <pre><code>name: 'Balance',
          isSum: true,
          color: Highcharts.getOptions().colors[1]
  </code></pre>
  
  <p>as there are no <strong>y:</strong> values. Kindly help me out as I am not able to figure out how to achieve dynamic data in this chart.</p>