Charts with Velocity Web Client?

Classic Servoy
1

Hi al,

I don’t know if this is the right approach… I’d like to include a Dashboard in our solution (only webclient) with a lot of amazing charts. VelocityReport plugin uses an old API from Google to create charts, so I’m thinking about using Velocity Web Client to create pages with these charts (using new Google API). If it is the better way, How can I integrate that page into my solution?

Regards,

2

Sample js charting libraries:

https://github.com/flot/flot/blob/master/README.md
http://www.oesmith.co.uk/morris.js/

Use web client utils plugin to load up the required resources, add the markup to an html area, and initialize with data.

3

Depends what you want to do…

Are you talking about creating reports? In that case you cannot use the new Google charts API because it’s HTML5 or Flash based, meaning it’s dynamic. And you want a fixed image to embed in your report.

Or are you talking about adding it in Servoy Web Client? In which case you could go the route David is talking about (or embed the google charts JS files using the web client utils as well)

If you are talking about a web site constructed with Velocity, then you are free to embed any JS libraries including charting libraries… Just put them in your template. Then pass the init parameters of your charts dynamically in your context object when you return a plugins.Velocity.createResponse(context)

4

Thanks for your reply…

I don’t want to create a web site, only a few pages with some charts, so the best option would be adding JS files with web client utils.

I’ll try that approach.

Regards,

5

I’ve tested several approaches… I want to use Google Charts API, and, in my opinion, the best option is using web client utils to add required js files and putting a html area with js code to drawing the charts.

Thanks!

Regards,

6

juan.cristobo:
I’ve tested several approaches… I want to use Google Charts API, and, in my opinion, the best option is using web client utils to add required js files and putting a html area with js code to drawing the charts.

Thanks!

Regards,

Did it work? If so, can you contribute your code to SOS and the how-to-do to ServoyForge?

7

I don’t where to put the code, please feel free to put wherever you want…

I’m going to use the example you can get from the Google documentation, here.

  • First, create a variable form (i.e., ‘chart’), use it as datasource of a field of type HTML_AREA and put it in the form.

  • Then, create an onShow method. Add a reference of Google libraries (as you can see in the original code from doc):

plugins.WebClientUtils.addJsReference('https://www.google.com/jsapi');
  • You can assign the remaining code to ‘chart’ variable, but I prefer to do it this way (this is the complete code for onShow method):
function onShow(firstShow, event)
{
	plugins.WebClientUtils.addJsReference('https://www.google.com/jsapi');
    var datasource = [
		['Topping', 'Slices'],
		['Mushrooms', 3],
		['Onions', 1],
		['Olives', 1],
		['Zucchini', 1],
		['Pepperoni', 2]
	];
	var chartOptions = {
		'title':'How Much Pizza I Ate Last Night',
        'width':400,
        'height':300
	};
	
	chart = '<script type="text/javascript">\
			google.load("visualization", "1.0", {"packages":["corechart"]});\
			google.setOnLoadCallback(drawChart);\
			function drawChart() {\
			    var data = new google.visualization.arrayToDataTable(' + JSON.stringify(datasource) + ');\
			    var options = ' + JSON.stringify(chartOptions) + ';\
			    var chart = new google.visualization.PieChart(document.getElementById("chart_div"));\
			    chart.draw(data, options);\
		      }\
		    </script>\
		    <div id="chart_div"></div>';
}

As you can see, I define the values and the chart options as variables in Servoy code and then 'inject" them using JSON.stringify, I think that the code is very clear. Of course, you can populate ‘datasource’ array with data from Servoy.

8

Thank Juan for your reply.

I meant, why don’t you upload your solution as an example into the VelocityReportPlugin project at ServoyForge?

This will be the location to put your solution example: Files - VelocityReport Plugin - ServoyForge. The explanation you typed above is enough.

I think you’ll need to be a Contributor of the project (VelocityReport) to post something within. But, you also can create a new project and call it ‘Charts with Velocity Web Client’ module. If you want, send me the solution you already created and I’ll add it to ServoyForge on your behalf.

Thanks again. Really cool example.

9

But this has nothing to do with Velocity.

Of course, you can use Velocity Web Client, but I only use Servoy forms, web client and Web Client Plugin for embed js libraries.

Regards,

10

juan.cristobo:
But this has nothing to do with Velocity.

Of course, you can use Velocity Web Client, but I only use Servoy forms, web client and Web Client Plugin for embed js libraries.

Regards,

I see. Then you can just create a new project in ServoyForge. Call it something like ‘Charts with the Web Client Plugin’ module. Just post the example solution and the explanation you already typed. It’s all good.

11

Add it to the web client utils wiki as an example. I don’t think a whole project for a one tip is really necessary :)