Tag Archives: engine

7 best jQuery charts engines

Written by Garry Lachman (Admin). Posted on November 8, 2011. Filed under JavaScript, jQuery. Tagged , , , , , . .

A chart is a graphical representation of data, in which “the data is represented by symbols, such as bars in a bar chart, lines in a line chart, or slices in a pie chart”.[1] A chart can represent tabular numeric data, functions or some kinds of qualitative structures. [wikipedia]

List of jQuery based Charts


jqPlot

Computation and drawing of lines, axes, shadows even the grid itself is handled by pluggable “renderers”. Not only are the plot elements customizable, plugins can expand functionality of the plot too! There are plenty of hooks into the core jqPlot code allowing for custom event handlers, creation of new plot types, adding canvases to the plot, and more!


Highcharts

Highcharts is a charting library written in pure JavaScript, offering intuitive, interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.


GraphUp

GraphUp is a very flexible and lightweight jQuery (v1.4+) plugin to spice up your data tables. It visualizes the values using color, bar charts and bubbles.


Flot

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side.
The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking.
The plugin works with Internet Explorer 6+, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+ with the HTML canvas tag


JS Charts

JS Charts is a JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting (i.e. performed by your web browser). No additional plugins or server modules are required. Just include our scripts, prepare your chart data in XML, JSON or JavaScript Array and your chart is ready!


PlotKit

PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support.


Emprise JavaScript Charts

EJSChart has been fully tested and verified to work properly in the following browsers. This list covers roughly 95% of browser market share


Have Fun ;)
Garry

Share

CodeIgniter – PHP 5 MVC Framework

Written by Garry Lachman (Admin). Posted on February 21, 2011. Filed under PHP + mySQL. Tagged , , , , , , , , , , . .

