title: JQplot dynamic data
body: <p>Using: JQPlot, JavaScript, Asp.net 4.5, C# and MS Visual Studio 2012.</p>
  
  <p>Hi guys Here's some code I'm having an issue with:</p>
  
  <pre><code>script&gt;
  $(document).ready(function () {
      var dataArray = [];
  
      &lt;%foreach(Last12MonthsRegistered reg in dbregistered)
                    {%&gt;
      dataArray.push(['&lt;%=reg.MonthName.Trim()%&gt;',&lt;%= reg.TotalReg%&gt;]);
          &lt;%}%&gt;
  
      var plot2 = $.jqplot('chart1', [dataArray], {
          // Give the plot a title.
          title: 'Users Registered Last 12 Months',
          axesDefaults: {
              labelRenderer: $.jqplot.CanvasAxisLabelRenderer
          },
          axes: {
              // options for each axis are specified in seperate option objects.
              xaxis: {
                  label: "Months"
              },
              yaxis: {
                  label: "User Total"
              }
          }
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>As you can see I'm trying to render a jqplot graph using data i obtain from my SQL Database, this data is bound to a list of objects.
  I access the values and loop through a Foreach loop in the script above to populate an array, which in turn is used for the JQplot.</p>
  
  <p>Problem i have is nothing shows, when i stepped through the JS script its showed me the following results:</p>
  
  <pre><code>dataArray.push(['October',0]);
  
  dataArray.push(['November',0]);
  
  dataArray.push(['December',0]);
  
  dataArray.push(['January',1]);
  
  dataArray.push(['February',8]);
  
  dataArray.push(['March',4]);
  
  dataArray.push(['April',1]);
  
  dataArray.push(['May',0]);
  
  dataArray.push(['June',0]);
  
  dataArray.push(['July',1]);
  
  dataArray.push(['August',1]);
  
  dataArray.push(['September',1]);
  </code></pre>
  
  <p>which looks correct?  but then hovering over the array while debugging it shows:</p>
  
  <pre><code>0: Array[2]
  1: Array[2]
  2: Array[2]
  3: Array[2]
  4: Array[2]
  5: Array[2]
  6: Array[2]
  7: Array[2]
  8: Array[2]
  9: Array[2]
  10: Array[2]
  11: Array[2]
  length: 12
  __proto__: Array[0]
  </code></pre>
  
  <p>which doesn't look correct at all!
  As you probably guessed when I continue I get a blank graph.</p>
  
  <p>Yes I am fairly new to JavaScript, and This is my first time using JQPlot, I'm struggling to find the information i need in there documentation, so I'm hoping you guys can tell me why my array appears to be wrong.</p>
  
  <p>Cheers guys/girls </p>
  
  <p><strong>UPDATE: 24/10/2013 - 11:24 AM</strong>
  found some more info and changed my code to a bar chart.</p>
  
  <pre><code>    $(document).ready(function () {
      var dataArray = [];
      var ticks = [];
  
      &lt;%foreach(Last12MonthsRegistered reg in dbregistered)
                    {%&gt;
      dataArray.push(&lt;%= reg.TotalReg%&gt;);
      &lt;%}%&gt;
  
      &lt;%foreach(Last12MonthsRegistered reg in dbregistered)
                    {%&gt;
      ticks.push('&lt;%= reg.MonthName.Trim()%&gt;');
      &lt;%}%&gt;
  
      var plot1 = $.jqplot('chart1', [dataArray], {
          // Give the plot a title.
  
          seriesDefaults: {
              renderer: $.jqplot.BarRenderer,
              rendererOptions: { fillToZero: true }
          },
          // Custom labels for the series are specified with the "label"
          // option on the series option.  Here a series option object
          // is specified for each series.
          series: [
              { label: 'Users Registered' },
          ],
          // Show the legend and put it outside the grid, but inside the
          // plot container, shrinking the grid to accomodate the legend.
          // A value of "outside" would not shrink the grid and allow
          // the legend to overflow the container.
          legend: {
              show: true,
              placement: 'outsideGrid'
          },
          axes: {
              // options for each axis are specified in seperate option objects.
              xaxis: {
                  renderer: $.jqplot.CategoryAxsisRenderer,
                  ticks: ticks
              },
              yaxis: {
                  pad: 1.05
              }
          }
      });
  });
  </code></pre>
  
  <p>Seems the arrays are fine, and i am getting the month names on the x axsis which is great.....Only problem is there stacked on each other to the very left, so nothing gets displayed and the names are over each other.....</p>
  
  <p>im baffled, any thoughts?</p>