Commit 5b6ad095 authored by Ghislain Loas's avatar Ghislain Loas

end of line normalization

parent ab129f17
googlecharts googlecharts
============ ============
Google Charts API for Amber Google Charts API for Amber
Author Author
------ ------
Thomas W Rake Thomas W Rake
Availability Availability
------------ ------------
Fork it at https://github.com/tomrake/googlecharts Fork it at https://github.com/tomrake/googlecharts
How to use How to use
---------- ----------
This project is a subproject of https://github.com/tomrake/amber This project is a subproject of https://github.com/tomrake/amber
If you clone that project you should have this subproject. If you clone that project you should have this subproject.
Version 0.2 Version 0.2
----------- -----------
This API is likely to change in future versions. 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. 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: 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: 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> <div id="my_chart_div" style="width: 900px;height: 500px;">Loading Google Chart..</div>
2) Create a package for your code MyCode 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: 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 MyPieChart>>makeData
"DataTable of example Pie chart slices" "DataTable of example Pie chart slices"
^ self arrayToDataTable: { {'Task'.'Hours per Day'}. ^ self arrayToDataTable: { {'Task'.'Hours per Day'}.
{'Work' . 11}. {'Work' . 11}.
{'Eat'.2}. {'Eat'.2}.
{'Commute'.2}. {'Commute'.2}.
{'Watch TV'.2}. {'Watch TV'.2}.
{'Snooze'.7}} {'Snooze'.7}}
MyPieChart>>makeOptions MyPieChart>>makeOptions
"Return a Dictionary of the options in this case only a title" "Return a Dictionary of the options in this case only a title"
^#{'title' -> 'My Daily Activities'} ^#{'title' -> 'My Daily Activities'}
4) Determine which Google visualization packages are needed in the PieChart case only 'corechart' is needed. 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: 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 MyPieApp class>>neededVisualizationPackages
"This App only needs a corechart package." "This App only needs a corechart package."
^{'corechart'} ^{'corechart'}
6) In MyPieApp create an instance method overiding begin, and use it to create, bind and draw MyPieChart. Besure to call super begin: 6) In MyPieApp create an instance method overiding begin, and use it to create, bind and draw MyPieChart. Besure to call super begin:
begin begin
"Start the executiong of the MyPieChart by connecting each button/graphic pair" "Start the executiong of the MyPieChart by connecting each button/graphic pair"
MyPieChart new chartId:'my_chart_div';drawChart. MyPieChart new chartId:'my_chart_div';drawChart.
^super begin ^super begin
7) Call Amber 7) Call Amber
<script src="../../js/amber.js" type="text/javascript"></script> <script src="../../js/amber.js" type="text/javascript"></script>
<script type="text/javascript"> <script type="text/javascript">
loadAmber({ loadAmber({
files: ['GoogleCharts.js','MyCode.js'], files: ['GoogleCharts.js','MyCode.js'],
prefix: 'examples/googlecharts/js', // path for js files i think prefix: 'examples/googlecharts/js', // path for js files i think
ready: function() { ready: function() {
$(function() { $(function() {
smalltalk.MyPieApp._new(); // Start the smalltalk App smalltalk.MyPieApp._new(); // Start the smalltalk App
}); });
}}); }});
</script> </script>
The purpose of version 0.2 is to show how smalltalk flexibility can drive google charts. The purpose of version 0.2 is to show how smalltalk flexibility can drive google charts.
To Be Done 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. 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. 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. Be prepaired to split the JSAPI.js ("the loading API") for use with other Google products.
Design smalltalk friendly api for generic charts. Design smalltalk friendly api for generic charts.
\ No newline at end of file
...@@ -4,9 +4,9 @@ smalltalk.addMethod( ...@@ -4,9 +4,9 @@ smalltalk.addMethod(
"_begin", "_begin",
smalltalk.method({ smalltalk.method({
selector: "begin", selector: "begin",
fn: function (){ fn: function (){
var self=this; var self=this;
return self; return self;
} }
}), }),
smalltalk.ChartApp); smalltalk.ChartApp);
...@@ -15,13 +15,13 @@ smalltalk.addMethod( ...@@ -15,13 +15,13 @@ smalltalk.addMethod(
"_initialize", "_initialize",
smalltalk.method({ smalltalk.method({
selector: "initialize", selector: "initialize",
fn: function (){ fn: function (){
var self=this; var self=this;
smalltalk.send(smalltalk.send(self,"_class",[]),"_loadGoogleLoader_",[(function(){ smalltalk.send(smalltalk.send(self,"_class",[]),"_loadGoogleLoader_",[(function(){
return smalltalk.send(smalltalk.send(self,"_class",[]),"_loadVisualization_",[(function(){ return smalltalk.send(smalltalk.send(self,"_class",[]),"_loadVisualization_",[(function(){
return smalltalk.send(self,"_begin",[]); return smalltalk.send(self,"_begin",[]);
})]); })]);
})]); })]);
return self} return self}
}), }),
smalltalk.ChartApp); smalltalk.ChartApp);
...@@ -31,10 +31,10 @@ smalltalk.addMethod( ...@@ -31,10 +31,10 @@ smalltalk.addMethod(
"_loadGoogleLoader_", "_loadGoogleLoader_",
smalltalk.method({ smalltalk.method({
selector: "loadGoogleLoader:", selector: "loadGoogleLoader:",
fn: function (callback){ fn: function (callback){
var self=this; var self=this;
$.ajax({url:"https://www.google.com/jsapi",dataType:"script",success:callback});; $.ajax({url:"https://www.google.com/jsapi",dataType:"script",success:callback});;
; ;
return self} return self}
}), }),
smalltalk.ChartApp.klass); smalltalk.ChartApp.klass);
...@@ -43,12 +43,12 @@ smalltalk.addMethod( ...@@ -43,12 +43,12 @@ smalltalk.addMethod(
"_loadVisualization_", "_loadVisualization_",
smalltalk.method({ smalltalk.method({
selector: "loadVisualization:", selector: "loadVisualization:",
fn: function (callback){ fn: function (callback){
var self=this; var self=this;
var packages; var packages;
packages=smalltalk.send(self,"_neededVisualizationPackages",[]); packages=smalltalk.send(self,"_neededVisualizationPackages",[]);
google.load("visualization","1",{"callback" : callback , "packages":packages});; google.load("visualization","1",{"callback" : callback , "packages":packages});;
; ;
return self} return self}
}), }),
smalltalk.ChartApp.klass); smalltalk.ChartApp.klass);
...@@ -57,11 +57,11 @@ smalltalk.addMethod( ...@@ -57,11 +57,11 @@ smalltalk.addMethod(
"_neededVisualizationPackages", "_neededVisualizationPackages",
smalltalk.method({ smalltalk.method({
selector: "neededVisualizationPackages", selector: "neededVisualizationPackages",
fn: function (){ fn: function (){
var self=this; var self=this;
var $1; var $1;
$1=[]; $1=[];
return $1; return $1;
} }
}), }),
smalltalk.ChartApp.klass); smalltalk.ChartApp.klass);
...@@ -87,9 +87,9 @@ smalltalk.addMethod( ...@@ -87,9 +87,9 @@ smalltalk.addMethod(
"_clickBlock", "_clickBlock",
smalltalk.method({ smalltalk.method({
selector: "clickBlock", selector: "clickBlock",
fn: function (){ fn: function (){
var self=this; var self=this;
return self["@clickBlock"]; return self["@clickBlock"];
} }
}), }),
smalltalk.ChartButton); smalltalk.ChartButton);
...@@ -98,9 +98,9 @@ smalltalk.addMethod( ...@@ -98,9 +98,9 @@ smalltalk.addMethod(
"_clickBlock_", "_clickBlock_",
smalltalk.method({ smalltalk.method({
selector: "clickBlock:", selector: "clickBlock:",
fn: function (aBlock){ fn: function (aBlock){
var self=this; var self=this;
self["@clickBlock"]=aBlock; self["@clickBlock"]=aBlock;
return self} return self}
}), }),
smalltalk.ChartButton); smalltalk.ChartButton);
...@@ -109,9 +109,9 @@ smalltalk.addMethod( ...@@ -109,9 +109,9 @@ smalltalk.addMethod(
"_element", "_element",
smalltalk.method({ smalltalk.method({
selector: "element", selector: "element",
fn: function (){ fn: function (){
var self=this; var self=this;
return self["@element"]; return self["@element"];
} }
}), }),
smalltalk.ChartButton); smalltalk.ChartButton);
...@@ -120,9 +120,9 @@ smalltalk.addMethod( ...@@ -120,9 +120,9 @@ smalltalk.addMethod(
"_element_", "_element_",
smalltalk.method({ smalltalk.method({
selector: "element:", selector: "element:",
fn: function (aSymbol){ fn: function (aSymbol){
var self=this; var self=this;
self["@element"]=aSymbol; self["@element"]=aSymbol;
return self} return self}
}), }),
smalltalk.ChartButton); smalltalk.ChartButton);
...@@ -167,12 +167,12 @@ smalltalk.addMethod( ...@@ -167,12 +167,12 @@ smalltalk.addMethod(
"_arrayToDataTable_", "_arrayToDataTable_",
smalltalk.method({ smalltalk.method({
selector: "arrayToDataTable:", selector: "arrayToDataTable:",
fn: function (array){ fn: function (array){
var self=this; var self=this;
var $1; var $1;
$1=google.visualization.arrayToDataTable(array); $1=google.visualization.arrayToDataTable(array);
; ;
return $1; return $1;
} }
}), }),
smalltalk.GoogleChart); smalltalk.GoogleChart);
...@@ -181,9 +181,9 @@ smalltalk.addMethod( ...@@ -181,9 +181,9 @@ smalltalk.addMethod(
"_chartId", "_chartId",
smalltalk.method({ smalltalk.method({
selector: "chartId", selector: "chartId",
fn: function (){ fn: function (){
var self=this; var self=this;
return self["@chartId"]; return self["@chartId"];
} }
}), }),
smalltalk.GoogleChart); smalltalk.GoogleChart);
...@@ -192,9 +192,9 @@ smalltalk.addMethod( ...@@ -192,9 +192,9 @@ smalltalk.addMethod(
"_chartId_", "_chartId_",
smalltalk.method({ smalltalk.method({
selector: "chartId:", selector: "chartId:",
fn: function (aString){ fn: function (aString){
var self=this; var self=this;
self["@chartId"]=aString; self["@chartId"]=aString;
return self} return self}
}), }),
smalltalk.GoogleChart); smalltalk.GoogleChart);
...@@ -203,9 +203,9 @@ smalltalk.addMethod( ...@@ -203,9 +203,9 @@ smalltalk.addMethod(
"_chartType", "_chartType",
smalltalk.method({ smalltalk.method({
selector: "chartType", selector: "chartType",
fn: function (){ fn: function (){
var self=this; var self=this;
return self["@chartType"]; return self["@chartType"];
} }
}), }),
smalltalk.GoogleChart); smalltalk.GoogleChart);
...@@ -214,9 +214,9 @@ smalltalk.addMethod( ...@@ -214,9 +214,9 @@ smalltalk.addMethod(
"_chartType_", "_chartType_",
smalltalk.method({ smalltalk.method({
selector: "chartType:", selector: "chartType:",
fn: function (aString){ fn: function (aString){
var self=this; var self=this;
self["@chartType"]=aString; self["@chartType"]=aString;
return self} return self}
}), }),
smalltalk.GoogleChart); smalltalk.GoogleChart);
......
...@@ -6,9 +6,9 @@ smalltalk.addMethod( ...@@ -6,9 +6,9 @@ smalltalk.addMethod(
smalltalk.method({ smalltalk.method({
selector: "begin", selector: "begin",
category: 'not yet classified', category: 'not yet classified',
fn: function (){ fn: function (){
var self=this; var self=this;
return self; return self;
},