Commit c9641ad9 authored by Ghislain Loas's avatar Ghislain Loas

end of file

parent 146ce76c
googlecharts
============
Google Charts API for Amber
Author
------
Thomas W Rake
Availability
------------
Fork it at https://github.com/tomrake/googlecharts
How to use
----------
This project is a subproject of https://github.com/tomrake/amber
If you clone that project you should have this subproject.
Version 0.2
-----------
This API is likely to change in future versions.
A overview of the recipe to create a Pie Chart is have a place in your html dom to place the chart. Create a subclass of ChartApp to control loading of google packages, creation of your charts and bind them to the dom. Ensure your charts have the correct data by subclassing PieChart and add the the makeData and makeOption methods.
Here is the detailed Pie Chart recipe:
1) Create an insertion point div in your html document in my case a my_chart_id div:
<div id="my_chart_div" style="width: 900px;height: 500px;">Loading Google Chart..</div>
2) Create a package for your code MyCode
3) In MyCode package create a subclass of PieChart, as an example MyPieChart, with two instance methods makeData and makeOptions which contain the chart data and options:
MyPieChart>>makeData
"DataTable of example Pie chart slices"
^ self arrayToDataTable: { {'Task'.'Hours per Day'}.
{'Work' . 11}.
{'Eat'.2}.
{'Commute'.2}.
{'Watch TV'.2}.
{'Snooze'.7}}
MyPieChart>>makeOptions
"Return a Dictionary of the options in this case only a title"
^#{'title' -> 'My Daily Activities'}
4) Determine which Google visualization packages are needed in the PieChart case only 'corechart' is needed.
5) In package MyCode create a subclass of ChartApp, as an example MyPieApp. In MyPieApp create a class method neededVisualizationPackages to return an Array for the packages needed for the App:
MyPieApp class>>neededVisualizationPackages
"This App only needs a corechart package."
^{'corechart'}
6) In MyPieApp create an instance method overiding begin, and use it to create, bind and draw MyPieChart. Besure to call super begin:
begin
"Start the executiong of the MyPieChart by connecting each button/graphic pair"
MyPieChart new chartId:'my_chart_div';drawChart.
^super begin
7) Call Amber
<script src="../../js/amber.js" type="text/javascript"></script>
<script type="text/javascript">
loadAmber({
files: ['GoogleCharts.js','MyCode.js'],
prefix: 'examples/googlecharts/js', // path for js files i think
ready: function() {
$(function() {
smalltalk.MyPieApp._new(); // Start the smalltalk App
});
}});
</script>
The purpose of version 0.2 is to show how smalltalk flexibility can drive google charts.
To Be Done
----------
Coordinate information between the Chart API and App API .Each chart has a fixed and known package to be loaded by the JSAPI it would be best if this info was recorded in a fixed place.
Remove the subclasses of GoogleChart in favor of an Abstract Factory.
Be prepaired to split the JSAPI.js ("the loading API") for use with other Google products.
googlecharts
============
Google Charts API for Amber
Author
------
Thomas W Rake
Availability
------------
Fork it at https://github.com/tomrake/googlecharts
How to use
----------
This project is a subproject of https://github.com/tomrake/amber
If you clone that project you should have this subproject.
Version 0.2
-----------
This API is likely to change in future versions.
A overview of the recipe to create a Pie Chart is have a place in your html dom to place the chart. Create a subclass of ChartApp to control loading of google packages, creation of your charts and bind them to the dom. Ensure your charts have the correct data by subclassing PieChart and add the the makeData and makeOption methods.
Here is the detailed Pie Chart recipe:
1) Create an insertion point div in your html document in my case a my_chart_id div:
<div id="my_chart_div" style="width: 900px;height: 500px;">Loading Google Chart..</div>
2) Create a package for your code MyCode
3) In MyCode package create a subclass of PieChart, as an example MyPieChart, with two instance methods makeData and makeOptions which contain the chart data and options:
MyPieChart>>makeData
"DataTable of example Pie chart slices"
^ self arrayToDataTable: { {'Task'.'Hours per Day'}.
{'Work' . 11}.
{'Eat'.2}.
{'Commute'.2}.
{'Watch TV'.2}.
{'Snooze'.7}}
MyPieChart>>makeOptions
"Return a Dictionary of the options in this case only a title"
^#{'title' -> 'My Daily Activities'}
4) Determine which Google visualization packages are needed in the PieChart case only 'corechart' is needed.
5) In package MyCode create a subclass of ChartApp, as an example MyPieApp. In MyPieApp create a class method neededVisualizationPackages to return an Array for the packages needed for the App:
MyPieApp class>>neededVisualizationPackages
"This App only needs a corechart package."
^{'corechart'}
6) In MyPieApp create an instance method overiding begin, and use it to create, bind and draw MyPieChart. Besure to call super begin:
begin
"Start the executiong of the MyPieChart by connecting each button/graphic pair"
MyPieChart new chartId:'my_chart_div';drawChart.
^super begin
7) Call Amber
<script src="../../js/amber.js" type="text/javascript"></script>
<script type="text/javascript">
loadAmber({
files: ['GoogleCharts.js','MyCode.js'],
prefix: 'examples/googlecharts/js', // path for js files i think
ready: function() {
$(function() {
smalltalk.MyPieApp._new(); // Start the smalltalk App
});
}});
</script>
The purpose of version 0.2 is to show how smalltalk flexibility can drive google charts.
To Be Done
----------
Coordinate information between the Chart API and App API .Each chart has a fixed and known package to be loaded by the JSAPI it would be best if this info was recorded in a fixed place.
Remove the subclasses of GoogleChart in favor of an Abstract Factory.
Be prepaired to split the JSAPI.js ("the loading API") for use with other Google products.
Design smalltalk friendly api for generic charts.
\ No newline at end of file
......@@ -4,9 +4,9 @@ smalltalk.addMethod(
"_begin",
smalltalk.method({
selector: "begin",
fn: function (){
var self=this;
return self;
fn: function (){
var self=this;
return self;
}
}),
smalltalk.ChartApp);
......@@ -15,13 +15,13 @@ smalltalk.addMethod(
"_initialize",
smalltalk.method({
selector: "initialize",
fn: function (){
var self=this;
smalltalk.send(smalltalk.send(self,"_class",[]),"_loadGoogleLoader_",[(function(){
return smalltalk.send(smalltalk.send(self,"_class",[]),"_loadVisualization_",[(function(){
return smalltalk.send(self,"_begin",[]);
})]);
})]);
fn: function (){
var self=this;
smalltalk.send(smalltalk.send(self,"_class",[]),"_loadGoogleLoader_",[(function(){
return smalltalk.send(smalltalk.send(self,"_class",[]),"_loadVisualization_",[(function(){
return smalltalk.send(self,"_begin",[]);
})]);
})]);
return self}
}),
smalltalk.ChartApp);
......@@ -31,10 +31,10 @@ smalltalk.addMethod(
"_loadGoogleLoader_",
smalltalk.method({
selector: "loadGoogleLoader:",
fn: function (callback){
var self=this;
$.ajax({url:"https://www.google.com/jsapi",dataType:"script",success:callback});;
;
fn: function (callback){
var self=this;
$.ajax({url:"https://www.google.com/jsapi",dataType:"script",success:callback});;
;
return self}
}),
smalltalk.ChartApp.klass);
......@@ -43,12 +43,12 @@ smalltalk.addMethod(
"_loadVisualization_",
smalltalk.method({
selector: "loadVisualization:",
fn: function (callback){
var self=this;
var packages;
packages=smalltalk.send(self,"_neededVisualizationPackages",[]);
google.load("visualization","1",{"callback" : callback , "packages":packages});;
;
fn: function (callback){
var self=this;
var packages;
packages=smalltalk.send(self,"_neededVisualizationPackages",[]);
google.load("visualization","1",{"callback" : callback , "packages":packages});;
;
return self}
}),
smalltalk.ChartApp.klass);
......@@ -57,11 +57,11 @@ smalltalk.addMethod(
"_neededVisualizationPackages",
smalltalk.method({
selector: "neededVisualizationPackages",
fn: function (){
var self=this;
var $1;
$1=[];
return $1;
fn: function (){
var self=this;
var $1;
$1=[];
return $1;
}
}),
smalltalk.ChartApp.klass);
......@@ -87,9 +87,9 @@ smalltalk.addMethod(
"_clickBlock",
smalltalk.method({
selector: "clickBlock",
fn: function (){
var self=this;
return self["@clickBlock"];
fn: function (){
var self=this;
return self["@clickBlock"];
}
}),
smalltalk.ChartButton);
......@@ -98,9 +98,9 @@ smalltalk.addMethod(
"_clickBlock_",
smalltalk.method({
selector: "clickBlock:",
fn: function (aBlock){
var self=this;
self["@clickBlock"]=aBlock;
fn: function (aBlock){
var self=this;
self["@clickBlock"]=aBlock;
return self}
}),
smalltalk.ChartButton);
......@@ -109,9 +109,9 @@ smalltalk.addMethod(
"_element",
smalltalk.method({
selector: "element",
fn: function (){
var self=this;
return self["@element"];
fn: function (){
var self=this;
return self["@element"];
}
}),
smalltalk.ChartButton);
......@@ -120,9 +120,9 @@ smalltalk.addMethod(
"_element_",
smalltalk.method({
selector: "element:",
fn: function (aSymbol){
var self=this;
self["@element"]=aSymbol;
fn: function (aSymbol){
var self=this;
self["@element"]=aSymbol;
return self}
}),
smalltalk.ChartButton);
......@@ -167,12 +167,12 @@ smalltalk.addMethod(
"_arrayToDataTable_",
smalltalk.method({
selector: "arrayToDataTable:",
fn: function (array){
var self=this;
var $1;
$1=google.visualization.arrayToDataTable(array);
;
return $1;
fn: function (array){
var self=this;
var $1;
$1=google.visualization.arrayToDataTable(array);
;
return $1;
}
}),
smalltalk.GoogleChart);
......@@ -181,9 +181,9 @@ smalltalk.addMethod(
"_chartId",
smalltalk.method({
selector: "chartId",
fn: function (){
var self=this;
return self["@chartId"];
fn: function (){
var self=this;
return self["@chartId"];
}
}),
smalltalk.GoogleChart);
......@@ -192,9 +192,9 @@ smalltalk.addMethod(
"_chartId_",
smalltalk.method({
selector: "chartId:",
fn: function (aString){
var self=this;
self["@chartId"]=aString;
fn: function (aString){
var self=this;
self["@chartId"]=aString;
return self}
}),
smalltalk.GoogleChart);
......@@ -203,9 +203,9 @@ smalltalk.addMethod(
"_chartType",
smalltalk.method({
selector: "chartType",
fn: function (){
var self=this;
return self["@chartType"];
fn: function (){
var self=this;
return self["@chartType"];
}
}),
smalltalk.GoogleChart);
......@@ -214,9 +214,9 @@ smalltalk.addMethod(
"_chartType_",
smalltalk.method({
selector: "chartType:",
fn: function (aString){
var self=this;
self["@chartType"]=aString;
fn: function (aString){
var self=this;
self["@chartType"]=aString;
return self}
}),
smalltalk.GoogleChart);
......
......@@ -6,9 +6,9 @@ smalltalk.addMethod(
smalltalk.method({
selector: "begin",
category: 'not yet classified',
fn: function (){
var self=this;
return self;
fn: function (){
var self=this;
return self;
},
args: [],
source: "begin\x0a\x09\x22Start the executiong of the ChartApp\x22\x0a\x09^self",
......@@ -22,13 +22,13 @@ smalltalk.addMethod(
smalltalk.method({
selector: "initialize",
category: 'not yet classified',
fn: function (){
var self=this;
smalltalk.send(smalltalk.send(self,"_class",[]),"_loadGoogleLoader_",[(function(){
return smalltalk.send(smalltalk.send(self,"_class",[]),"_loadVisualization_",[(function(){
return smalltalk.send(self,"_begin",[]);
})]);
})]);
fn: function (){
var self=this;
smalltalk.send(smalltalk.send(self,"_class",[]),"_loadGoogleLoader_",[(function(){
return smalltalk.send(smalltalk.send(self,"_class",[]),"_loadVisualization_",[(function(){
return smalltalk.send(self,"_begin",[]);
})]);
})]);
return self},
args: [],
source: "initialize\x0a\x09\x22Load my external JS\x22\x0a self class loadGoogleLoader:[self class loadVisualization:[self begin]]\x0a ",
......@@ -43,10 +43,10 @@ smalltalk.addMethod(
smalltalk.method({
selector: "loadGoogleLoader:",
category: 'not yet classified',
fn: function (callback){
var self=this;
$.ajax({url:"https://www.google.com/jsapi",dataType:"script",success:callback});;
;
fn: function (callback){
var self=this;
$.ajax({url:"https://www.google.com/jsapi",dataType:"script",success:callback});;
;
return self},
args: ["callback"],
source: "loadGoogleLoader: callback\x0a\x09\x22Load the Google JSAPI - Use JQuery.ajax() since that is available\x22\x0a\x09<$.ajax({url:\x22https://www.google.com/jsapi\x22,dataType:\x22script\x22,success:callback});>",
......@@ -60,12 +60,12 @@ smalltalk.addMethod(
smalltalk.method({
selector: "l