WebASP

New website launch

Wed, 09 Sep 2009 00:59:00 +0930

WEBASP is excited to announce the launch of the new web site for ChartsBin.com. The site focused on building the most exciting and engaging destination for statisticians, and computer scientists in the world. ChartsBin.com is simple and interactive way of showing historical and current statistical data to chart or graph. Additionally, we will soon be offering the ability to embed ChartsBin.com charts into other web sites and download compiled dataset (CSV, XLS, SQL). If you have feedback or thoughts on how we could improve, please don’t hesitate to contact us. We invite you to visit the new ChartsBin.com.

How to make scatter chart like github punch card

Fri, 31 Jul 2009 03:48:00 +0930

REQUEST: would some like to do a demo of a scatter chart like this: github punch card, email me a link and I’ll add you to the tutorials page :)

All colours taken from http://github.com/why/potion/graphs/punch_card website.
Download scatter chart PHP5 example file by WebASP
Download ofc_charts_scatter lib/OFC/Charts/OFC_Charts_Scatter.php file by WebASP
Download scatter chart JSON data file file by WebASP
Here is sample demo page for show case: Demo of github style punch card graph

You have to add new method in lib/OFC/Charts/OFC_Charts_Scatter.php

function set_default_dot_style( $style ) { $this->{'dot-style'}= $style; }

PHP code for github punch card style

require_once('OFC/OFC_Chart.php'); $chart = new OFC_Chart(); $title = new OFC_Elements_Title( "github punch card" ); $chart->set_title( $title ); $scatter = new OFC_Charts_Scatter( '#333333', 2 ); $scatter->set_default_dot_style(array("type"=>"solid-dot", "dot-size"=> 2,"tip"=>"#size# Commit")); $x_data = "0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23"; $y_data= "0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6"; $size_data = "1,2,0,0,0,0,1,0,2,0,0,0,5,2,6,2,3,2,0,0,1,5,4,1,3,1,0,0,0,0,0,1,1,3,5,4,13,4,3,7,3,0,0,1,3,9,14,5,4,0,0,0,0,1,1,4,2,6,6,10,1,4,11,11,6,0,1,3,4,7,9,13,2,0,0,0,0,0,0,6,7,4,5,6,2,2,3,4,6,1,3,2,2,8,5,7,5,2,2,3,0,0,4,9,2,9,5,6,3,3,4,4,7,4,2,0,3,8,7,9,6,0,2,0,0,0,0,6,3,4,3,4,1,2,5,3,2,0,0,0,2,3,6,5,2,4,0,0,0,0,2,6,8,5,2,1,3,0,1,4,1,1,1,0,1,1,6,3"; $x_data = explode(",",$x_data); $y_data = explode(",",$y_data); $size_data = explode(",",$size_data); for($i=0;$i $value[] = new OFC_Charts_Scatter_Value( $x_data[$i], $y_data[$i],$size_data[$i] ); } $scatter->set_values($value); $chart->add_element( $scatter ); $x = new OFC_Elements_Axis_X(); $x->set_colours("#707070","#EFEFEF"); $x_lable = "12am|1|2|3|4|5|6|7|8|9|10|11|12pm|1|2|3|4|5|6|7|8|9|10|11"; $x_lable = explode("|",$x_lable); $x->set_labels_from_array( $x_lable ); $chart->set_x_axis( $x ); $y = new OFC_Elements_Axis_Y(); $y->set_colours("#707070","#EFEFEF"); $y_label = 'Sat,Fri,Thu,Wed,Tue,Mon,Sun'; $y_label = explode(",",$y_label); $y->set_labels( $y_label ); $y->set_offset(1); $chart->add_y_axis( $y ); $chart->set_bg_colour("#EFEFEF"); echo $chart->toPrettyString(); ?>

Sample JSON data:

