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

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