3 months passed and the trends continued as predicted. Firefox continues to drop, as well as IE while Chrome is growing rapidly.
let’s see what the future will give us.
Wednesday, November 2, 2011
Darts–not only a game
Google decided to have its own programing language. If you’ll think about it for a moment why not. Apple has one, Microsoft has more than one, Sun (a.k.a Oracle) has one. So now, they have one. Its name is Dart (just like the game. They say that its goal is to solve every JavaScript issues that may occur in large scale web application.
If you think on trying it, you may want to check http://www.dartlang.org.
When you go there, you might want to download the Dartboard (cool name) which is the Dart Editor and read (I read only some…) of the technical spec.
I can tell you from my point of view that this is really cool and exciting. Still lots to do……
Oh, and the Fibonacci Sunflower sample is amazing (and no…. it does not work on IE, since they do not support HTML5 yet)
Wednesday, July 20, 2011
Google Visualization BarChart Paging
Here is a very simple sample for paginating bar chart I created. I’m using it for a very large scale data table (over 1000 rows and it works like charm)
- Create a data table object with the relevant data
- Create a pagination object that will hold the total number of pages, current page and page size
- Create two buttons that will change the page number
- Create a population function that will fill the bar chart
| <html> |
I hope you might use it. I know I am :-)
Tuesday, July 19, 2011
Google Visualization API Charts
If you’re a newbie to the Google Visualization API (a.k.a. Google Charts) as I was a few months ago you might find that you need some conceptual things to understand. Here is a small list that you might find useful.
- Know and understand the basics of the JavaScript language.
JavaScript is the language in which we generate the graphs. In order to know how to use the API, you must know the basics of this language. - Know what is JSON (json.org)
JSON (JavaScript Object Notation) is the way we define objects and their properties. Here we use this to define properties. - References and Help!!!!
You can get all the help you need at the Google Visualization API website at: http://code.google.com/apis/chart/
All other information you might need you can find on the “Google Visualization API group” at: http://groups.google.com/group/google-visualization-api - Creating you first chart
- First of all create a reference to the Google Visualization API JavaScript library by adding this line to your HTML header: <script type="text/javascript" src="https://www.google.com/jsapi"></script>
- After loading this library, you can access the “google” object (pay attention that this object is all lower case). You can load packages, generate object instances etc.
- The simplest way to describe it is by example. Here is a simple 3D Pie Chart (as taken from the API samples)
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
data.setValue(3, 0, 'Watch TV');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Sleep');
data.setValue(4, 1, 7);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {
width: 450,
height: 300,
is3D: true,
title: 'My Daily Activities'
});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
- What are packages
Packages are, as you might think, an array of packages you intend to use, and thus request to load into the browser memory. The most common package is the “corechart”, others are: “table”, “geomap”, “geochart”, “annotatedtimeline”, “motionchart”, “orgchart”, “treemap” and “charteditor” - The Google DataTable and DataView
The data table object is a holder of data in the form of table (similar to any table format you can think of). It has columns and rows. You can create this object in several ways.- Creating an empty data table and filling it. Similar to the previous example
In this sample we create a table with 2 columns and populating it using the “addRows” method. In the previous example we first allocated 5 rows and then set their values.var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', {v:7, f:'7.000'}]
]); - Creating a datable and populating it during the creation stage (in the constructor)
var dt = new google.visualization.DataTable(
{
cols: [{id: 'task', label: 'Task', type: 'string'},
{id: 'hours', label: 'Hours per Day', type: 'number'}],
rows: [{c:[{v: 'Work'}, {v: 11}]},
{c:[{v: 'Eat'}, {v: 2}]},
{c:[{v: 'Commute'}, {v: 2}]},
{c:[{v: 'Watch TV'}, {v:2}]},
{c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}
]
},
0.6
);
- Creating an empty data table and filling it. Similar to the previous example
- Methods, events, listeners and triggers
All of the mentioned above are supported by this API. You can listen to events, such as “select”, “onmouseover” etc. Each graph element has a set of methods and events that you can use for your application purposes.
In this example we created a table using the Table control, populated it and attached a “select” listener to its rows. Whenever a row was selected (clicked) the “selectHandler” function was called.var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);
google.visualization.events.addListener(table, 'select', selectHandler);function selectHandler() {
alert('A table row was selected');
}
Similar to this, you can catch mouse movements, maps region selection (“regionClick” event in the GeoChart), pie slices selections, column bar selections and much more. - The “Playground”
Every graph you want to try before you generate your own code you can try on the “API Playground” at: http://code.google.com/apis/ajax/playground/?type=visualization
Here you can select every graph type you desire, modify and debug them. - Limitations:
Although it’s created by Google, we have limitations for using the graphs. Most of them are due to the fact that all graphs are generated on the user’s browser (the client) and thus limited by the browser type, computer CPU and memory. From my experience, before trying to populate large amount of data and “believing” the API will do the trick, think and generate only what you need.
References:
Thursday, July 14, 2011
Is this the end of IE? Or is it the end of FF?
If you are following the usage trends of the internet browsers, you must have heard by now on Google Chrome and Firefox.
A few years ago, when Microsoft had us all chained to their internet explorer some people in the community decided that enough is enough and created a brand new (some say not so new, but who cares) browser named “Firefox”. Firefox had a slow start, mostly used by the internet “geeks”. But through time, others started to use and enjoy it, and Microsoft, now understanding that neglecting its users wasn’t so smart, started to lose its grip on the internet browsers world. And indeed, in the first half of the year 2009 the trends changed and the “Firefox” was the most common used browser.
In the meantime, a “small” company name Google decided that all the existing browsers lack the same fundamental thing, which is speed. It believed that the future of all computer communication is via browsers, i.e. using “Cloud” services, such as email, documents, banking services etc. For that purpose it started to develop a brand new internet browser with a fast JavaScript engine that it called “Chrome”. Once again, at start, only the “geeks” used it, but slowly, it became more and more popular and started to bite of the Firefox and IE users share.
Today, after almost 3 years in the market, the Google chrome holds around 18% of the users’ usage market, whereas Mozilla Firefox holds around 42% and Microsoft Internet Explorer holds around 23%.
Here is a small chart I created using the w3schools.com website statistics showing the browsers usage for the past 3 year.
Taking these statistics into consideration and generating a trend line for the next 6 months, we can estimate that the Google chrome browser will not only pass IE (which it already did a few months ago), but also pass FF (which is unbelievable). I believe that unless the Firefox people will wake up they, just like Microsoft in the past, will lose their crown to the Google chrome.
I know that all these words are merely speculations, but, hey….. these numbers don’t lie. They are based on real users. On any case, we are surely in the beginning of a wonderful future on the web. With 3 independent companies kicking their buts to make better browsers it can only do good to us all (I hope so anyway)
Subscribe to:
Comments (Atom)
Posts