{ "elements": [ { "type": "scatter", "colour": "#333333", "dot-style": {"type": "solid-dot", "dot-size": 2,"tip":"#size# Commit"}, "values": [ {"dot-size":1,"x":0,"y":0}, {"dot-size":2,"x":1,"y":0}, {"dot-size":0,"x":2,"y":0}, {"dot-size":0,"x":3,"y":0}, {"dot-size":0,"x":4,"y":0}, {"dot-size":0,"x":5,"y":0}, {"dot-size":1,"x":6,"y":0}, {"dot-size":0,"x":7,"y":0}, {"dot-size":2,"x":8,"y":0}, {"dot-size":0,"x":9,"y":0}, {"dot-size":0,"x":10,"y":0}, {"dot-size":0,"x":11,"y":0}, {"dot-size":5,"x":12,"y":0}, {"dot-size":2,"x":13,"y":0}, {"dot-size":6,"x":14,"y":0}, {"dot-size":2,"x":15,"y":0}, {"dot-size":3,"x":16,"y":0}, {"dot-size":2,"x":17,"y":0}, {"dot-size":0,"x":18,"y":0}, {"dot-size":0,"x":19,"y":0}, {"dot-size":1,"x":20,"y":0}, {"dot-size":5,"x":21,"y":0}, {"dot-size":4,"x":22,"y":0}, {"dot-size":1,"x":23,"y":0}, {"dot-size":3,"x":0,"y":1}, {"dot-size":1,"x":1,"y":1}, {"dot-size":0,"x":2,"y":1}, {"dot-size":0,"x":3,"y":1}, {"dot-size":0,"x":4,"y":1}, {"dot-size":0,"x":5,"y":1}, {"dot-size":0,"x":6,"y":1}, {"dot-size":1,"x":7,"y":1}, {"dot-size":1,"x":8,"y":1}, {"dot-size":3,"x":9,"y":1}, {"dot-size":5,"x":10,"y":1}, {"dot-size":4,"x":11,"y":1}, {"dot-size":13,"x":12,"y":1}, {"dot-size":4,"x":13,"y":1}, {"dot-size":3,"x":14,"y":1}, {"dot-size":7,"x":15,"y":1}, {"dot-size":3,"x":16,"y":1}, {"dot-size":0,"x":17,"y":1}, {"dot-size":0,"x":18,"y":1}, {"dot-size":1,"x":19,"y":1}, {"dot-size":3,"x":20,"y":1}, {"dot-size":9,"x":21,"y":1}, {"dot-size":14,"x":22,"y":1}, {"dot-size":5,"x":23,"y":1}, {"dot-size":4,"x":0,"y":2}, {"dot-size":0,"x":1,"y":2}, {"dot-size":0,"x":2,"y":2}, {"dot-size":0,"x":3,"y":2}, {"dot-size":0,"x":4,"y":2}, {"dot-size":1,"x":5,"y":2}, {"dot-size":1,"x":6,"y":2}, {"dot-size":4,"x":7,"y":2}, {"dot-size":2,"x":8,"y":2}, {"dot-size":6,"x":9,"y":2}, {"dot-size":6,"x":10,"y":2}, {"dot-size":10,"x":11,"y":2}, {"dot-size":1,"x":12,"y":2}, {"dot-size":4,"x":13,"y":2}, {"dot-size":11,"x":14,"y":2}, {"dot-size":11,"x":15,"y":2}, {"dot-size":6,"x":16,"y":2}, {"dot-size":0,"x":17,"y":2}, {"dot-size":1,"x":18,"y":2}, {"dot-size":3,"x":19,"y":2}, {"dot-size":4,"x":20,"y":2}, {"dot-size":7,"x":21,"y":2}, {"dot-size":9,"x":22,"y":2}, {"dot-size":13,"x":23,"y":2}, {"dot-size":2,"x":0,"y":3}, {"dot-size":0,"x":1,"y":3}, {"dot-size":0,"x":2,"y":3}, {"dot-size":0,"x":3,"y":3}, {"dot-size":0,"x":4,"y":3}, {"dot-size":0,"x":5,"y":3}, {"dot-size":0,"x":6,"y":3}, {"dot-size":6,"x":7,"y":3}, {"dot-size":7,"x":8,"y":3}, {"dot-size":4,"x":9,"y":3}, {"dot-size":5,"x":10,"y":3}, {"dot-size":6,"x":11,"y":3}, {"dot-size":2,"x":12,"y":3}, {"dot-size":2,"x":13,"y":3}, {"dot-size":3,"x":14,"y":3}, {"dot-size":4,"x":15,"y":3}, {"dot-size":6,"x":16,"y":3}, {"dot-size":1,"x":17,"y":3}, {"dot-size":3,"x":18,"y":3}, {"dot-size":2,"x":19,"y":3}, {"dot-size":2,"x":20,"y":3}, {"dot-size":8,"x":21,"y":3}, {"dot-size":5,"x":22,"y":3}, {"dot-size":7,"x":23,"y":3}, {"dot-size":5,"x":0,"y":4}, {"dot-size":2,"x":1,"y":4}, {"dot-size":2,"x":2,"y":4}, {"dot-size":3,"x":3,"y":4}, {"dot-size":0,"x":4,"y":4}, {"dot-size":0,"x":5,"y":4}, {"dot-size":4,"x":6,"y":4}, {"dot-size":9,"x":7,"y":4}, {"dot-size":2,"x":8,"y":4}, {"dot-size":9,"x":9,"y":4}, {"dot-size":5,"x":10,"y":4}, {"dot-size":6,"x":11,"y":4}, {"dot-size":3,"x":12,"y":4}, {"dot-size":3,"x":13,"y":4}, {"dot-size":4,"x":14,"y":4}, {"dot-size":4,"x":15,"y":4}, {"dot-size":7,"x":16,"y":4}, {"dot-size":4,"x":17,"y":4}, {"dot-size":2,"x":18,"y":4}, {"dot-size":0,"x":19,"y":4}, {"dot-size":3,"x":20,"y":4}, {"dot-size":8,"x":21,"y":4}, {"dot-size":7,"x":22,"y":4}, {"dot-size":9,"x":23,"y":4}, {"dot-size":6,"x":0,"y":5}, {"dot-size":0,"x":1,"y":5}, {"dot-size":2,"x":2,"y":5}, {"dot-size":0,"x":3,"y":5}, {"dot-size":0,"x":4,"y":5}, {"dot-size":0,"x":5,"y":5}, {"dot-size":0,"x":6,"y":5}, {"dot-size":6,"x":7,"y":5}, {"dot-size":3,"x":8,"y":5}, {"dot-size":4,"x":9,"y":5}, {"dot-size":3,"x":10,"y":5}, {"dot-size":4,"x":11,"y":5}, {"dot-size":1,"x":12,"y":5}, {"dot-size":2,"x":13,"y":5}, {"dot-size":5,"x":14,"y":5}, {"dot-size":3,"x":15,"y":5}, {"dot-size":2,"x":16,"y":5}, {"dot-size":0,"x":17,"y":5}, {"dot-size":0,"x":18,"y":5}, {"dot-size":0,"x":19,"y":5}, {"dot-size":2,"x":20,"y":5}, {"dot-size":3,"x":21,"y":5}, {"dot-size":6,"x":22,"y":5}, {"dot-size":5,"x":23,"y":5}, {"dot-size":2,"x":0,"y":6}, {"dot-size":4,"x":1,"y":6}, {"dot-size":0,"x":2,"y":6}, {"dot-size":0,"x":3,"y":6}, {"dot-size":0,"x":4,"y":6}, {"dot-size":0,"x":5,"y":6}, {"dot-size":2,"x":6,"y":6}, {"dot-size":6,"x":7,"y":6}, {"dot-size":8,"x":8,"y":6}, {"dot-size":5,"x":9,"y":6}, {"dot-size":2,"x":10,"y":6}, {"dot-size":1,"x":11,"y":6}, {"dot-size":3,"x":12,"y":6}, {"dot-size":0,"x":13,"y":6}, {"dot-size":1,"x":14,"y":6}, {"dot-size":4,"x":15,"y":6}, {"dot-size":1,"x":16,"y":6}, {"dot-size":1,"x":17,"y":6}, {"dot-size":1,"x":18,"y":6}, {"dot-size":0,"x":19,"y":6}, {"dot-size":1,"x":20,"y":6}, {"dot-size":1,"x":21,"y":6}, {"dot-size":6,"x":22,"y":6}, {"dot-size":3,"x":23,"y":6} ] } ], "title": { "text": "github punch card" }, "x_axis": { "labels": { "labels": [ "12am","1","2","3","4","5","6","7","8","9","10","11","12pm","1","2","3","4","5","6","7","8","9","10","11" ] }, "colour": "#707070", "grid-colour": "#EFEFEF" }, "y_axis": { "offset": 1, "colour": "#707070", "grid-colour": "#EFEFEF", "labels": [ "Sat", "Fri", "Thu", "Wed", "Tue", "Mon","Sun" ] }, "bg_colour":"#EFEFEF" }

