Creating a graph based on form data

[eddparsons]

I'm trying to generate a graph in Ebase using data from a table.

I've setup jQuery and JQPlot and have after some trial and error produced a graph with some dummy data but I'm struggling to use tables in Javascript.

Any code I use that relates to tables not only doesn't do anything but stops any other code from working - i.e. I added the line
tables.TOTALS.fetchTable();
to the function I was using for plotting the dummy graph and it stops it from working.

I have also tried the below to create an array for the graph, without any success:

var data2 = new Array();
var rows = tables.TOTALS.rows;
var i = 0;
while ( rows.next() )
{
data2 = tables.TOTALS.TOTAL.value;
i++
}

Can someone tell me where I'm going wrong?

Also, I'm not getting any error messages - is there a way of displaying these to give me a clue what the problem is?

Regards,
Edd Parsons

[dvanhussel]

Are you sure that that there is actually data in your table after you fetched it?
If you put the table on your page, does it show any rows? If this table is backed by, for example, a database resource, you can turn on debugging in this resource to see which queries are performed to fetch the data.

In order to do some debugging in JavaScript, use the log() function. And I think you have a missing semicolon after i++

An example of what I would log:

Code: Select all

 
var data2 = new Array(); 
var rows = tables.TOTALS.rows; 
var i = 0; 
log('start of loop');
while ( rows.next() ) 
{ 
  data2[i] = tables.TOTALS.TOTAL.value; 
  log(i+': '+data2[i]);
  i++;
}

When this script is run, you should see the values that are logged in the Excecution Log in the Ebase Desginer

[eddparsons]

Hi, thanks for your reply.

Yes there was data in the table that was being fetched via an FPL script.

I think I have a more fundamental issue though - I've gone back to my dummy data script and added an extra log line as described but this also stops the graph from being produced and doesn't log anything.

My script is as follows:

$(document).ready(function(){
});

showchart = function(){

var data2 = new Array();
for(var i=0; i<5; i++) {
data2 = i;
// log(i+': '+data2);
}

var plot1 = jQuery.jqplot ('chart1', [data2],
{
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true
}
},
legend: { show:true, location: 'e' }
}
);
};

There is a panel in the form with a HTML element ID of chart1 that has an on click event of showchart();

This works as is but breaks when I uncomment the log line.

[Wai]

Hi Edd,

You are mixing Client-side JavaScript and Server-side JavaScript here.

The JQuery JPlot is Client-side. All of the stuff you are doing in $(document).ready(function() etc is for client side scripting.
You cannot use the Ebase log statement in the Client script.

To get Ebase table data into your JQuery client script you have to build an Ebase form field to contain either a String of the data, or if using 4.4, you should be able to use an Object field.

You can then substitute the field into your client script using &&

[eddparsons]

Thanks Wai, I hadn't realised there was a distinction.

I've created a form field called chartdata and built up a string - how do I use this in client-side javascript?

I've tried the below but it's not working.

var data2 = &&Chartdata;

Regards,
Edd

[eddparsons]

Hi again,

Just seen post http://forum.ebasetech.com/forum/viewtopic.php?t=276 - so it looks like this should work.

I have also tried

data2 = &&Chartdata;

and

data2 = $('#chartdata').val();

after setting the HMTL ID of the editor part of the field to chartdata.

The chartdata string contains

[['AUDIT_TEST',5],['CONTRACT',2],['EC_COMPLAINT',1],['GRAPHICS_ORDER_FORM',2],['LI_VEHICLE_EXAM',4],['LPEN_REGISTER',2],['PENDING_REGISTER',4],['PT_ENQ',3],['PT_TRANS_GOGREEN',8],['REQUEST_FOR_SERVICE',1],['SAP_HOS',3],['STATIONERY',1]]

which works if I copy the string into the javascript code and allocate it directly, but not if I reference the fieldname.

[Wai]

So you have the following:

- Chartdata is a form field on your page (when this is on the page, you can see the correct string in the field value).

- Chartdata has an ID on the Editor part set as chartdata (case is important)

- Client Script is added to the page, what does alert(data2) give you?
This needs to be within the document.ready function. The page must have finished loading before the script tries to access the form field. From your earlier post it looked like document.ready was empty.

[eddparsons]

Chartdata is a form field with a value that is set via FPL on page load - the correct string is displayed on the page. I have also tried setting the chartdata default value with the same results.

The chartdata control (I assume this is set against the control as the field itself doesn't have HTML elements) has under HTML elements, Editor Input an ID of chartdata (lower case).

With data2 = &&chartdata; alert(data2) does nothing.

With data2 = $('#chartdata').val(); alert(data2) shows an empty string.

With data2 = the string copied and pasted into the script, alert(data2) shows me the string.

I have moved my scripting into the document.ready function - so it now looks like:

$(document).ready(function(){

data2 = $('#chartdata').val();
alert(data2);
var plot1 = jQuery.jqplot ('chart1', [data2],
{
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true
}
},
legend: { show:true, location: 'e' }
}
);
});

[eddparsons]

Update - I've created a new field test_field, given it an ID of test and a default value of [['AUDITTEST',5],['CONTRACT',2]] and set my data2 = $('#test').val();

The alert function is now showing me the string although the graph still isn't plotting.

I have noticed that when using the field the alert shows the string exactly as entered but when setting the string explicitly in the javascript the alert that appears doesn't contain any of the brackets or quotes - is this relevant?

[Wai]

Yes it is. The string that you construct must contain brackets and quotes as in the examples, this is how the JPlot javascript requires it.

[Hovik]

The only thing missing is an eval of the data field to convert it to an array.
So the the client script code is:

Code: Select all

var v1 = $("#test").val();
var s1 = eval(v1); // this is the key

To prevent the test_field from showing on the page, put it in a panel on its own, then add display:none; to the advanced properties of the panel.

[eddparsons]

Thanks Hovik (and others), this is now working.

Regards,
Edd

[Hovik]

So the main steps are:

Populate a form field with the data. Note the leading and trailing [ and ]. e.g.
[['AUDIT_TEST',5],['CONTRACT',2],['EC_COMPLAINT',1],['GRAPHICS_ORDER_FORM',2],['LI_VEHICLE_EXAM',4],['LPEN_REGISTER',2],['PENDING_REGISTER',4],['PT_ENQ',3],['PT_TRANS_GOGREEN',8],['REQUEST_FOR_SERVICE',1],['SAP_HOS',3],['STATIONERY',1]]

2. set the HMTL ID of the editor part of the field to chartdata

3. This field needs to be on the page (not hidden). To prevent it from showing on the page, put it in a panel on its own, then add display:none; to the advanced properties of the panel

4. Write the client script (Web Resources -> Client Scripts):

Code: Select all

$(document).ready(function() {

   $.jqplot.config.enablePlugins = true;
   var v1 = $("#chartdata").val();
   var s1 = eval(v1);
   plot1 = $.jqplot('chart1', [s1], {
         seriesDefaults:{
            renderer:$.jqplot.PieRenderer,
            rendererOptions: { padding: 8, showDataLabels: true}
         },
   legend: {show:true}
   }
);

$('#chart1').bind('jqplotDataHighlight', function (ev, seriesIndex, pointIndex, data) {
   $('#info1').html('Graph value (£) : ' + data);
   }
);

$('#chart1').bind('jqplotDataUnhighlight', function (ev) {
   $('#info1').html('Nothing selected');
   }
);

});

5. Add this to the page client scripts, after all the required jQuery library scripts.