Charting with velocity

Classic Servoy
1

Hello Everybody

Still fighting with velocity garphs.

I want to show a stacked bar series with tickettypes per month.
I don’t know what tickettypes are used in which project !! The user can customize this individually for each project
My problem is chartDef3.bars = … see below

function m_graphiken() {
	var query = "select tickettype,month(entrydate) as monat,count(rbkontaktid) as anzahl "+
	" from rbkontakt where projekt = ? and year(entrydate) = ? "+
	"group by tickettype,month(entrydate) ";
		
	
	var args = new Array();
	args[0] = vprojekt;
	args[1] = vjahr;
	var result = databaseManager.getDataSetByQuery('maxdb',query,args,-1);
	
	var colors = ['#ff0000','#8000ff','#80ff00','#8080c0','#804000','#ff8080','#ff80c0','#8080ff'];
	var colorcounter = 1;
	            
	// the object with all needed things
   	var amaxmonth = [0,0,0,0,0,0,0,0,0,0,0,0];  //for the maximum monthly count
        var objectreminder = new Array();                 //for the bars
  
	var myObject = new Object();
    for (var i = 1; i <= result.getMaxRowIndex(); i++) 
    {
                var vtickettype = result.getValue(i,1);
                var vmonth = result.getValue(i,2);
                var vkoanz = result.getValue(i,3);
                //one object per tickettype
                if (!(vtickettype in myObject)) {
                        
                	myObject[vtickettype] = new Object();
                        myObject[vtickettype].data = [0,0,0,0,0,0,0,0,0,0,0,0];
                        myObject[vtickettype].legend = vtickettype;
                        myObject[vtickettype].color = colors[colorcounter];
                        colorcounter++;
                        objectreminder.push('myObject["'+vtickettype+'"]');    //this one should fill the bars
                           
                }
                
                myObject[vtickettype].data[vmonth-1] = vkoanz;
                amaxmonth[vmonth-1] = amaxmonth[vmonth-1] + vkoanz; //für den maximalen Monatswert!
    }
             
	//die graphik
	var chartDef3 = new Object();
	
	chartDef3.width = 900;
	chartDef3.height = 290;
	chartDef3.threeD = true;
	chartDef3.background = '#d4d4d4';
	chartDef3.stacked = true;
	
	chartDef3.min = 0;
	
	//variable chatmax needed!
	var chartmax = 0;
	for (var index = 0; index < amaxmonth.length; index++) {
		if (amaxmonth[index] > chartmax) chartmax = amaxmonth[index];
	}
	
	//round to next 100
	var roundchartmax  = Math.ceil(chartmax/100)*100;
	chartDef3.max = roundchartmax;
	//end	variable chatmax needed!
	
	chartDef3.grid = { x: 1, y: 5, line: 3, blank: 2 };
	chartDef3.legendPosition = "top";
	
	// Title
	chartDef3.title = "Kontakte des Jahres "+ vjahr;	
	chartDef3.titleColor = '#ff0000';
	chartDef3.titleSize = 16;

//Problem	
//this works , but its hardcoded. I normaly don't know that there is a tickettype "Auftrag" or "Störung" ... !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
//	chartDef3.bars = [myObject["Auftrag"], myObject["Störung"], myObject["Gewährleistung"], myObject["Instandsetzung"], myObject["Ersatzteile"]];
	
// this doesn't work  no errors no graph !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// when i do a application.output(objectreminder) it looks exactly like the working line above: chartDef3.bars = [myObject["Auftrag"], myObject["Störung"],...
chartDef3.bars = objectreminder;
//end Problem		


	// variable y-Achsen Labels
	var multi = roundchartmax / 10;
	var ylabels = new Array();
	ylabels.push(0);
	for (var zz = 1; zz <= 10; zz++) {
		ylabels.push(multi * zz);
	}
	 
	chartDef3.yAxis = {};
	chartDef3.yAxis.labels = ylabels;
	///////////////////////////////////////////////
	
	// X-Achsen Labels
	var xlabels = new Array("01","02","03","04","05","06","07","08","09","10","11","12");

	chartDef3.xAxis = {};
	chartDef3.xAxis.labels = xlabels;
	/////////////////////////////////////////////
	
	//showing the graph in an htmlaera on my form(dataprovider = vkoartjahr)
	var koartchartImg = plugins.VelocityReport.getChart(CHART.BAR,chartDef3);
	vkoartjahr = '<html><body style="width: 100%; height: 100%; text-align: center; vertical-align: center">'+koartchartImg+'</body></html>';
}

Any idea???
Other general questions for velocity charting:
Subtitel possible? Footertitel possible?
How to show values on top of unstacked bars or on linepoints in linegraphs? (legend and labels are used for other informations)

Best regards
Albert

2

The issue here is not with Velocity but with the way you are pushing Strings in your objectreminder Array instead of the intended object.

This line:

objectreminder.push('myObject["' + vtickettype + '"]');

should really be

objectreminder.push(myObject[vtickettype]);

if you want to do that out of the loop you could do:

foreach(var bar in myObject) {
    objectreminder.push(myObject[bar]);
}

Also make sure your colorcounter doesn’t go over the size of the array:

if (colourcounter > colors.length-1) colorcounter = 0; // an Array is zero based!

For subtitles and footer, there’s no support for that in the charts, but nothing prevents you from adding that to your HTML (vkoartjahr).

For values on top of the bars or on line points in line graphs, you will have to take a look at markers (attached to the bar or line objects or general markers in the main chart object). But I’d recommend you get a better grip of JavaScript first.

3

Hello Patrick

Working!

THANK YOU.

Regards
Albert