Open Flash Chart 2 (Kvasir) as a Flex SWC component with source code

Fri, 19 Jun 2009 10:01:00 +0930

This SWC flex component based on Open Flash Chart 2 (Kvasir) .

Download component library [OFC2library-k ] by WebASP
Download component source code [OFC2library-k-src] by WebASP.
you can download sample file how to use it [demo.mxml] and working example [demo.html].

Other working example [Open Flash Chart 2 (Kvasir) - Explorer] Any feedback would be welcome.

Bug fixed from previous version:

Stack Bar Chart

Things not working in this component:

Pie Chart Tooltip

How to included SWC files:

In Flex 3.3 SDK – the files are included at flex-install-dir/frameworks/libs directory.

Note: I patched against the latest Open Flash Chart Version 2 Kvasir (16th, June 2009).

You can get more information about changes from previous posts.

Let me know if you need any help.

Open Flash Chart 2 (Kvasir) - Explorer

Wed, 17 Jun 2009 08:09:00 +0930

This chart explorer is developed in flex based on Open Flash Chart 2 (Kvasir). Now you can adjust the width and height separately. Any feedback would be welcome.

[Version 2 Kvasir (16th, June 2009) Demo] by WebASP

List of charts in this chart explorer:

This chart explorer has all charts that previous explorer has. New charts:

