Databases
StackOverflow2013
Postsdbo
POJQplot dynamic data
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQplot dynamic data
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USlemunk
    1. USlemunk
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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