jquery4u.com - Archives (février 2016)
1 jQuery Fan Blog for your Daily News, Plugins, Tuts/Tips & Code Snippets.
Meet my friend Jenny. She recently started coding websites. She loved her job and was very happy until she met Steve, who has a reputation of being, let's say, not a very easygoing client.
Steve had a lot of data in a spreadsheet and he wanted to display that on his website. Our friend (now Jenny is your friend too!) suggested that Steve make the charts in Excel and upload them as images to the website.
[author_more]
But Steve being Steve, he wanted the charts to be interactive. Not only that, he also wanted the charts to get updated whenever he made a change to the data in his spreadsheet .
Jenny didn't know how to tackle this issue, so she came to me. And, being the good friend I am, I gave her this advice:
First ask your client to move his data to Google Sheets (because that's what all the cool people are doing nowadays). Then we can easily implement the features that he needs — interactive JavaScript charts and dynamic updating.
Her client agreed (luckily!), and Jenny and I coded rest of the solution. But how? Well, that's what this tutorial will teach you.
I have divided this tutorial into five easy-to-follow steps:
- Exporting data from Google Sheets
- Fetching JSON from Google Sheets via Ajax
- Restructuring the data
- Creating a chart with FusionCharts.
- Customizing the chart
So without further ado, let's dive in!
Exporting Google Sheets Data as JSON
Before delving into how to export data, let's first create a sheet. Assuming you've got a Google account, you can do this by going to the Google Sheets page and hitting the Start a new spreadsheet button. In the spreadsheet that opens, create two columns: Actor and Income. Then fill your newly created sheet with some data. I've taken mine from here: The World's Highest-Paid Actors 2015.
As you can see, the left column contains labels for our chart, the right one values corresponding to those labels. For those of you following along at home, you can grab a copy of this sheet here (go to File > Make a copy).
The data available in Google Sheets can be exported to multiple formats like JSON, XML etc. And once exported to any of those formats, it can be easily accessed via the web.
To open your document to the web, you need to make the following changes to the document settings:
- Set the sharing of the document to either Public on the web, or Anyone with the link. To achieve this, click the Share button in the top right-hand corner, then click the Advanced option that appears in the bottom right of the pop up.
- Publish the document to the web. This option is available under File > Publish to the web
With these two changes made, the data in the document can be accessed in JSON format via: https://spreadsheets.google.com/feeds/list/SPREADSHEET/od6/public/basic?alt=json
You will need to replace SPREADSHEET with the ID of your Google Sheet, which in our case is 1Aoz_GcPYoEIMMNd1N_meYNOp8TJ0fCXpp1AoUhCpwZo. You can see the results here.
Using jQuery to Fetch JSON from Google Sheets
We will use jQuery's get() method to fetch the data from Google Sheets. You can include jQuery from a CDN as shown:
Continue reading %Interactive JavaScript Charts Using Data from Google Sheets%
In this article we'll investigate the importance of JSON and why we should use it in our applications. We'll see that jQuery has got us covered with a very nice convenience function.
What is JSON?
[author_more]
JSON stands for JavaScript Object Notation. In simple terms JSON is a way of formatting data for, e.g., transmitting it over a network. In this article we will look at loading JSON data using an HTTP GET request (we can also use other verbs, such as POST).
Why would we choose JSON over say XML? The key advantage of using JSON is efficiency. JSON is less verbose and cluttered, resulting in fewer bytes and a faster parse process. This allows us to process more messages sent as JSON than as XML. Moreover, JSON has a very efficient and natural object representation leading to formats such as BSON, where JSON-like objects are stored in a binary format.
Now let's see how jQuery can help us load JSON-encoded data from a remote source. For the impatient among you, there's a demo towards the end of the article.
JSON jQuery Syntax
The $.getJSON() method is a handy helper for working with JSON directly if you don't require much extra configuration. Essentially, it boils down to the more general $.ajax() helper, with the right options being used implicitly. The method signature is:
$.getJSON(url, data, success);
Besides the required URL parameter we can pass in two optional parameters. One represents the data to send to the server, the other one a callback to trigger in case of a successful response.
So the three parameters correspond to:
- The
urlparameter is a string containing the URL to which the request is sent. - The optional
dataparameter is either an object or a string that is sent to the server with the request. - The optional
success(data, textStatus, jqXHR)parameter is a callback function executed only if the request succeeds.
In the simplest scenario we only care about the returned object. In this case, a potential success callback would look like this:
function success(data) {
// do something with data, which is an object
}
As mentioned, the same request can be triggered with the more verbose $.ajax() call. Here we would use:
$.ajax({
dataType: 'json',
url: url,
data: data,
success: success
});
Let's see this in practice using a little demo.
A Sample Application
We will start a local server that serves a static JSON file. The object represented by this file will be fetched and processed by our JavaScript code. For the purposes of our demo we'll use Node.js to provide the server (although any server will do). This means we'll need the following three things:
- A working installation of Node.js.
- The node package manager (npm).
- A global installation of the http-server package.
The first two points are platform-dependent. If you need some help getting either of them set up, you might want to check out our tutorial: A Beginner’s Guide to npm — the Node Package Manager, or Node's download page (npm comes bundled with Node).
The third point can be achieved by running the following from your terminal:
npm install http-server -g
If you find yourself needing a sudo prefix (-nix systems) or an elevated command prompt to perform this global installation, you should consider changing the location of global packages.
Once these requirements are met we can put the following three files in a new folder:
example.jsis the JavaScript file to request the data.example.jsonis the example JSON file to represent our object.index.htmlis the HTML page to call the JavaScript and display the data.
Download Example (Source Files)
From the command prompt we can simply invoke http-server within the new folder. Now http://localhost:8080 should be running the demo.
The Sample JavaScript
The following code is the complete client-side logic. It waits for the DOMContentLoaded loaded event before attaching an event handler to the click event of the element with the ID get-data. When this element is clicked we attempt to load the JSON from the server using $.getJSON(), before processing the response and displaying it on the screen.
Continue reading %Ajax/jQuery.getJSON Simple Example%