You are previewing Supercharged JavaScript Graphics.

Supercharged JavaScript Graphics

Cover of Supercharged JavaScript Graphics by Raffaele Cecco Published by O'Reilly Media, Inc.
  1. Supercharged JavaScript Graphics
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. Preface
      1. Audience and Assumptions
      2. Organization
      3. Conventions Used in This Book
      4. Using Code Examples
      5. Safari® Books Online
      6. How to Contact Us
      7. Acknowledgments
    3. 1. Code Reuse and Optimization
      1. Keeping It Fast
      2. What and When to Optimize
      3. Homespun Code Profiling
      4. Optimizing JavaScript
      5. Optimizing jQuery and DOM Interaction
      6. Other Resources
    4. 2. DHTML Essentials
      1. Creating DHTML Sprites
      2. Converting into a jQuery Plug-in
      3. Timers, Speed, and Frame Rate
      4. Internet Explorer 6 Background Image Caching
    5. 3. Scrolling
      1. CSS-Only Scrolling Effects
      2. Scrolling with JavaScript
    6. 4. Advanced UI
      1. HTML5 Forms
      2. Using JavaScript UI Libraries
      3. Creating UI Elements from Scratch
    7. 5. Introduction to JavaScript Games
      1. Game Objects Overview
      2. The Game Code
    8. 6. HTML5 Canvas
      1. Canvas Support
      2. Bitmaps, Vectors, or Both?
      3. Canvas Limitations
      4. Canvas Versus SVG
      5. Canvas Versus Adobe Flash
      6. Canvas Exporters
      7. Canvas Drawing Basics
      8. Animating with Canvas
      9. Canvas and Recursive Drawing
      10. Replacing DHTML Sprites with Canvas Sprites
      11. A Graphical Chat Application with Canvas and WebSockets
    9. 7. Vectors for Games and Simulations
      1. Operations on Vectors
      2. Creating a JavaScript Vector Object
      3. A Cannon Simulation Using Vectors
      4. Rocket Simulation
    10. 8. Google Visualizations
      1. Limitations
      2. Chart Glossary
      3. Image Charts
      4. Interactive Charts
    11. 9. Reaching the Small Screen with jQuery Mobile
      1. jQuery Mobile
      2. TilePic: A Mobile-Friendly Web Application
      3. PhoneGap
    12. 10. Creating Android Apps with PhoneGap
      1. Installing PhoneGap
      2. Creating a PhoneGap Project in Eclipse
    13. Index
    14. About the Author
    15. Colophon
    16. SPECIAL OFFER: Upgrade this ebook with O’Reilly
O'Reilly logo

Image Charts

Image charts are designed to allow nonprogrammers with no JavaScript knowledge to create impressive-looking chart images. If you know a little HTML, you can use image charts. In contrast to the interactive charts API, there is no need to include any special JavaScript libraries, as the chart is requested from the Google chart servers with a regular URL request. Figure 8-5 shows the results of the following HTML page:

<html>
    <body>
        <img src = 'https://chart.googleapis.com/chart?
            cht=p3&chd=t:60,40&chs=500x250&chl=Hello|World'/>
    </body>
</html>
Image charts require nothing more than a simple URL request to yield impressive results

Figure 8-5. Image charts require nothing more than a simple URL request to yield impressive results

Not bad for such a short piece of code. However, constructing the URL can be a complicated and unintuitive process. Thankfully, if you are using charts where the data set is static (unchanging values that are known beforehand), Google has provided a useful Chart Wizard that makes the process of creating image chart URLs a whole lot easier (Figure 8-6). You can find the Chart Wizard at http://code.google.com/apis/chart/docs/chart_wizard.html.

Note

In the Google Chart Wizard, a data series is referred to as a data set.

You want charts? You’ve got charts galore—and more—with Google’s Chart Wizard (for image charts).

Figure 8-6. You want charts? You’ve got charts galore—and more—with Google’s Chart Wizard (for image charts).

Although the Chart ...

The best content for your career. Discover unlimited learning on demand for around $1/day.