Submodule googlecharts changes
This commit is contained in:
Thomas Rake
parent
a0b11826a2
commit
e9b2f71c7c
|
|
@ -1 +0,0 @@
|
|||
Subproject commit 3daf1401aaf9630e978a5cef3038c4fd7b880141
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
# Ignore emacs backup files
|
||||
*~
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
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.
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Google Charts</title>
|
||||
<script src="../../js/amber.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
loadAmber({
|
||||
files: ['GoogleCharts.js','GoogleChartsExamples'],
|
||||
prefix: 'examples/googlecharts/js', // path for js files i think
|
||||
ready: function() {
|
||||
$(function() {
|
||||
smalltalk.IndexChartApp._new(); // Start the smalltalk App
|
||||
});
|
||||
}});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Google Charts</h1>
|
||||
<button onclick="smalltalk.Browser._open()">class browser</button>
|
||||
<div id="pie_chart_div" style="width: 900px;height: 500px;">Loading Google Chart..</div>
|
||||
|
||||
|
||||
<a href="popcharts.html">Try the Pop Charts!</a> example.
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,392 @@
|
|||
smalltalk.addPackage('GoogleCharts', {});
|
||||
smalltalk.addClass('ChartApp', smalltalk.Object, [], 'GoogleCharts');
|
||||
smalltalk.addMethod(
|
||||
"_begin",
|
||||
smalltalk.method({
|
||||
selector: "begin",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
return self;
|
||||
}
|
||||
}),
|
||||
smalltalk.ChartApp);
|
||||
|
||||
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",[]);
|
||||
})]);
|
||||
})]);
|
||||
return self}
|
||||
}),
|
||||
smalltalk.ChartApp);
|
||||
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_loadGoogleLoader_",
|
||||
smalltalk.method({
|
||||
selector: "loadGoogleLoader:",
|
||||
fn: function (callback){
|
||||
var self=this;
|
||||
$.ajax({url:"https://www.google.com/jsapi",dataType:"script",success:callback});;
|
||||
;
|
||||
return self}
|
||||
}),
|
||||
smalltalk.ChartApp.klass);
|
||||
|
||||
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});;
|
||||
;
|
||||
return self}
|
||||
}),
|
||||
smalltalk.ChartApp.klass);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_neededVisualizationPackages",
|
||||
smalltalk.method({
|
||||
selector: "neededVisualizationPackages",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=[];
|
||||
return $1;
|
||||
}
|
||||
}),
|
||||
smalltalk.ChartApp.klass);
|
||||
|
||||
|
||||
smalltalk.addClass('ChartButton', smalltalk.Object, ['element', 'clickBlock'], 'GoogleCharts');
|
||||
smalltalk.addMethod(
|
||||
"_activate",
|
||||
smalltalk.method({
|
||||
selector: "activate",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var button;
|
||||
button=smalltalk.send(smalltalk.send(self,"_element",[]),"_asJQuery",[]);
|
||||
smalltalk.send(button,"_click_",[(function(){
|
||||
return smalltalk.send(smalltalk.send(self,"_clickBlock",[]),"_value",[]);
|
||||
})]);
|
||||
return self}
|
||||
}),
|
||||
smalltalk.ChartButton);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_clickBlock",
|
||||
smalltalk.method({
|
||||
selector: "clickBlock",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
return self["@clickBlock"];
|
||||
}
|
||||
}),
|
||||
smalltalk.ChartButton);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_clickBlock_",
|
||||
smalltalk.method({
|
||||
selector: "clickBlock:",
|
||||
fn: function (aBlock){
|
||||
var self=this;
|
||||
self["@clickBlock"]=aBlock;
|
||||
return self}
|
||||
}),
|
||||
smalltalk.ChartButton);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_element",
|
||||
smalltalk.method({
|
||||
selector: "element",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
return self["@element"];
|
||||
}
|
||||
}),
|
||||
smalltalk.ChartButton);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_element_",
|
||||
smalltalk.method({
|
||||
selector: "element:",
|
||||
fn: function (aSymbol){
|
||||
var self=this;
|
||||
self["@element"]=aSymbol;
|
||||
return self}
|
||||
}),
|
||||
smalltalk.ChartButton);
|
||||
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_element_clickBlock_",
|
||||
smalltalk.method({
|
||||
selector: "element:clickBlock:",
|
||||
fn: function (elementSymbol,clickBlock){
|
||||
var self=this;
|
||||
var $2,$3,$1;
|
||||
$2=smalltalk.send(self,"_new",[]);
|
||||
smalltalk.send($2,"_element_",[elementSymbol]);
|
||||
smalltalk.send($2,"_clickBlock_",[clickBlock]);
|
||||
smalltalk.send($2,"_activate",[]);
|
||||
$3=smalltalk.send($2,"_yourself",[]);
|
||||
$1=$3;
|
||||
return $1;
|
||||
}
|
||||
}),
|
||||
smalltalk.ChartButton.klass);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_popUpChart_atDom_",
|
||||
smalltalk.method({
|
||||
selector: "popUpChart:atDom:",
|
||||
fn: function (chart,element){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=smalltalk.send(self,"_element_clickBlock_",[element,(function(){
|
||||
return smalltalk.send(chart,"_drawChart",[]);
|
||||
})]);
|
||||
return $1;
|
||||
}
|
||||
}),
|
||||
smalltalk.ChartButton.klass);
|
||||
|
||||
|
||||
smalltalk.addClass('GoogleChart', smalltalk.Object, ['chartId', 'chartType'], 'GoogleCharts');
|
||||
smalltalk.addMethod(
|
||||
"_arrayToDataTable_",
|
||||
smalltalk.method({
|
||||
selector: "arrayToDataTable:",
|
||||
fn: function (array){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=google.visualization.arrayToDataTable(array);
|
||||
;
|
||||
return $1;
|
||||
}
|
||||
}),
|
||||
smalltalk.GoogleChart);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_chartId",
|
||||
smalltalk.method({
|
||||
selector: "chartId",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
return self["@chartId"];
|
||||
}
|
||||
}),
|
||||
smalltalk.GoogleChart);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_chartId_",
|
||||
smalltalk.method({
|
||||
selector: "chartId:",
|
||||
fn: function (aString){
|
||||
var self=this;
|
||||
self["@chartId"]=aString;
|
||||
return self}
|
||||
}),
|
||||
smalltalk.GoogleChart);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_chartType",
|
||||
smalltalk.method({
|
||||
selector: "chartType",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
return self["@chartType"];
|
||||
}
|
||||
}),
|
||||
smalltalk.GoogleChart);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_chartType_",
|
||||
smalltalk.method({
|
||||
selector: "chartType:",
|
||||
fn: function (aString){
|
||||
var self=this;
|
||||
self["@chartType"]=aString;
|
||||
return self}
|
||||
}),
|
||||
smalltalk.GoogleChart);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_drawChart",
|
||||
smalltalk.method({
|
||||
selector: "drawChart",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var chart;
|
||||
var data;
|
||||
var options;
|
||||
data=smalltalk.send(self,"_makeData",[]);
|
||||
chart=smalltalk.send(self,"_makeChart_",[smalltalk.send(self,"_chartId",[])]);
|
||||
options=smalltalk.send(self,"_makeOptions",[]);
|
||||
chart.draw(data,options);
|
||||
;
|
||||
return self}
|
||||
}),
|
||||
smalltalk.GoogleChart);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_getElementById_",
|
||||
smalltalk.method({
|
||||
selector: "getElementById:",
|
||||
fn: function (id){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=document.getElementById(id);
|
||||
;
|
||||
return $1;
|
||||
}
|
||||
}),
|
||||
smalltalk.GoogleChart);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_initialize",
|
||||
smalltalk.method({
|
||||
selector: "initialize",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
return self;
|
||||
}
|
||||
}),
|
||||
smalltalk.GoogleChart);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_makeChart_",
|
||||
smalltalk.method({
|
||||
selector: "makeChart:",
|
||||
fn: function (id){
|
||||
var self=this;
|
||||
var $1;
|
||||
var e;
|
||||
var t;
|
||||
e=smalltalk.send(self,"_getElementById_",[id]);
|
||||
t=smalltalk.send(self,"_chartType",[]);
|
||||
$1=new google.visualization[t](e);
|
||||
;
|
||||
return $1;
|
||||
}
|
||||
}),
|
||||
smalltalk.GoogleChart);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_makeData",
|
||||
smalltalk.method({
|
||||
selector: "makeData",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=smalltalk.send(self,"_subclassresponsibility",[]);
|
||||
return $1;
|
||||
}
|
||||
}),
|
||||
smalltalk.GoogleChart);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_makeOptions",
|
||||
smalltalk.method({
|
||||
selector: "makeOptions",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=smalltalk.send(self,"_subclassresponsibility",[]);
|
||||
return $1;
|
||||
}
|
||||
}),
|
||||
smalltalk.GoogleChart);
|
||||
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_chartId_",
|
||||
smalltalk.method({
|
||||
selector: "chartId:",
|
||||
fn: function (aString){
|
||||
var self=this;
|
||||
var $2,$3,$1;
|
||||
$2=smalltalk.send(self,"_new",[]);
|
||||
smalltalk.send($2,"_chartId_",[aString]);
|
||||
$3=smalltalk.send($2,"_yourself",[]);
|
||||
$1=$3;
|
||||
return $1;
|
||||
}
|
||||
}),
|
||||
smalltalk.GoogleChart.klass);
|
||||
|
||||
|
||||
smalltalk.addClass('GaugeChart', smalltalk.GoogleChart, [], 'GoogleCharts');
|
||||
smalltalk.addMethod(
|
||||
"_initialize",
|
||||
smalltalk.method({
|
||||
selector: "initialize",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
smalltalk.send(self,"_initialize",[],smalltalk.GoogleChart);
|
||||
smalltalk.send(self,"_chartType_",["Gauge"]);
|
||||
return self;
|
||||
}
|
||||
}),
|
||||
smalltalk.GaugeChart);
|
||||
|
||||
|
||||
|
||||
smalltalk.addClass('GeoChart', smalltalk.GoogleChart, [], 'GoogleCharts');
|
||||
smalltalk.addMethod(
|
||||
"_initialize",
|
||||
smalltalk.method({
|
||||
selector: "initialize",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
smalltalk.send(self,"_initialize",[],smalltalk.GoogleChart);
|
||||
smalltalk.send(self,"_chartType_",["GeoChart"]);
|
||||
return self;
|
||||
}
|
||||
}),
|
||||
smalltalk.GeoChart);
|
||||
|
||||
|
||||
|
||||
smalltalk.addClass('PieChart', smalltalk.GoogleChart, [], 'GoogleCharts');
|
||||
smalltalk.addMethod(
|
||||
"_initialize",
|
||||
smalltalk.method({
|
||||
selector: "initialize",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
smalltalk.send(self,"_initialize",[],smalltalk.GoogleChart);
|
||||
smalltalk.send(self,"_chartType_",["PieChart"]);
|
||||
return self;
|
||||
}
|
||||
}),
|
||||
smalltalk.PieChart);
|
||||
|
||||
|
||||
|
||||
smalltalk.addClass('ScatterChart', smalltalk.GoogleChart, [], 'GoogleCharts');
|
||||
smalltalk.addMethod(
|
||||
"_initialize",
|
||||
smalltalk.method({
|
||||
selector: "initialize",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
smalltalk.send(self,"_initialize",[],smalltalk.GoogleChart);
|
||||
smalltalk.send(self,"_chartType_",["ScatterChart"]);
|
||||
return self;
|
||||
}
|
||||
}),
|
||||
smalltalk.ScatterChart);
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,533 @@
|
|||
smalltalk.addPackage('GoogleCharts', {});
|
||||
smalltalk.addClass('ChartApp', smalltalk.Object, [], 'GoogleCharts');
|
||||
smalltalk.ChartApp.comment="A chart app is an example App which loads the google JSAPI and visualization API."
|
||||
smalltalk.addMethod(
|
||||
"_begin",
|
||||
smalltalk.method({
|
||||
selector: "begin",
|
||||
category: 'not yet classified',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
return self;
|
||||
},
|
||||
args: [],
|
||||
source: "begin\x0a\x09\x22Start the executiong of the ChartApp\x22\x0a\x09^self",
|
||||
messageSends: [],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.ChartApp);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_initialize",
|
||||
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",[]);
|
||||
})]);
|
||||
})]);
|
||||
return self},
|
||||
args: [],
|
||||
source: "initialize\x0a\x09\x22Load my external JS\x22\x0a self class loadGoogleLoader:[self class loadVisualization:[self begin]]\x0a ",
|
||||
messageSends: ["loadGoogleLoader:", "loadVisualization:", "begin", "class"],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.ChartApp);
|
||||
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_loadGoogleLoader_",
|
||||
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});;
|
||||
;
|
||||
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});>",
|
||||
messageSends: [],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.ChartApp.klass);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_loadVisualization_",
|
||||
smalltalk.method({
|
||||
selector: "loadVisualization:",
|
||||
category: 'not yet classified',
|
||||
fn: function (callback){
|
||||
var self=this;
|
||||
var packages;
|
||||
packages=smalltalk.send(self,"_neededVisualizationPackages",[]);
|
||||
google.load("visualization","1",{"callback" : callback , "packages":packages});;
|
||||
;
|
||||
return self},
|
||||
args: ["callback"],
|
||||
source: "loadVisualization: callback\x0a\x09\x22Use google.load() to load visualization and load the needed packages\x22\x0a |packages|\x0a packages := self neededVisualizationPackages.\x0a <google.load(\x22visualization\x22,\x221\x22,{\x22callback\x22 : callback , \x22packages\x22:packages});>",
|
||||
messageSends: ["neededVisualizationPackages"],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.ChartApp.klass);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_neededVisualizationPackages",
|
||||
smalltalk.method({
|
||||
selector: "neededVisualizationPackages",
|
||||
category: 'not yet classified',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=[];
|
||||
return $1;
|
||||
},
|
||||
args: [],
|
||||
source: "neededVisualizationPackages\x0a\x22This is a hook for subclasses to define which visualization packages to load.\x22\x0a\x09^{}",
|
||||
messageSends: [],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.ChartApp.klass);
|
||||
|
||||
|
||||
smalltalk.addClass('ChartButton', smalltalk.Object, ['element', 'clickBlock'], 'GoogleCharts');
|
||||
smalltalk.addMethod(
|
||||
"_activate",
|
||||
smalltalk.method({
|
||||
selector: "activate",
|
||||
category: 'not yet classified',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var button;
|
||||
button=smalltalk.send(smalltalk.send(self,"_element",[]),"_asJQuery",[]);
|
||||
smalltalk.send(button,"_click_",[(function(){
|
||||
return smalltalk.send(smalltalk.send(self,"_clickBlock",[]),"_value",[]);
|
||||
})]);
|
||||
return self},
|
||||
args: [],
|
||||
source: "activate\x0a\x09|button|\x0a\x09button := self element asJQuery.\x0a button click:[self clickBlock value]",
|
||||
messageSends: ["asJQuery", "element", "click:", "value", "clickBlock"],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.ChartButton);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_clickBlock",
|
||||
smalltalk.method({
|
||||
selector: "clickBlock",
|
||||
category: 'not yet classified',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
return self["@clickBlock"];
|
||||
},
|
||||
args: [],
|
||||
source: "clickBlock\x0a\x09^clickBlock",
|
||||
messageSends: [],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.ChartButton);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_clickBlock_",
|
||||
smalltalk.method({
|
||||
selector: "clickBlock:",
|
||||
category: 'not yet classified',
|
||||
fn: function (aBlock){
|
||||
var self=this;
|
||||
self["@clickBlock"]=aBlock;
|
||||
return self},
|
||||
args: ["aBlock"],
|
||||
source: "clickBlock: aBlock\x0a\x09clickBlock := aBlock",
|
||||
messageSends: [],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.ChartButton);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_element",
|
||||
smalltalk.method({
|
||||
selector: "element",
|
||||
category: 'not yet classified',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
return self["@element"];
|
||||
},
|
||||
args: [],
|
||||
source: "element\x0a\x09^element",
|
||||
messageSends: [],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.ChartButton);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_element_",
|
||||
smalltalk.method({
|
||||
selector: "element:",
|
||||
category: 'not yet classified',
|
||||
fn: function (aSymbol){
|
||||
var self=this;
|
||||
self["@element"]=aSymbol;
|
||||
return self},
|
||||
args: ["aSymbol"],
|
||||
source: "element: aSymbol\x0a\x09element := aSymbol",
|
||||
messageSends: [],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.ChartButton);
|
||||
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_element_clickBlock_",
|
||||
smalltalk.method({
|
||||
selector: "element:clickBlock:",
|
||||
category: 'not yet classified',
|
||||
fn: function (elementSymbol,clickBlock){
|
||||
var self=this;
|
||||
var $2,$3,$1;
|
||||
$2=smalltalk.send(self,"_new",[]);
|
||||
smalltalk.send($2,"_element_",[elementSymbol]);
|
||||
smalltalk.send($2,"_clickBlock_",[clickBlock]);
|
||||
smalltalk.send($2,"_activate",[]);
|
||||
$3=smalltalk.send($2,"_yourself",[]);
|
||||
$1=$3;
|
||||
return $1;
|
||||
},
|
||||
args: ["elementSymbol", "clickBlock"],
|
||||
source: "element: elementSymbol clickBlock: clickBlock\x0a\x09^self new element: elementSymbol; clickBlock: clickBlock; activate;yourself",
|
||||
messageSends: ["element:", "new", "clickBlock:", "activate", "yourself"],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.ChartButton.klass);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_popUpChart_atDom_",
|
||||
smalltalk.method({
|
||||
selector: "popUpChart:atDom:",
|
||||
category: 'not yet classified',
|
||||
fn: function (chart,element){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=smalltalk.send(self,"_element_clickBlock_",[element,(function(){
|
||||
return smalltalk.send(chart,"_drawChart",[]);
|
||||
})]);
|
||||
return $1;
|
||||
},
|
||||
args: ["chart", "element"],
|
||||
source: "popUpChart: chart atDom: element\x0a\x09\x22Make the chart popup on click of an element\x22\x0a ^self element: element clickBlock:[chart drawChart]\x0a\x09",
|
||||
messageSends: ["element:clickBlock:", "drawChart"],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.ChartButton.klass);
|
||||
|
||||
|
||||
smalltalk.addClass('GoogleChart', smalltalk.Object, ['chartId', 'chartType'], 'GoogleCharts');
|
||||
smalltalk.addMethod(
|
||||
"_arrayToDataTable_",
|
||||
smalltalk.method({
|
||||
selector: "arrayToDataTable:",
|
||||
category: 'data table',
|
||||
fn: function (array){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=google.visualization.arrayToDataTable(array);
|
||||
;
|
||||
return $1;
|
||||
},
|
||||
args: ["array"],
|
||||
source: "arrayToDataTable: array\x0a\x0a\x09^ <google.visualization.arrayToDataTable(array)>",
|
||||
messageSends: [],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.GoogleChart);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_chartId",
|
||||
smalltalk.method({
|
||||
selector: "chartId",
|
||||
category: 'accessor',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
return self["@chartId"];
|
||||
},
|
||||
args: [],
|
||||
source: "chartId\x0a\x09^chartId",
|
||||
messageSends: [],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.GoogleChart);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_chartId_",
|
||||
smalltalk.method({
|
||||
selector: "chartId:",
|
||||
category: 'accessor',
|
||||
fn: function (aString){
|
||||
var self=this;
|
||||
self["@chartId"]=aString;
|
||||
return self},
|
||||
args: ["aString"],
|
||||
source: "chartId: aString\x0a\x09chartId := aString",
|
||||
messageSends: [],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.GoogleChart);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_chartType",
|
||||
smalltalk.method({
|
||||
selector: "chartType",
|
||||
category: 'accessor',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
return self["@chartType"];
|
||||
},
|
||||
args: [],
|
||||
source: "chartType\x0a\x09^ chartType",
|
||||
messageSends: [],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.GoogleChart);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_chartType_",
|
||||
smalltalk.method({
|
||||
selector: "chartType:",
|
||||
category: 'accessor',
|
||||
fn: function (aString){
|
||||
var self=this;
|
||||
self["@chartType"]=aString;
|
||||
return self},
|
||||
args: ["aString"],
|
||||
source: "chartType: aString\x0a\x09chartType := aString",
|
||||
messageSends: [],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.GoogleChart);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_drawChart",
|
||||
smalltalk.method({
|
||||
selector: "drawChart",
|
||||
category: 'chart',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var chart;
|
||||
var data;
|
||||
var options;
|
||||
data=smalltalk.send(self,"_makeData",[]);
|
||||
chart=smalltalk.send(self,"_makeChart_",[smalltalk.send(self,"_chartId",[])]);
|
||||
options=smalltalk.send(self,"_makeOptions",[]);
|
||||
chart.draw(data,options);
|
||||
;
|
||||
return self},
|
||||
args: [],
|
||||
source: "drawChart\x0a | chart data options|\x0a data := self makeData.\x0a chart :=self makeChart:self chartId.\x0a options :=self makeOptions.\x0a <chart.draw(data,options)>\x0a",
|
||||
messageSends: ["makeData", "makeChart:", "chartId", "makeOptions"],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.GoogleChart);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_getElementById_",
|
||||
smalltalk.method({
|
||||
selector: "getElementById:",
|
||||
category: 'DOM',
|
||||
fn: function (id){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=document.getElementById(id);
|
||||
;
|
||||
return $1;
|
||||
},
|
||||
args: ["id"],
|
||||
source: "getElementById: id\x0a\x09\x22Find element by the id in the DOM\x22\x0a\x09^ <document.getElementById(id)>",
|
||||
messageSends: [],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.GoogleChart);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_initialize",
|
||||
smalltalk.method({
|
||||
selector: "initialize",
|
||||
category: 'init',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
return self;
|
||||
},
|
||||
args: [],
|
||||
source: "initialize\x0a\x09^self",
|
||||
messageSends: [],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.GoogleChart);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_makeChart_",
|
||||
smalltalk.method({
|
||||
selector: "makeChart:",
|
||||
category: 'chart',
|
||||
fn: function (id){
|
||||
var self=this;
|
||||
var $1;
|
||||
var e;
|
||||
var t;
|
||||
e=smalltalk.send(self,"_getElementById_",[id]);
|
||||
t=smalltalk.send(self,"_chartType",[]);
|
||||
$1=new google.visualization[t](e);
|
||||
;
|
||||
return $1;
|
||||
},
|
||||
args: ["id"],
|
||||
source: "makeChart: id\x0a\x22build a chart at specific element id in the DOM and return\x22\x0a\x09|e t|\x0a e := self getElementById:id.\x0a t := self chartType.\x0a ^ <new google.visualization[t](e)>",
|
||||
messageSends: ["getElementById:", "chartType"],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.GoogleChart);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_makeData",
|
||||
smalltalk.method({
|
||||
selector: "makeData",
|
||||
category: 'abstraction',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=smalltalk.send(self,"_subclassresponsibility",[]);
|
||||
return $1;
|
||||
},
|
||||
args: [],
|
||||
source: "makeData\x0a\x09\x22abstraction - return the data for a google chart\x22\x0a \x09 ^self subclassresponsibility",
|
||||
messageSends: ["subclassresponsibility"],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.GoogleChart);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_makeOptions",
|
||||
smalltalk.method({
|
||||
selector: "makeOptions",
|
||||
category: 'abstraction',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=smalltalk.send(self,"_subclassresponsibility",[]);
|
||||
return $1;
|
||||
},
|
||||
args: [],
|
||||
source: "makeOptions\x0a\x09\x22Abstract method - return options for a Google Chart\x22\x0a ^\x09 self subclassresponsibility",
|
||||
messageSends: ["subclassresponsibility"],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.GoogleChart);
|
||||
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_chartId_",
|
||||
smalltalk.method({
|
||||
selector: "chartId:",
|
||||
category: 'not yet classified',
|
||||
fn: function (aString){
|
||||
var self=this;
|
||||
var $2,$3,$1;
|
||||
$2=smalltalk.send(self,"_new",[]);
|
||||
smalltalk.send($2,"_chartId_",[aString]);
|
||||
$3=smalltalk.send($2,"_yourself",[]);
|
||||
$1=$3;
|
||||
return $1;
|
||||
},
|
||||
args: ["aString"],
|
||||
source: "chartId: aString\x0a\x09^self new chartId:aString;yourself",
|
||||
messageSends: ["chartId:", "new", "yourself"],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.GoogleChart.klass);
|
||||
|
||||
|
||||
smalltalk.addClass('GaugeChart', smalltalk.GoogleChart, [], 'GoogleCharts');
|
||||
smalltalk.addMethod(
|
||||
"_initialize",
|
||||
smalltalk.method({
|
||||
selector: "initialize",
|
||||
category: 'not yet classified',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
smalltalk.send(self,"_initialize",[],smalltalk.GoogleChart);
|
||||
smalltalk.send(self,"_chartType_",["Gauge"]);
|
||||
return self;
|
||||
},
|
||||
args: [],
|
||||
source: "initialize\x0a\x09\x22 Create a Guage with the chartId that identifies the chart graphic placement and the chartType to be created at that id.\x22\x0a super initialize.\x0a self chartType:'Gauge'.\x0a\x09^self",
|
||||
messageSends: ["initialize", "chartType:"],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.GaugeChart);
|
||||
|
||||
|
||||
|
||||
smalltalk.addClass('GeoChart', smalltalk.GoogleChart, [], 'GoogleCharts');
|
||||
smalltalk.addMethod(
|
||||
"_initialize",
|
||||
smalltalk.method({
|
||||
selector: "initialize",
|
||||
category: 'not yet classified',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
smalltalk.send(self,"_initialize",[],smalltalk.GoogleChart);
|
||||
smalltalk.send(self,"_chartType_",["GeoChart"]);
|
||||
return self;
|
||||
},
|
||||
args: [],
|
||||
source: "initialize\x0a\x09\x22 Create a Geo Chart\x22\x0a super initialize.\x0a self chartType:'GeoChart'.\x0a\x09^self",
|
||||
messageSends: ["initialize", "chartType:"],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.GeoChart);
|
||||
|
||||
|
||||
|
||||
smalltalk.addClass('PieChart', smalltalk.GoogleChart, [], 'GoogleCharts');
|
||||
smalltalk.addMethod(
|
||||
"_initialize",
|
||||
smalltalk.method({
|
||||
selector: "initialize",
|
||||
category: 'not yet classified',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
smalltalk.send(self,"_initialize",[],smalltalk.GoogleChart);
|
||||
smalltalk.send(self,"_chartType_",["PieChart"]);
|
||||
return self;
|
||||
},
|
||||
args: [],
|
||||
source: "initialize\x0a\x09super initialize.\x0a self chartType:'PieChart'.\x0a\x09^self",
|
||||
messageSends: ["initialize", "chartType:"],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.PieChart);
|
||||
|
||||
|
||||
|
||||
smalltalk.addClass('ScatterChart', smalltalk.GoogleChart, [], 'GoogleCharts');
|
||||
smalltalk.addMethod(
|
||||
"_initialize",
|
||||
smalltalk.method({
|
||||
selector: "initialize",
|
||||
category: 'not yet classified',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
smalltalk.send(self,"_initialize",[],smalltalk.GoogleChart);
|
||||
smalltalk.send(self,"_chartType_",["ScatterChart"]);
|
||||
return self;
|
||||
},
|
||||
args: [],
|
||||
source: "initialize\x0a\x09super initialize.\x0a self chartType:'ScatterChart'.\x0a\x09^self",
|
||||
messageSends: ["initialize", "chartType:"],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.ScatterChart);
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
smalltalk.addPackage('GoogleChartsExamples', {});
|
||||
smalltalk.addClass('GaugeChartExample', smalltalk.GaugeChart, [], 'GoogleChartsExamples');
|
||||
smalltalk.addMethod(
|
||||
"_makeData",
|
||||
smalltalk.method({
|
||||
selector: "makeData",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=smalltalk.send(self,"_arrayToDataTable_",[[["Label","Value"],["Memory",(80)],["CPU",(55)],["Network",(68)]]]);
|
||||
return $1;
|
||||
}
|
||||
}),
|
||||
smalltalk.GaugeChartExample);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_makeOptions",
|
||||
smalltalk.method({
|
||||
selector: "makeOptions",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1={width:400, heigth:120,
|
||||
redFrom:90,redTo:100,
|
||||
yellowFrom:75,yellowTo:90,
|
||||
minorTicks:5};
|
||||
;
|
||||
return $1;
|
||||
}
|
||||
}),
|
||||
smalltalk.GaugeChartExample);
|
||||
|
||||
|
||||
|
||||
smalltalk.addClass('GeoChartExample', smalltalk.GeoChart, [], 'GoogleChartsExamples');
|
||||
smalltalk.addMethod(
|
||||
"_makeData",
|
||||
smalltalk.method({
|
||||
selector: "makeData",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=smalltalk.send(self,"_arrayToDataTable_",[[["City","Population","Area"],["Rome",(2761477),(1285.31)],["Milan",(1324110),(181.76)],["Naples",(959574),(117.27)],["Turin",(907563),(130.17)],["Palermo",(655875),(158.9)],["Genoa",(607906),(243.6)],["Bologna",(380181),(140.7)],["Florence",(371282),(102.41)],["Fiumicino",(67370),(213.44)],["Anzio",(52192),(43.43)],["Ciampino",(38262),(11)]]]);
|
||||
return $1;
|
||||
}
|
||||
}),
|
||||
smalltalk.GeoChartExample);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_makeOptions",
|
||||
smalltalk.method({
|
||||
selector: "makeOptions",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1={
|
||||
region: 'IT',
|
||||
displayMode: 'markers',
|
||||
colorAxis: {colors: ['green', 'blue']}
|
||||
};
|
||||
;
|
||||
return $1;
|
||||
}
|
||||
}),
|
||||
smalltalk.GeoChartExample);
|
||||
|
||||
|
||||
|
||||
smalltalk.addClass('IndexChartApp', smalltalk.ChartApp, [], 'GoogleChartsExamples');
|
||||
smalltalk.addMethod(
|
||||
"_begin",
|
||||
smalltalk.method({
|
||||
selector: "begin",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1,$2,$3;
|
||||
$1=smalltalk.send((smalltalk.PieChartExample || PieChartExample),"_new",[]);
|
||||
smalltalk.send($1,"_chartId_",["pie_chart_div"]);
|
||||
$2=smalltalk.send($1,"_drawChart",[]);
|
||||
$3=smalltalk.send(self,"_begin",[],smalltalk.ChartApp);
|
||||
return $3;
|
||||
}
|
||||
}),
|
||||
smalltalk.IndexChartApp);
|
||||
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_neededVisualizationPackages",
|
||||
smalltalk.method({
|
||||
selector: "neededVisualizationPackages",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=["corechart"];
|
||||
return $1;
|
||||
}
|
||||
}),
|
||||
smalltalk.IndexChartApp.klass);
|
||||
|
||||
|
||||
smalltalk.addClass('PieChartExample', smalltalk.PieChart, [], 'GoogleChartsExamples');
|
||||
smalltalk.addMethod(
|
||||
"_makeData",
|
||||
smalltalk.method({
|
||||
selector: "makeData",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=smalltalk.send(self,"_arrayToDataTable_",[[["Task","Hours per Day"],["Work",(11)],["Eat",(2)],["Commute",(2)],["Watch TV",(2)],["Snooze",(7)]]]);
|
||||
return $1;
|
||||
}
|
||||
}),
|
||||
smalltalk.PieChartExample);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_makeOptions",
|
||||
smalltalk.method({
|
||||
selector: "makeOptions",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=smalltalk.HashedCollection._fromPairs_([smalltalk.send("title","__minus_gt",["My Daily Activities"])]);
|
||||
return $1;
|
||||
}
|
||||
}),
|
||||
smalltalk.PieChartExample);
|
||||
|
||||
|
||||
|
||||
smalltalk.addClass('PopupChartApp', smalltalk.ChartApp, [], 'GoogleChartsExamples');
|
||||
smalltalk.addMethod(
|
||||
"_begin",
|
||||
smalltalk.method({
|
||||
selector: "begin",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
smalltalk.send((smalltalk.ChartButton || ChartButton),"_popUpChart_atDom_",[smalltalk.send((smalltalk.PieChartExample || PieChartExample),"_chartId_",["pie_chart_div"]),"#popPieChart"]);
|
||||
smalltalk.send((smalltalk.ChartButton || ChartButton),"_popUpChart_atDom_",[smalltalk.send((smalltalk.ScatterChartExample || ScatterChartExample),"_chartId_",["scatter_chart_div"]),"#popScatterChart"]);
|
||||
smalltalk.send((smalltalk.ChartButton || ChartButton),"_popUpChart_atDom_",[smalltalk.send((smalltalk.GaugeChartExample || GaugeChartExample),"_chartId_",["gauge_chart_div"]),"#popGaugeChart"]);
|
||||
smalltalk.send((smalltalk.ChartButton || ChartButton),"_popUpChart_atDom_",[smalltalk.send((smalltalk.GeoChartExample || GeoChartExample),"_chartId_",["geo_markers_chart_div"]),"#popGeoMarkersChart"]);
|
||||
$1=smalltalk.send(self,"_begin",[],smalltalk.ChartApp);
|
||||
return $1;
|
||||
}
|
||||
}),
|
||||
smalltalk.PopupChartApp);
|
||||
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_neededVisualizationPackages",
|
||||
smalltalk.method({
|
||||
selector: "neededVisualizationPackages",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=["corechart","gauge","geochart"];
|
||||
return $1;
|
||||
}
|
||||
}),
|
||||
smalltalk.PopupChartApp.klass);
|
||||
|
||||
|
||||
smalltalk.addClass('ScatterChartExample', smalltalk.ScatterChart, [], 'GoogleChartsExamples');
|
||||
smalltalk.addMethod(
|
||||
"_makeData",
|
||||
smalltalk.method({
|
||||
selector: "makeData",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=smalltalk.send(self,"_arrayToDataTable_",[[["Age","Weight"],[(8),(11)],[(4),(5.5)],[(11),(14)],[(4),(5)],[(3),(3)],[(6.5),(7)]]]);
|
||||
return $1;
|
||||
}
|
||||
}),
|
||||
smalltalk.ScatterChartExample);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_makeOptions",
|
||||
smalltalk.method({
|
||||
selector: "makeOptions",
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1={
|
||||
title: 'Age vs. Weight comparison',
|
||||
hAxis: {title: 'Age', minValue: 0, maxValue: 15},
|
||||
vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
|
||||
legend: 'none'
|
||||
};
|
||||
;
|
||||
return $1;
|
||||
}
|
||||
}),
|
||||
smalltalk.ScatterChartExample);
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,257 @@
|
|||
smalltalk.addPackage('GoogleChartsExamples', {});
|
||||
smalltalk.addClass('GaugeChartExample', smalltalk.GaugeChart, [], 'GoogleChartsExamples');
|
||||
smalltalk.addMethod(
|
||||
"_makeData",
|
||||
smalltalk.method({
|
||||
selector: "makeData",
|
||||
category: 'not yet classified',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=smalltalk.send(self,"_arrayToDataTable_",[[["Label","Value"],["Memory",(80)],["CPU",(55)],["Network",(68)]]]);
|
||||
return $1;
|
||||
},
|
||||
args: [],
|
||||
source: "makeData\x0a\x22Example Gauge Data\x22\x0a ^ self arrayToDataTable: { {'Label'.'Value'}.\x0a \x09\x09\x09\x09\x09{'Memory' . 80}.\x0a {'CPU' . 55}.\x0a {'Network' . 68}}",
|
||||
messageSends: ["arrayToDataTable:"],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.GaugeChartExample);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_makeOptions",
|
||||
smalltalk.method({
|
||||
selector: "makeOptions",
|
||||
category: 'not yet classified',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1={width:400, heigth:120,
|
||||
redFrom:90,redTo:100,
|
||||
yellowFrom:75,yellowTo:90,
|
||||
minorTicks:5};
|
||||
;
|
||||
return $1;
|
||||
},
|
||||
args: [],
|
||||
source: "makeOptions\x0a\x22Example Gauge options\x22\x0a ^<{width:400, heigth:120,\x0a redFrom:90,redTo:100,\x0a yellowFrom:75,yellowTo:90,\x0a minorTicks:5}>",
|
||||
messageSends: [],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.GaugeChartExample);
|
||||
|
||||
|
||||
|
||||
smalltalk.addClass('GeoChartExample', smalltalk.GeoChart, [], 'GoogleChartsExamples');
|
||||
smalltalk.addMethod(
|
||||
"_makeData",
|
||||
smalltalk.method({
|
||||
selector: "makeData",
|
||||
category: 'not yet classified',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=smalltalk.send(self,"_arrayToDataTable_",[[["City","Population","Area"],["Rome",(2761477),(1285.31)],["Milan",(1324110),(181.76)],["Naples",(959574),(117.27)],["Turin",(907563),(130.17)],["Palermo",(655875),(158.9)],["Genoa",(607906),(243.6)],["Bologna",(380181),(140.7)],["Florence",(371282),(102.41)],["Fiumicino",(67370),(213.44)],["Anzio",(52192),(43.43)],["Ciampino",(38262),(11)]]]);
|
||||
return $1;
|
||||
},
|
||||
args: [],
|
||||
source: "makeData\x0a\x22Example Geo Data\x22\x0a ^ self arrayToDataTable: {\x0a{'City'. 'Population' . 'Area'}.\x0a {'Rome'. 2761477 . 1285.31}.\x0a {'Milan'. 1324110 . 181.76}.\x0a {'Naples'. 959574 . 117.27}.\x0a {'Turin'. 907563 . 130.17}.\x0a {'Palermo'. 655875 . 158.9}.\x0a {'Genoa'. 607906 . 243.60}.\x0a {'Bologna'. 380181 . 140.7}.\x0a {'Florence'. 371282 . 102.41}.\x0a {'Fiumicino'. 67370 . 213.44}.\x0a {'Anzio'. 52192 . 43.43}.\x0a {'Ciampino'. 38262 . 11} \x0a }",
|
||||
messageSends: ["arrayToDataTable:"],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.GeoChartExample);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_makeOptions",
|
||||
smalltalk.method({
|
||||
selector: "makeOptions",
|
||||
category: 'not yet classified',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1={
|
||||
region: 'IT',
|
||||
displayMode: 'markers',
|
||||
colorAxis: {colors: ['green', 'blue']}
|
||||
};
|
||||
;
|
||||
return $1;
|
||||
},
|
||||
args: [],
|
||||
source: "makeOptions\x0a\x22Example Geo Options\x22\x0a\x0a ^<{\x0a region: 'IT',\x0a displayMode: 'markers',\x0a colorAxis: {colors: ['green', 'blue']}\x0a }>",
|
||||
messageSends: [],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.GeoChartExample);
|
||||
|
||||
|
||||
|
||||
smalltalk.addClass('IndexChartApp', smalltalk.ChartApp, [], 'GoogleChartsExamples');
|
||||
smalltalk.addMethod(
|
||||
"_begin",
|
||||
smalltalk.method({
|
||||
selector: "begin",
|
||||
category: 'not yet classified',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1,$2,$3;
|
||||
$1=smalltalk.send((smalltalk.PieChartExample || PieChartExample),"_new",[]);
|
||||
smalltalk.send($1,"_chartId_",["pie_chart_div"]);
|
||||
$2=smalltalk.send($1,"_drawChart",[]);
|
||||
$3=smalltalk.send(self,"_begin",[],smalltalk.ChartApp);
|
||||
return $3;
|
||||
},
|
||||
args: [],
|
||||
source: "begin\x0a\x09\x22Start the executiong of the ExampleChartApp by connecting each button/graphic pair\x22\x0a PieChartExample new chartId:'pie_chart_div';drawChart.\x0a ^super begin",
|
||||
messageSends: ["chartId:", "new", "drawChart", "begin"],
|
||||
referencedClasses: ["PieChartExample"]
|
||||
}),
|
||||
smalltalk.IndexChartApp);
|
||||
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_neededVisualizationPackages",
|
||||
smalltalk.method({
|
||||
selector: "neededVisualizationPackages",
|
||||
category: 'not yet classified',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=["corechart"];
|
||||
return $1;
|
||||
},
|
||||
args: [],
|
||||
source: "neededVisualizationPackages\x0a\x22This App only needs a corechart package.\x22\x0a\x09^{'corechart'}",
|
||||
messageSends: [],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.IndexChartApp.klass);
|
||||
|
||||
|
||||
smalltalk.addClass('PieChartExample', smalltalk.PieChart, [], 'GoogleChartsExamples');
|
||||
smalltalk.addMethod(
|
||||
"_makeData",
|
||||
smalltalk.method({
|
||||
selector: "makeData",
|
||||
category: 'not yet classified',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=smalltalk.send(self,"_arrayToDataTable_",[[["Task","Hours per Day"],["Work",(11)],["Eat",(2)],["Commute",(2)],["Watch TV",(2)],["Snooze",(7)]]]);
|
||||
return $1;
|
||||
},
|
||||
args: [],
|
||||
source: "makeData\x0a\x09\x22return a DataTable of example Pie Chart data\x22\x0a\x0a ^ self arrayToDataTable: { {'Task'.'Hours per Day'}.\x0a \x09\x09\x09\x09\x09{'Work' . 11}.\x0a {'Eat'.2}.\x0a {'Commute'.2}.\x0a {'Watch TV'.2}.\x0a {'Snooze'.7}}",
|
||||
messageSends: ["arrayToDataTable:"],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.PieChartExample);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_makeOptions",
|
||||
smalltalk.method({
|
||||
selector: "makeOptions",
|
||||
category: 'not yet classified',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=smalltalk.HashedCollection._fromPairs_([smalltalk.send("title","__minus_gt",["My Daily Activities"])]);
|
||||
return $1;
|
||||
},
|
||||
args: [],
|
||||
source: "makeOptions\x0a\x09\x22Return a Dictionary of the options in this case only a title\x22\x0a\x09^#{'title' -> 'My Daily Activities'}\x0a",
|
||||
messageSends: ["->"],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.PieChartExample);
|
||||
|
||||
|
||||
|
||||
smalltalk.addClass('PopupChartApp', smalltalk.ChartApp, [], 'GoogleChartsExamples');
|
||||
smalltalk.addMethod(
|
||||
"_begin",
|
||||
smalltalk.method({
|
||||
selector: "begin",
|
||||
category: 'not yet classified',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
smalltalk.send((smalltalk.ChartButton || ChartButton),"_popUpChart_atDom_",[smalltalk.send((smalltalk.PieChartExample || PieChartExample),"_chartId_",["pie_chart_div"]),"#popPieChart"]);
|
||||
smalltalk.send((smalltalk.ChartButton || ChartButton),"_popUpChart_atDom_",[smalltalk.send((smalltalk.ScatterChartExample || ScatterChartExample),"_chartId_",["scatter_chart_div"]),"#popScatterChart"]);
|
||||
smalltalk.send((smalltalk.ChartButton || ChartButton),"_popUpChart_atDom_",[smalltalk.send((smalltalk.GaugeChartExample || GaugeChartExample),"_chartId_",["gauge_chart_div"]),"#popGaugeChart"]);
|
||||
smalltalk.send((smalltalk.ChartButton || ChartButton),"_popUpChart_atDom_",[smalltalk.send((smalltalk.GeoChartExample || GeoChartExample),"_chartId_",["geo_markers_chart_div"]),"#popGeoMarkersChart"]);
|
||||
$1=smalltalk.send(self,"_begin",[],smalltalk.ChartApp);
|
||||
return $1;
|
||||
},
|
||||
args: [],
|
||||
source: "begin\x0a\x09\x22Start the executiong of the ExampleChartApp by connecting each button/graphic pair\x22\x0a ChartButton popUpChart:(PieChartExample chartId:'pie_chart_div') atDom:'#popPieChart' .\x0a ChartButton popUpChart:(ScatterChartExample chartId:'scatter_chart_div') atDom:'#popScatterChart'.\x0a ChartButton popUpChart:(GaugeChartExample chartId:'gauge_chart_div') atDom:'#popGaugeChart'.\x0a ChartButton popUpChart:(GeoChartExample chartId:'geo_markers_chart_div') atDom: '#popGeoMarkersChart'.\x0a ^super begin",
|
||||
messageSends: ["popUpChart:atDom:", "chartId:", "begin"],
|
||||
referencedClasses: ["PieChartExample", "ChartButton", "ScatterChartExample", "GaugeChartExample", "GeoChartExample"]
|
||||
}),
|
||||
smalltalk.PopupChartApp);
|
||||
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_neededVisualizationPackages",
|
||||
smalltalk.method({
|
||||
selector: "neededVisualizationPackages",
|
||||
category: 'not yet classified',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=["corechart","gauge","geochart"];
|
||||
return $1;
|
||||
},
|
||||
args: [],
|
||||
source: "neededVisualizationPackages\x0a\x22This is a hook for subclasses to define which visualization packages to load.\x22\x0a\x09^{'corechart'.'gauge'.'geochart'}",
|
||||
messageSends: [],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.PopupChartApp.klass);
|
||||
|
||||
|
||||
smalltalk.addClass('ScatterChartExample', smalltalk.ScatterChart, [], 'GoogleChartsExamples');
|
||||
smalltalk.addMethod(
|
||||
"_makeData",
|
||||
smalltalk.method({
|
||||
selector: "makeData",
|
||||
category: 'not yet classified',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1=smalltalk.send(self,"_arrayToDataTable_",[[["Age","Weight"],[(8),(11)],[(4),(5.5)],[(11),(14)],[(4),(5)],[(3),(3)],[(6.5),(7)]]]);
|
||||
return $1;
|
||||
},
|
||||
args: [],
|
||||
source: "makeData\x0a \x22Return the example dataset\x22\x0a ^ self arrayToDataTable: { \x0a \x09\x09\x09\x09\x09\x09\x09{'Age'.'Weight'}.\x0a {8 . 11} . \x0a { 4 . 5.5} . \x0a { 11 . 14 } . \x0a { 4 . 5}. \x0a {3 . 3} . \x0a {6.5 . 7}}\x0a ",
|
||||
messageSends: ["arrayToDataTable:"],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.ScatterChartExample);
|
||||
|
||||
smalltalk.addMethod(
|
||||
"_makeOptions",
|
||||
smalltalk.method({
|
||||
selector: "makeOptions",
|
||||
category: 'not yet classified',
|
||||
fn: function (){
|
||||
var self=this;
|
||||
var $1;
|
||||
$1={
|
||||
title: 'Age vs. Weight comparison',
|
||||
hAxis: {title: 'Age', minValue: 0, maxValue: 15},
|
||||
vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
|
||||
legend: 'none'
|
||||
};
|
||||
;
|
||||
return $1;
|
||||
},
|
||||
args: [],
|
||||
source: "makeOptions\x0a\x22options for example dataset\x22\x0a ^<{\x0a title: 'Age vs. Weight comparison',\x0a hAxis: {title: 'Age', minValue: 0, maxValue: 15},\x0a vAxis: {title: 'Weight', minValue: 0, maxValue: 15},\x0a legend: 'none'\x0a }>",
|
||||
messageSends: [],
|
||||
referencedClasses: []
|
||||
}),
|
||||
smalltalk.ScatterChartExample);
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<html>
|
||||
<head>
|
||||
<script src="../../js/amber.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
loadAmber({
|
||||
files: ['GoogleCharts.js','GoogleChartsExamples'],
|
||||
prefix: 'examples/googlecharts/js', // path for js files i think
|
||||
ready: function() {
|
||||
$(function() {
|
||||
smalltalk.PopupChartApp._new(); // Start the smalltalk App
|
||||
});
|
||||
}});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>My First Google Chart Project</h1>
|
||||
|
||||
<button onclick="smalltalk.Browser._open()">class browser</button>
|
||||
<button id="popPieChart">pop pie chart</button>
|
||||
<div id="pie_chart_div"></div>
|
||||
<button id="popScatterChart">pop scatter chart</button>
|
||||
<div id="scatter_chart_div"></div>
|
||||
<button id="popGaugeChart">pop gauge chart</button>
|
||||
<div id="gauge_chart_div"></div>
|
||||
<button id="popGeoMarkersChart">pop Geo Markers Chart</button>
|
||||
<div id="geo_markers_chart_div"></div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
Smalltalk current createPackage: 'GoogleCharts' properties: #{}!
|
||||
Object subclass: #ChartApp
|
||||
instanceVariableNames: ''
|
||||
package: 'GoogleCharts'!
|
||||
!ChartApp commentStamp!
|
||||
A chart app is an example App which loads the google JSAPI and visualization API.!
|
||||
|
||||
!ChartApp methodsFor: 'not yet classified'!
|
||||
|
||||
begin
|
||||
"Start the executiong of the ChartApp"
|
||||
^self
|
||||
!
|
||||
|
||||
initialize
|
||||
"Load my external JS"
|
||||
self class loadGoogleLoader:[self class loadVisualization:[self begin]]
|
||||
! !
|
||||
|
||||
!ChartApp class methodsFor: 'not yet classified'!
|
||||
|
||||
loadGoogleLoader: callback
|
||||
"Load the Google JSAPI - Use JQuery.ajax() since that is available"
|
||||
<$.ajax({url:"https://www.google.com/jsapi",dataType:"script",success:callback});>
|
||||
!
|
||||
|
||||
loadVisualization: callback
|
||||
"Use google.load() to load visualization and load the needed packages"
|
||||
|packages|
|
||||
packages := self neededVisualizationPackages.
|
||||
<google.load("visualization","1",{"callback" : callback , "packages":packages});>
|
||||
!
|
||||
|
||||
neededVisualizationPackages
|
||||
"This is a hook for subclasses to define which visualization packages to load."
|
||||
^{}
|
||||
! !
|
||||
|
||||
Object subclass: #ChartButton
|
||||
instanceVariableNames: 'element clickBlock'
|
||||
package: 'GoogleCharts'!
|
||||
|
||||
!ChartButton methodsFor: 'not yet classified'!
|
||||
|
||||
activate
|
||||
|button|
|
||||
button := self element asJQuery.
|
||||
button click:[self clickBlock value]
|
||||
!
|
||||
|
||||
clickBlock
|
||||
^clickBlock
|
||||
!
|
||||
|
||||
clickBlock: aBlock
|
||||
clickBlock := aBlock
|
||||
!
|
||||
|
||||
element
|
||||
^element
|
||||
!
|
||||
|
||||
element: aSymbol
|
||||
element := aSymbol
|
||||
! !
|
||||
|
||||
!ChartButton class methodsFor: 'not yet classified'!
|
||||
|
||||
element: elementSymbol clickBlock: clickBlock
|
||||
^self new element: elementSymbol; clickBlock: clickBlock; activate;yourself
|
||||
!
|
||||
|
||||
popUpChart: chart atDom: element
|
||||
"Make the chart popup on click of an element"
|
||||
^self element: element clickBlock:[chart drawChart]
|
||||
! !
|
||||
|
||||
Object subclass: #GoogleChart
|
||||
instanceVariableNames: 'chartId chartType'
|
||||
package: 'GoogleCharts'!
|
||||
|
||||
!GoogleChart methodsFor: 'DOM'!
|
||||
|
||||
getElementById: id
|
||||
"Find element by the id in the DOM"
|
||||
^ <document.getElementById(id)>
|
||||
! !
|
||||
|
||||
!GoogleChart methodsFor: 'abstraction'!
|
||||
|
||||
makeData
|
||||
"abstraction - return the data for a google chart"
|
||||
^self subclassresponsibility
|
||||
!
|
||||
|
||||
makeOptions
|
||||
"Abstract method - return options for a Google Chart"
|
||||
^ self subclassresponsibility
|
||||
! !
|
||||
|
||||
!GoogleChart methodsFor: 'accessor'!
|
||||
|
||||
chartId
|
||||
^chartId
|
||||
!
|
||||
|
||||
chartId: aString
|
||||
chartId := aString
|
||||
!
|
||||
|
||||
chartType
|
||||
^ chartType
|
||||
!
|
||||
|
||||
chartType: aString
|
||||
chartType := aString
|
||||
! !
|
||||
|
||||
!GoogleChart methodsFor: 'chart'!
|
||||
|
||||
drawChart
|
||||
| chart data options|
|
||||
data := self makeData.
|
||||
chart :=self makeChart:self chartId.
|
||||
options :=self makeOptions.
|
||||
<chart.draw(data,options)>
|
||||
!
|
||||
|
||||
makeChart: id
|
||||
"build a chart at specific element id in the DOM and return"
|
||||
|e t|
|
||||
e := self getElementById:id.
|
||||
t := self chartType.
|
||||
^ <new google.visualization[t](e)>
|
||||
! !
|
||||
|
||||
!GoogleChart methodsFor: 'data table'!
|
||||
|
||||
arrayToDataTable: array
|
||||
|
||||
^ <google.visualization.arrayToDataTable(array)>
|
||||
! !
|
||||
|
||||
!GoogleChart methodsFor: 'init'!
|
||||
|
||||
initialize
|
||||
^self
|
||||
! !
|
||||
|
||||
!GoogleChart class methodsFor: 'not yet classified'!
|
||||
|
||||
chartId: aString
|
||||
^self new chartId:aString;yourself
|
||||
! !
|
||||
|
||||
GoogleChart subclass: #GaugeChart
|
||||
instanceVariableNames: ''
|
||||
package: 'GoogleCharts'!
|
||||
|
||||
!GaugeChart methodsFor: 'not yet classified'!
|
||||
|
||||
initialize
|
||||
" Create a Guage with the chartId that identifies the chart graphic placement and the chartType to be created at that id."
|
||||
super initialize.
|
||||
self chartType:'Gauge'.
|
||||
^self
|
||||
! !
|
||||
|
||||
GoogleChart subclass: #GeoChart
|
||||
instanceVariableNames: ''
|
||||
package: 'GoogleCharts'!
|
||||
|
||||
!GeoChart methodsFor: 'not yet classified'!
|
||||
|
||||
initialize
|
||||
" Create a Geo Chart"
|
||||
super initialize.
|
||||
self chartType:'GeoChart'.
|
||||
^self
|
||||
! !
|
||||
|
||||
GoogleChart subclass: #PieChart
|
||||
instanceVariableNames: ''
|
||||
package: 'GoogleCharts'!
|
||||
|
||||
!PieChart methodsFor: 'not yet classified'!
|
||||
|
||||
initialize
|
||||
super initialize.
|
||||
self chartType:'PieChart'.
|
||||
^self
|
||||
! !
|
||||
|
||||
GoogleChart subclass: #ScatterChart
|
||||
instanceVariableNames: ''
|
||||
package: 'GoogleCharts'!
|
||||
|
||||
!ScatterChart methodsFor: 'not yet classified'!
|
||||
|
||||
initialize
|
||||
super initialize.
|
||||
self chartType:'ScatterChart'.
|
||||
^self
|
||||
! !
|
||||
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
Smalltalk current createPackage: 'GoogleChartsExamples' properties: #{}!
|
||||
GaugeChart subclass: #GaugeChartExample
|
||||
instanceVariableNames: ''
|
||||
package: 'GoogleChartsExamples'!
|
||||
|
||||
!GaugeChartExample methodsFor: 'not yet classified'!
|
||||
|
||||
makeData
|
||||
"Example Gauge Data"
|
||||
^ self arrayToDataTable: { {'Label'.'Value'}.
|
||||
{'Memory' . 80}.
|
||||
{'CPU' . 55}.
|
||||
{'Network' . 68}}
|
||||
!
|
||||
|
||||
makeOptions
|
||||
"Example Gauge options"
|
||||
^<{width:400, heigth:120,
|
||||
redFrom:90,redTo:100,
|
||||
yellowFrom:75,yellowTo:90,
|
||||
minorTicks:5}>
|
||||
! !
|
||||
|
||||
GeoChart subclass: #GeoChartExample
|
||||
instanceVariableNames: ''
|
||||
package: 'GoogleChartsExamples'!
|
||||
|
||||
!GeoChartExample methodsFor: 'not yet classified'!
|
||||
|
||||
makeData
|
||||
"Example Geo Data"
|
||||
^ self arrayToDataTable: {
|
||||
{'City'. 'Population' . 'Area'}.
|
||||
{'Rome'. 2761477 . 1285.31}.
|
||||
{'Milan'. 1324110 . 181.76}.
|
||||
{'Naples'. 959574 . 117.27}.
|
||||
{'Turin'. 907563 . 130.17}.
|
||||
{'Palermo'. 655875 . 158.9}.
|
||||
{'Genoa'. 607906 . 243.60}.
|
||||
{'Bologna'. 380181 . 140.7}.
|
||||
{'Florence'. 371282 . 102.41}.
|
||||
{'Fiumicino'. 67370 . 213.44}.
|
||||
{'Anzio'. 52192 . 43.43}.
|
||||
{'Ciampino'. 38262 . 11}
|
||||
}
|
||||
!
|
||||
|
||||
makeOptions
|
||||
"Example Geo Options"
|
||||
|
||||
^<{
|
||||
region: 'IT',
|
||||
displayMode: 'markers',
|
||||
colorAxis: {colors: ['green', 'blue']}
|
||||
}>
|
||||
! !
|
||||
|
||||
ChartApp subclass: #IndexChartApp
|
||||
instanceVariableNames: ''
|
||||
package: 'GoogleChartsExamples'!
|
||||
|
||||
!IndexChartApp methodsFor: 'not yet classified'!
|
||||
|
||||
begin
|
||||
"Start the executiong of the ExampleChartApp by connecting each button/graphic pair"
|
||||
PieChartExample new chartId:'pie_chart_div';drawChart.
|
||||
^super begin
|
||||
! !
|
||||
|
||||
!IndexChartApp class methodsFor: 'not yet classified'!
|
||||
|
||||
neededVisualizationPackages
|
||||
"This App only needs a corechart package."
|
||||
^{'corechart'}
|
||||
! !
|
||||
|
||||
PieChart subclass: #PieChartExample
|
||||
instanceVariableNames: ''
|
||||
package: 'GoogleChartsExamples'!
|
||||
|
||||
!PieChartExample methodsFor: 'not yet classified'!
|
||||
|
||||
makeData
|
||||
"return a DataTable of example Pie Chart data"
|
||||
|
||||
^ self arrayToDataTable: { {'Task'.'Hours per Day'}.
|
||||
{'Work' . 11}.
|
||||
{'Eat'.2}.
|
||||
{'Commute'.2}.
|
||||
{'Watch TV'.2}.
|
||||
{'Snooze'.7}}
|
||||
!
|
||||
|
||||
makeOptions
|
||||
"Return a Dictionary of the options in this case only a title"
|
||||
^#{'title' -> 'My Daily Activities'}
|
||||
! !
|
||||
|
||||
ChartApp subclass: #PopupChartApp
|
||||
instanceVariableNames: ''
|
||||
package: 'GoogleChartsExamples'!
|
||||
|
||||
!PopupChartApp methodsFor: 'not yet classified'!
|
||||
|
||||
begin
|
||||
"Start the executiong of the ExampleChartApp by connecting each button/graphic pair"
|
||||
ChartButton popUpChart:(PieChartExample chartId:'pie_chart_div') atDom:'#popPieChart' .
|
||||
ChartButton popUpChart:(ScatterChartExample chartId:'scatter_chart_div') atDom:'#popScatterChart'.
|
||||
ChartButton popUpChart:(GaugeChartExample chartId:'gauge_chart_div') atDom:'#popGaugeChart'.
|
||||
ChartButton popUpChart:(GeoChartExample chartId:'geo_markers_chart_div') atDom: '#popGeoMarkersChart'.
|
||||
^super begin
|
||||
! !
|
||||
|
||||
!PopupChartApp class methodsFor: 'not yet classified'!
|
||||
|
||||
neededVisualizationPackages
|
||||
"This is a hook for subclasses to define which visualization packages to load."
|
||||
^{'corechart'.'gauge'.'geochart'}
|
||||
! !
|
||||
|
||||
ScatterChart subclass: #ScatterChartExample
|
||||
instanceVariableNames: ''
|
||||
package: 'GoogleChartsExamples'!
|
||||
|
||||
!ScatterChartExample methodsFor: 'not yet classified'!
|
||||
|
||||
makeData
|
||||
"Return the example dataset"
|
||||
^ self arrayToDataTable: {
|
||||
{'Age'.'Weight'}.
|
||||
{8 . 11} .
|
||||
{ 4 . 5.5} .
|
||||
{ 11 . 14 } .
|
||||
{ 4 . 5}.
|
||||
{3 . 3} .
|
||||
{6.5 . 7}}
|
||||
!
|
||||
|
||||
makeOptions
|
||||
"options for example dataset"
|
||||
^<{
|
||||
title: 'Age vs. Weight comparison',
|
||||
hAxis: {title: 'Age', minValue: 0, maxValue: 15},
|
||||
vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
|
||||
legend: 'none'
|
||||
}>
|
||||
! !
|
||||
|
||||
Loading…
Reference in New Issue