web applications - Dynamic creation of Multiple NVD3 charts with rails partial -

I have a page that I am trying to show several NVD3 charts on the tab. I see on the NVD3 site that they store all the chart names before time but I'm not sure how I should do it.

I have graph models that are stored in the database and then dynamically submit my page all the charts and the appropriate javascript on the fly so far only the last graph has been created: (

I rendered it partially for each article

   if graph.present?% & Gt; & lt;% @ graph = graph% & gt; & Lt;% end% & gt; & lt;% if @graf.data.empty?% & Gt; & lt;% = Render 'article / any'% 'and%; gt; & lt;% else% & Gt; & lt; script type = "text / jav Ascript "& gt; $ (document) .ready (function () {var data = $ ('# chart_ & lt;% = @ graph.id% & gt;'). Data ('data'); reload graph ( Data ('one' [data-toggle = "tab"] '). (' Shown ', function (e) {reload graph (data)}}}) function reload graph (data) {nv.addGraph (function () {Var chart = nv.models.multiBarChart (); chart.yAxis.axisLabel ('Monthly (kWh)'); d3.select ('# chart_ and lt;% = graph.id% & gt; svg') Data (Data) .transition (). Duration (500). Call (chart); nv.utils.windowResize (chart.update); Return chart;})}} & lt; / Script & gt; & Lt;% = content_tag: div, id: "chart _ # {@ graph.id}", category: 'chart', data: {data: article: mmtli_data} do% & gt; & Lt; Svg & gt; & Lt; / Svg & gt; & Lt;% end% & gt; & Lt;% end% & gt;   
 On the NVD3 site, they start with:  
  var Main example, Example one, Example 2   < P> etc.  
 Then they give examples in their constuction call  mainExample = chart   
 I should be given some advice on how to structure this rail needed ??   
 
 
 OK, there was no buyer on the answer here, but basically it has been found that You have to store direct objects in the array  
  char charts = []   
 then with a  each_in_inodex  Loop through and use the pointer in the context of various charts in your  every_with_index  
 Loop which essentially javascript one at a time Ukdha is providing, you offer each building dynamic charts.  
 This looks like me (United Nations polished but fine thing)  
   graph, index |%> data [& lt;% = Index = & gt;] = $ ('# chart_ & lt;% = graph.id% & gt;'). Data ('data'); nv.addGraph (function () {{lt;% if graph Type == "BarGraph"% & Gt; var chart = nv.models.multiBarChart () margin ({left: 80, bottom: 30}); <% else%> var chart = nv.models. LineChart ({left: 80, bottom: 30}); char.xxis.tickfarmat (function (d) {return d. Time format ('% h:% m') (new date (d) );}) & Lt;% end% & gt; chart.yAxis .XisLabel ('kVA') d3.select ('# chart_ and lt;% = graph.id% & gt; SVG') .data (data [& lt;% = index% & gt;]). Transition (); duration (500) .Col (chart); nv.utils.windowResize (chart.update); article [& lt;% = Index = & gt;] = chart return chart;}); <% end%> $ ('[data-toggle =' "tab"] "). ('Shown', function (e) {$ .eec (graph, function (index, graph) {graph.update ()})})}) & lieutenant; / script & gt; & Lt; Div class = "line-fluid" & gt; & Lt; Div class = "span12" & gt; & Lt; Ul class = "nav nav-tabs" id = "graph_tabs" & gt; Make & lt;% graphs.each_with_index | Graph, index |%> & Lt; Li & lt;% = index == 0? "Class = active": "%" & Gt; & Lt; A href = "#Graph_Tab_Light;% = graph.id%>" Data-Toggle = "Tab" & gt; & Lt;% = graph.description% & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt;% end% & gt; & Lt; / Ul & gt; & Lt; Div class = "tab-content" & gt; Make & lt;% graphs.each_with_index | Graph, index |%> & Lt; Div id = 'graph_tab_ & lt;% = graph.id% & gt; Class = "tab-pane feed <% = index == 0?" In active ":" '%' gt; & Gt; & Lt;% = render "article / # {graph.type.downcase}", article: article%> & Lt; / Div & gt; & Lt;% end% & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 When you are using the Bootstrap tab, it's a really easy trick to underscore, otherwise they do not render properly.