I really never used frameworks, i always build my system without any frameworks.
but no more… after few days with CodeIgniter i`m in Love…

“CodeIgniter is a powerful PHP framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications. If you’re a developer who lives in the real world of shared hosting accounts and clients with deadlines, and if you’re tired of ponderously large and thoroughly undocumented frameworks”

CodeIgniter

Have a nice day ;)

Garry Lachman

Share

PHP MySQL Shopping Cart Tutorial in PHP

Written by Garry Lachman (Admin). Posted on April 26, 2010. Filed under PHP + mySQL. Tagged , , , , , , , , , , , , . .

Very good & useful tutorial that i found while search the web about
Abstracting of shopping cart….

“Yes, this is a another shopping cart tutorial. I am planning to make this tutorial to cover a more sophisticated shopping cart solution but for now it only explains a basic shopping cart. I will improve it in time so stay tuned.”

Check if out here: http://www.phpwebcommerce.com/

Have fun,
Garry Lachman

UF4W22PSSX9C

Share

Table Engine in ActionScript 3

Written by Garry Lachman (Admin). Posted on January 14, 2010. Filed under ActionScript 3. Tagged , , , , , , , , . .

I write this Table Enigne for easy making of data forms, data view in easy
use like Tables in HTML that can contain any DisplayObject.

TableEngineItem.as:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
package layout.Engines
{
/**
* ...
* @author Garry Lachman
*/

import flash.display.DisplayObject;
import flash.display.Sprite;

public class TableEngineItem extends Sprite
{
private var aParams:Object;
private var aDisplayObject:DisplayObject

public function TableEngineItem(_sprite:DisplayObject, _params:Object=null)
{
this.aDisplayObject = _sprite;
this.addChild(this.aDisplayObject);

if (_params!=null)
this.aParams = _params;
}

public function set Params(_params:Object):void             {   this.aParams = _params;     }
public function get Params():Object                         {   return this.aParams         }
public function get DisplayObjectInstance():DisplayObject   {   return this.aDisplayObject  }

override public function get width():Number{return this.aDisplayObject.width;}
override public function get height():Number{return this.aDisplayObject.height;}
}

}

TableEngine.as:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
package layout.Engines
{
import flash.display.Sprite;
import layout.Engines.TableEngineItem
import flash.text.TextField;

public class TableEngine extends Sprite
{
public static const DIRECTION_LTR:String = "dirLTR";
public static const DIRECTION_RTL:String = "dirRTL";
public static const DIRECTION_CENTER:String = "dirCenter";

private var direction:String;

private var aTable:Array;
private var aContainer:Sprite;

private var contentHeight:Number;
private var contentWidth:Number;

public function TableEngine(_cells:int, _direction:String="dirLTR")
{
this.direction = _direction;
this.aTable = new Array();

for (var i:int=0; i < _cells; i++)
aTable.push(new Array());

this.aContainer = new Sprite();
this.addChild(this.aContainer);
}

/**
* @param _cell
* @param _row
* @param _displayObject
* Adding an Element to the table
*/
public function AddElement(_cell:int, _row:int, _tableItem:TableEngineItem):void
{
if (_tableItem == null)
return;

trace("ADDING ELEMENT to " + _cell + " , " + _row);
if (this.aTable[_cell] == null)
throw new Error("Cell need to be added at the constractor");

this.aTable[_cell][_row] = _tableItem;
}

/**
*   Render the table, first of all check the max X and max Y then
*  Render the Display
*/
public function Render():void
{
/* Calculat the maximum X and maximum Y */
// Max X Per Cell.
var maxX:Array = [];
// Max Y Per Row.
var maxY:Array = [];

var maxTopX:Number = 0;

// Loop the Cell Array.
for each (var i:Array in this.aTable)
{
trace("work on: " + this.aTable.indexOf(i));
// Loop the Row Array.
for each (var ii:TableEngineItem in i)
{
if (ii == null)
continue;

trace("parse: " + ii + ", index: " + i.indexOf(ii));
// Check if maxX element for cell is not null... if its null set 0.
if (maxX[this.aTable.indexOf(i)] == null)
maxX[this.aTable.indexOf(i)] = 0;

// Check if the DisplayObject width of this row is bigger then maxX element
// for this cell... if true then set it to maxX
// * Check if the index is not 0, the first element must be 0.
if (ii.width > maxX[this.aTable.indexOf(i)] && this.aTable.indexOf(i) > 0)
maxX[this.aTable.indexOf(i)] = ii.width;

trace("maxX["+this.aTable.indexOf(i)+"]:" + maxX[this.aTable.indexOf(i)]);

if ((maxX[this.aTable.indexOf(i)] + ii.width) > maxTopX && this.aTable.indexOf(i) == this.aTable.length-1)
{
maxTopX = (maxX[this.aTable.indexOf(i)] + ii.width);
trace("set new maxTopX:" + maxTopX + ", ii.width:" + ii.width   );
}

// Check if maxY element for row is not null... if its null set 0.
if (maxY[i.indexOf(ii)] == null)
maxY[i.indexOf(ii)] = 0;

// Check if the DisplayObject height of this row is bigger then maxY element
// for this row... if true then set it to maxY.
if (ii.height > maxY[i.indexOf(ii)])
maxY[i.indexOf(ii)] = ii.height;
}
}

// Loop all over cells maxX and calc the start X refer to all table
for (var a:int; a < maxX.length; a++)
{
if (maxX[a-1] != null)
maxX[a] = maxX[a] + maxX[a - 1];
}

for (var aa:int; aa < maxY.length; aa++)
if (maxY[aa-1] != null)
maxY[aa] = maxY[aa] + maxY[aa-1];

// setting first element @ 0 position
maxY.unshift(0);

/* Render The Graphics */
for each (var b:Array in this.aTable)
{
trace("work on: " + this.aTable.indexOf(b));
// Loop the Row Array.
for each (var bb:TableEngineItem in b)
{
// adding to DisplayList and setting x and y

this.aContainer.addChild(bb);

if (this.direction == TableEngine.DIRECTION_RTL)
{
if (maxX[this.aTable.indexOf(b)+1] != null)
bb.x = maxX[this.aTable.indexOf(b) + 1] - bb.DisplayObjectInstance.width;
else
bb.x = maxTopX - bb.DisplayObjectInstance.width;
}
else if (this.direction == TableEngine.DIRECTION_CENTER)
{
bb.x = maxX[this.aTable.indexOf(b)]
}
else
{
bb.x = maxX[this.aTable.indexOf(b)]
}
bb.y = maxY[b.indexOf(bb)];
this.contentHeight = bb.y + bb.height;
this.contentWidth = bb.x + bb.width;
}
}
}

override public function get height():Number    {       return this.contentHeight;      }
override public function get width():Number {       return this.contentWidth;       }

/**
*   Delete All elements and clear the data
*/
public function Clear(_cells:int):void
{
for (var i:int=this.aContainer.numChildren-1; i > -1; i--)
{
this.aContainer.removeChildAt(i);
}

this.aTable = new Array();

for (var ii:int=0; ii < _cells; ii++)
aTable.push(new Array());
}

public function GetLength(_cell:int):int
{
return (this.aTable[_cell] as Array).length;
}

public function GetItem(_cell:int, _i:int):TableEngineItem
{
return (this.aTable[_cell] as Array)[_i];
}

public function GetItemsInCell(_cell:int):Array
{
return (this.aTable[_cell] as Array);
}

public function get Container():Sprite
{
return this.aContainer;
}

public function DeleteItemByDS(_ds:*):void
{
for each (var i:Array in this.aTable)
{
// Loop the Row Array.
for each (var ii:TableEngineItem in i)
{
if (ii.DisplayObjectInstance == _ds)
{
this.aContainer.removeChild(ii);
i.splice(i.indexOf(ii),1);
}
}
}
}
}
}

Usage:

1
2
3
4
5
6
7
8
9
10
11
12
var table: TableEngine = new TableEngine(2,TableEngine.DIRECTION_RTL);
addChild(table);

// first row
table.AddElement(0, table.GetLength(0), new TableEngineItem([DisplayObject]));
table.AddElement(1, table.GetLength(1), new TableEngineItem([DisplayObject]));

// secound row
table.AddElement(0, table.GetLength(0), new TableEngineItem([DisplayObject]));
table.AddElement(1, table.GetLength(1), new TableEngineItem([DisplayObject]));

table.Render();
Share

Example of useing Custom Screen Manager in ActionScript 3

Written by Garry Lachman (Admin). Posted on September 17, 2009. Filed under ActionScript 3. Tagged , , , , , , , , , , . .

Screen Manager.
When i write window based systems i always use a Screen Manager.
when i can control and manage and display object on my screen.

Every display object need to extends ScreenContent class, then
he can attached to the screen manager.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
package {
import flash.display.Sprite;
// screen content Abstract

public class ScreenContentAbstract extends Sprite {

private var _contentContainer:Sprite;
public function ScreenContentAbstract():void
{

}

public function hideContent():void  {
// hide content
}

public function showContent():void  {
// show content
}

public function set content(_s:Sprite):void {   _contentContainer = s;      }
public function get content():Sprite        {   return _contentContainer;   }

}
}

Screen Manager class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;

public class ScreenManager extends Event
{
private var _contentContainer:Sprite;

public function ScreenManager(_f:Enforcer) {
_contentContainer = new Sprite();
}

// Add content to display
public function addContent(_content:ScreenContentAbstract):void {
_contentContainer.addChild(_content);
_content.addEventListener(MouseEvent.MOUSE_DOWN, contentMouseHandler);
}

// Remove content from display
public function removeContent(_content:ScreenContentAbstract):void  {
if (_contentContainer.contains(_content))
_contentContainer.removeChild(_content);
}

// Hide all content on display
public function hideAllContent():void   {
for (var i:int = 0; i < _contentContainer.numChildren; i++) {
if (_contentContainer.getChildAt(i) is ScreenContentAbstract) {
(_contentContainer.getChildAt(i) as ScreenContentAbstract).hideContent();
}
}
}

// Show all content on display
public function hideAllContent():void   {
for (var i:int = 0; i < _contentContainer.numChildren; i++) {
if (_contentContainer.getChildAt(i) is ScreenContentAbstract) {
(_contentContainer.getChildAt(i) as ScreenContentAbstract).showContent();
}
}
}

// Set focus on object on the display
public function setFocus(_content:ScreenContentAbstract):void   {
_contentContainer.setChildIndex(_content, _contentContainer.numChildren - 1);
}

// mouse handler for content
private function _contentMouseHandler(_e:MouseEvent):void   {
switch(_e.type) {
case MouseEvent.MOUSE_DOWN:
setFocus(_e.target as ScreenContentAbstract);
break;
}
}

// SINGLETON PATTERN
private static var instance:ScreenManager;
public static function getInstance():ScreenManager  {
if (instance == null)
instance = new ScreenManager(new Enforcer());
return instance;
}

}

}
class Enforcer{public function Enforcer()}

As you can see, you can add more functionality this is example only.

Thanks,
Garry Lachman

Share