Candlestick Chart or Stock Chart
Line Chart
Shape Chart
Horizontal Bar Chart
Stack Bar Chart (with animation)
Scatter Charts
Sketch Bar Chart [Updated]

Note: It has extra chart animation and new styles

Bugs fixed:

Stack Bar chart

Open Flash Chart 2 as a SWC component - source code

Sun, 14 Jun 2009 09:56:00 +0930

Here is the source code for Open Flash Chart 2 as a SWC component.

Download [OFC2library-src] source code by WebASP.

Things i modified from original Open Flash Chart 2 (Jörmungandr-2)

Modified Files:

Loading.as
Tooltip.as
BackGround.as
Keys.as Title.as
YAxisBase
YAxisLeft
YAxisRight
XLegend.as
YLegendBase
YLegendLeft.as
YLegendRight.as
Menu.as

so what i modified, add new two extra parameter to all classes that using “stageWidth” and “stageHeight”(pWidth:Number,pHeight:Number). Open Flash Chart 2 used lot of “stageWidth” and “stageHeight” to draw chart. As it only get size of main drawing area (EG: most times we need chart less than the size of the container and we have other elements around). Above modicifation accept width/height values from the parent container and size itself accordingly.

pWidth —— Parent Width
pHeight —- Parent Height

New Added File :

Chart.as(as it only work as to generate flex component) : From main.as with some changes. I didn’t add any comments in it, most things are understandable.

Links (for more understanding):

Open Flash Chart 2 as a SWC component

Wed, 03 Jun 2009 12:21:00 +0930

After a long fight with Open Flash Chart 2 here is peaceful output of OFC 2 as SWC Flex component. This SWC flex component based on Open Flash Chart 2 (Jörmungandr-2) .

Download [OFC2library ] by WebASP
Download [OFC2library-src] source code by WebASP. [Updated]

Since below code not able to copy past and try, you can download from [demo.mxml] [Updated]

Any feedback would be welcome.

Things not working in this component:

Stack Bar Chart Pie Chart Tooltip

How to included SWC files:

In Flex 3.3 SDK – the files are included at flex-install-dir/frameworks/libs directory.

Sample code:

[Bindable] private var dataJSON:String='{ "elements": [ { "type": "bar","alpha":0.8,"colour":"#663366", "values": [ 9.5, 9, 8.5,8, 7.5, 7, 6.5, 6, 5.5,5, 4.5, 4, 3.5, 3, 2.5, 2, 1.5, 1 ] } ], "title": { "text": "Wed May 20 2009" },"bg_colour":"#fcfcfc" }'; ]]>

Note:

If you change the chartData it will automatically reload the chart.
If you change width and height after chart load you need to call “myChart.load();” to reload the chart to right size.

Open Flash Chart 2 (Jörmungandr) - Explorer

Fri, 29 May 2009 10:10:00 +0930

This chart explorer is developed in flex based on Open Flash Chart 2 (Jörmungandr). Any feedback would be welcome.

[Version 2 Jörmungandr-2 (26th, May 2009) Demo] by WebASP

List of charts in this chart explorer:

This chart explorer has all charts that previous explorer has. Extra charts:

Colorful 3D chart columns
Colorful glass bar chart [updated]
Colorful cylinder chart columns [updated]
Animated bar chart
Animated area chart
Animated scatter chart

Note: It has extra chart animation and new styles Bugs fixed:

Horizontal Bar chart

[Version 2 Jörmungandr-2 (26th, May 2009) Demo] by WebASP

Open Flash Chart 2 - Explorer

Thu, 21 May 2009 02:05:00 +0930

Thanks for the excellent framework for developing flash charting solutions and making it open source. I couldn’t find any quick chart explorer for OFC in Internet, so i created this chart explorer in flex. This chart explorer showcases all the charts present in Open Flash Chart 2 (inspiration from fusion-charts/flex-chart explorer).

Any feedback would be welcome. [Version 2 Ichor (20th March 2009) Demo] by WebASP

List of charts in this chart explorer:

Bar chart
Horizontal Bar chart
Stack Bar chart
Floating Bar chart
3D Bar chart
Sketch Bar chart
Glass Bar chart
Cylinder Bar chart
Line chart
Pie chart
Shape chart
Area chart
Scatter Chart
Radar chart

[Version 2 Ichor (20th March 2009) Demo] by WebASP