Databases
StackOverflow2013
Postsdbo
PODynamic data in Highcharts waterfall using Rails3
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODynamic data in Highcharts waterfall using Rails3
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload