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.

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

<?php
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<sizeof($x_data);$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"
}

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.

• http://blog.webasp.com.au/post/625578806/open-flash-chart-2-as-a-swc-component
• http://blog.webasp.com.au/post/625592942/open-flash-chart-2-as-a-swc-component-source-code

Let me know if you need any help.

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:

1. Candlestick Chart or Stock Chart
2. Line Chart
3. Shape Chart
4. Horizontal Bar Chart
5. Stack Bar Chart (with animation)
6. Scatter Charts
7. Sketch Bar Chart [Updated]

Note: It has extra chart animation and new styles

Bugs fixed:

1. Stack Bar chart

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.

1. pWidth —— Parent Width
2. 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):

• http://forums.openflashchart.com/viewtopic.php?f=5&t=864
• http://forums.openflashchart.com/viewtopic.php?f=5&t=473
• http://forums.openflashchart.com/viewtopic.php?f=5&t=384

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: 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ofc="*" width="100%" height="100%">
   <mx:Script> <![CDATA[
   [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" }';
   ]]></mx:Script>
   <mx:Panel id="chartContainer" title="Flex Chart" width="100%" height="100%">
    <ofc:Chart id="myChart" width="900" height="600" loadingString="Loading..." chartData="{dataJSON}"/>
   </mx:Panel>
</mx:Application>

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.

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:

1. Colorful 3D chart columns
2. Colorful glass bar chart [updated]
3. Colorful cylinder chart columns [updated]
4. Animated bar chart
5. Animated area chart
6. Animated scatter chart

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

1. Horizontal Bar chart

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

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