Index
A
- aColorsLength variable / How it works...
- addColorStop method / How it works...
- addColumn method / How it works...
- addDots function / How it works...
- addDots method / How to do it...
- addLine function / How it works...
- addRows method / How it works...
- addStock function / How it works...
- advanced interactive marker
- building / Building an advanced interactive marker, How to do it..., How it works...
- working / How it works...
- animated 3D chart (canvas3DGraph)
- creating / Creating an animated 3D chart (canvas3DGraph), Getting ready, How to do it...
- working / How it works...
- animateSeconds recursive function / How to do it...
- animateStrokeWidth function / How to do it...
- Animator object
- updating / Updating the Animator object
- animQue array / How it works...
- about / How it works...
- appendRadioButton function / Creating the radio buttons dynamically
- application
- OOP perspective, moving to / Moving to an OOP perspective, Getting ready
- arcs
- drawing / Drawing arcs, How to do it..., How to do it...
- arguments array / How it works...
- aTotal array
- about / There's more...
B
- bar chart
- building, from scratch / Building a bar chart from scratch, Getting ready, How to do it...
- about / Building a bar chart from scratch
- data set, defining / How to do it...
- graph outlines, defining / How to do it...
- chart outlines, defining / How to do it...
- data bars, creating / How to do it...
- working / How it works...
- code, revisiting / Revisiting the code
- fillChart function, using / Using the fillChart function
- createBars function, using / Using the createBars function
- barStyle property / How it works...
- baseCanvas object / Moving our base canvas element into our constructor
- basic shapes
- starting / Starting from basic shapes, Getting ready, How it works...
- beginPath method / How it works...
- bezier curve
- creating / Creating a Bezier curve, Getting ready, How to do it..., How it works...
- bubble chart
- building / Building a bubble chart, Getting ready, How to do it...
- working / How it works...
- bubbles text format, improving / Improving our bubbles' text format
- buildTwitterHTML method / How it works..., How to do it...
C
- candlestick chart (stock chart)
- creating / Building a candlestick chart (stock chart), Getting ready, How to do it...
- working / How it works...
- canvas
- shapes, drawing / Introduction
- about / Graphics with 2D canvas
- curves, creating / Drawing arcs
- arcs, drawing / Getting ready, How to do it..., How to do it...
- curves, drawing with control point / Drawing curves with a control point, How to do it..., How it works...
- bezier curve, creating / Creating a Bezier curve, Getting ready, How to do it..., How it works...
- images, integrating into art / Integrating images into our art, How to do it..., There's more...
- text, drawing with / Drawing with text, How to do it..., How it works...
- pixel manipulation / Understanding pixel manipulation, How to do it..., How it works...
- canvas3DGraph
- changeLineView function / How to do it...
- chartInfo parameter / How it works...
- chartInfo variable / How it works...
- chart properties
- customizing, with options object / Customizing the chart properties with an options object, How to do it..., There's more...
- ChartWrapper
- used, for creating Google charts / Creating charts using the ChartWrapper, How to do it..., How it works...
- clearRect method / There's more...
- clock
- building, with RaphaelJS / Building a clock with RaphaelJS, Getting ready, How to do it...
- closePath method / How it works...
- closeYOffset variable / How it works...
- complex shapes
- creating / Creating complex shapes, Getting ready, How to do it..., How it works..., There's more...
- flag strips, drawing / How to do it...
- createTriangle function, creating / How to do it...
- context-aware legend
- creating / Creating a context-aware legend, How to do it...
- createLegend method, updating / How to do it...
- updateLegend method, updating / How to do it...
- event listener onMouseMoveArea, changing / How to do it...
- fillChart method / How to do it...
- working / How it works...
- context parameter / How it works...
- context variable / How to do it...
- controls, Google maps
- customizing / Customizing controls and overlapping maps, Getting ready, How to do it...
- createBars function
- using / Using the createBars function
- createDots function
- about / How it works...
- createLinearGradient method / How it works...
- createNode function / How it works...
- createOutline function / How it works...
- createSpider function / How to do it...
- createWaterfall function
- about / There's more...
- currentRadian / How it works...
- currentXIndex variable / How it works...
- curves
- drawing, with control point / Drawing curves with a control point, How to do it..., How it works...
D
- dashboard
- adding, to Google charts / Adding a dashboard to charts, How to do it..., How it works...
- data source
- changing, to Google Spreadsheet / Changing data source to Google Spreadsheet, How to do it..., How it works..., There's more...
- doughnut chart
- about / Using a doughnut chart to show relationships
- used, for showing relationships / Using a doughnut chart to show relationships, How to do it..., How it works...
- working / How it works...
- outline, adding / Adding an outline
- legend, creating / Creating a legend
- drawChart function / How to do it...
- optimizing / Optimizing the drawChart function
- drawChart update code / How to do it...
- drawDataWeb method / How it works...
- drawImage function / Scaling images
- drawImage method / How it works...
- drawRect method / How it works...
- drawTree function
- about / How to do it...
- drawTreeMap function
- creating / How to do it...
- turning, into recursive function / Turning drawTreeMap into a recursive function
E
- ECMAScript for XML (E4X)
- about / Getting ready
- working / How it works...
- online resources / How it works...
- elementStatus / How to do it...
- elementValue*stepSize element
- about / How it works...
- elementValue variable
- about / How it works...
F
- fadeOutImage / How to do it...
- featureType property / How it works...
- fillChart function
- about / Using the fillChart function
- using / Using the fillChart function
- fillChart method / Moving our base canvas element into our constructor
- fillRect method / How it works...
- fill shapes
- creating, in line chart / Creating fill shapes
- fillStyle method / How it works...
- fillText / How to do it...
- fillTriangle() function / How it works...
- flotJS
- about / Charting over time (flotJS)
- URL / Getting ready
- working / How it works...
- flying brick chart (waterfall chart)
- creating / Creating the flying brick chart (waterfall chart), Getting ready, How to do it...
- working / How it works...
- formatData function / How it works...
- formatter function
- about / There's more...
G
- $.getJSON function / How it works...
- gauge meter (jqPlot)
- animating / Animating a gauge meter (jqPlot), How to do it...
- working / How it works...
- gData array / How it works...
- geographic chart
- creating, with Google visualization API / Creating a geographic chart with Google Visualization API, Getting ready, How to do it...
- smaller areas, making visible / Making smaller areas more visible
- getData function
- about / The GetData function
- getImageData function / How it works...
- getPanes method / How it works...
- getPosition method / How to do it...
- google.maps.LatLng object / How to do it...
- google.maps.MapTypeId.HYBRID
- about / Map types
- google.maps.MapTypeId.ROADMAP
- about / Map types
- google.maps.MapTypeId.SATELLITE
- about / Map types
- google.maps.MapTypeId.TERRAIN
- about / Map types
- google.maps.OverlayView object / How it works...
- Google API key
- obtaning / Obtaining a Google API key, How to do it...
- working / How it works...
- Google Charts
- pie chart, creating / Getting started with a pie chart, How to do it..., How it works...
- chart type, changing / Changing the chart type
- creating, ChartWrapper used / Creating charts using the ChartWrapper, How to do it...
- chart, changing in one line / Changing a chart in one line
- data source, changing to Google Spreadsheet / Changing data source to Google Spreadsheet, How to do it..., How it works...
- chart properties, customizing with options object / Customizing the chart properties with an options object, How to do it..., How it works...
- dashboard, adding / Adding a dashboard to charts, How to do it..., How it works...
- Google map
- building / Building a Google map, How to do it..., How it works...
- latitude and longitude, working with / Working with latitude and longitude
- map types / Map types
- markers and events, adding / Adding markers and events, How to do it..., How it works...
- maps, overlapping / Customizing controls and overlapping maps, How to do it..., How it works...
- controls, customizing / Customizing controls and overlapping maps, How to do it..., How it works...
- maps, redesigning using styles / Redesigning maps using styles, Getting ready, How to do it..., How it works...
- Twitter, connecting to / Connecting a Twitter feed to a Google map, Getting ready, How to do it..., How it works...
- Google maps
- features / Introduction
- overlapping / Customizing controls and overlapping maps, Getting ready, How to do it...
- redesigning, styles used / Redesigning maps using styles, Getting ready, How to do it..., How it works...
- Google maps, creating
- geographic chart, creating with Google visualization API / Creating a geographic chart with Google Visualization API, How to do it..., How it works...
- Google API key, obtaining / Obtaining a Google API key, How to do it...
- GoogleMapTraveler.prototype.nextPathPoint method / There's more...
- GoogleMapTraveler object / How to do it..., How it works...
- gradients
- using, in text / Using gradients in your text
- graphical layers
- stacking / Stacking graphical layers, Getting ready, How to do it...
- working / How it works...
- drawChart function, optimizing / Optimizing the drawChart function
- code, streamlining / Further streamlining our code
- radio buttons, creating / Creating the radio buttons dynamically
- graphics, with 2D canvas
- about / Graphics with 2D canvas
- HTML5 document, creating / How to do it...
- canvas element, creating / How to do it...
- JavaScript file, importing into HTML document / How to do it...
- onLoad listener, adding / How to do it...
- updateCanvas function, creating / How to do it...
- rectangle, creating / How to do it...
- helper variables, creating / How to do it...
- nested loop, creating / How to do it...
- working / How it works..., There's more...
- grayStyle styling object / How to do it...
H
- helper global variables / How to do it...
- helveticaForClock / How to do it...
- hideOverlayCopy method / How to do it...
- href buttons / How it works...
I
- imageData.data array / How it works...
- image grayscale
- making / Making an image grayscale
- images
- integrating, into art / Integrating images into our art, How to do it..., There's more...
- scaling / Scaling images
- control, adding / Adding even more control
- using, as fill / Using images as a fill
- independent layers
- animating / Animating independent layers, How to do it..., How it works...
- Animator constructor, creating / How to do it...
- add method, creating / How to do it...
- _animate method, creating / How to do it...
- InfoVis
- about / Making a sunburst chart with InfoVis
- used, for making sunburst chart / Making a sunburst chart with InfoVis, Getting ready, How to do it...
- working / How it works..., There's more...
- InfoWindow
- about / Building an advanced interactive marker, Getting ready
- multiple tweets, adding / Adding multiple tweets into an InfoWindow bubble, Getting ready, How to do it..., How it works...
- infoWindow object / How it works...
- init function / How to do it...
- innerRadius / How it works...
- interactive click meter
- creating / Making an interactive click meter, How to do it...
- working / How it works...
- interactive Google map
- interactive legend
- creating / Adding an interactive legend, How to do it...
- createLegend method, creating / How to do it...
- updateLegend method, creating / How to do it...
- working / How it works..., There's more...
- intervalColors function / How it works...
- intervalOuterRadius / How it works...
- intervals function / How it works...
- isStarting variable / How it works...
J
- JavaScript Object Notation (JSON) / How it works...
- jqPlot
- using / Getting ready
- JQuery
- using / Getting ready
L
- label parameter / How it works...
- latitude and longitude
- working with / Working with latitude and longitude
- latLng property
- about / How it works...
- levelDistance property / There's more...
- line charts
- about / Building line charts
- building / Building line charts, Getting ready, How to do it...
- formatData function, creating / How to do it...
- working / How it works...
- switch mode, enabling between dots and lines / Enabling switching mode between dots and lines
- fill shapes, creating / Creating fill shapes
- making interactive / Revisiting lines: making the line chart interactive, Getting ready, How to do it..., How it works...
- logic of onChangedRadio, breaking / Breaking down the logic of onChangedRadio
- lineHeight variable / There's more...
- listener function / How to do it...
- live flag sample
- in action / How it works...
- live itinerary project
- building / Final project: building a live itinerary, Getting ready, How to do it...
- working / How it works..., There's more...
- look and feel, markers
- customizing / Customizing the look and feel of markers, How to do it..., How it works...
M
- map types
- about / Map types
- MarkerCounter constructor / How to do it...
- markers
- look and feel, customizing / Customizing the look and feel of markers, Getting ready, How to do it..., How it works...
- markers and events
- adding, to Google map / Adding markers and events, How to do it..., How it works...
- Math.cos()
- Math.min method
- about / There's more...
- Math.sin()
- meterGaugeRenderer library / How it works...
- midRadian variable / Revisiting Math.cos() and Math.sin()
- moveTo function / How it works...
- multiple tweets
- adding, into InfoWindow / Adding multiple tweets into an InfoWindow bubble, Getting ready, How to do it...
- MyFirstObject function / How it works...
N
- nextPathPoint method / How to do it...
O
- onAdd method / How it works...
- onChangedRadio callback function / How to do it...
- onChangedRadio function / How to do it...
- breaking / Breaking down the logic of onChangedRadio
- onLoad event / Getting ready
- onload event / How to do it...
- onreadystatechange callback property / How it works...
- onTimeReset function / How to do it...
- onTripDataReady listener / How to do it...
- OOP perspective
- code, converting / How to do it...
- functions, updating / How to do it...
- helper function, creating / How to do it...
- init function, rewriting / How to do it...
- working / How it works...
- base canvas element, moving into constructor / Moving our base canvas element into our constructor
- HTML components, creating / Creating all the HTML components dynamically
- lose ends, removing / Removing the lose ends
- charts, creating for testing / Testing our work by creating two charts
- over time (flotJS)
- charting / Charting over time (flotJS), Getting ready, How to do it...
- ready event, creating / How to do it...
- updateChart, creating / How to do it...
- getData, creating / How to do it...
P
- paths
- animating / Animating paths
- pie chart
- creating / Creating a pie chart, Getting ready, How to do it..., Getting started with a pie chart, How to do it...
- working / How it works..., How it works...
- Math.cos() and Math.sin(), using / Revisiting Math.cos() and Math.sin()
- pixel manipulation
- about / Getting ready, How to do it...
- working / How it works...
- image grayscale, making / Making an image grayscale
- pixel reversing / Pixel reversing
- Pixel reversing
- about / Pixel reversing
- plotBar function
- about / The logic behind plotBar
- plugin coding
- about / There's more...
- projection.fromLatLngToDivPixel method / How it works...
- pyramid chart
- about / Going through a funnel (a pyramid chart)
- creating / Going through a funnel (a pyramid chart), How to do it...
- working / How it works...
- findLine function / Making findLine smarter
- logic in init function, changing / Changing the logic in init to create shapes
- text, adding to graph / Adding text into our graph
Q
- quadratic curve
- about / Drawing curves with a control point
- drawing / How to do it...
R
- radar
- about / Leveraging a radar
- radar chart
- about / Leveraging a radar
- creating / How to do it...
- working / How it works...
- rotated legend, adding / Adding a rotated legend
- radio buttons
- creating / Creating the radio buttons dynamically
- RaphaelJS
- used, for building clock / Building a clock with RaphaelJS, Getting ready, How to do it...
- working / How it works...
- readyState variable / How it works...
- rectangles
- layering, for creating flag of Greece / Layering rectangles to create the flag of Greece, Getting ready, How it works...
- creating / There's more...
- rect method / How it works...
- refreshChart function / How to do it...
- refreshRate property / How it works...
- renderLine method / How to do it...
- renderList object / How it works...
- render options
- adding, to stock chart / Adding other render options to our stock chart
- renderOptions object / How it works...
- ren parameter / How it works...
- restore method / How it works...
- rotate method / How it works...
S
- save method / How it works...
- scatter chart
- about / Spreading data in a scatter chart
- data, spreading / Spreading data in a scatter chart, Getting ready, How to do it..., How it works...
- working / How it works...
- setInterval / There's more...
- setOptions function / There's more...
- setPosition method / How to do it..., There's more...
- shadows and glows
- adding, in text / Adding shadows and glows
- shapes
- creating, paths used / Creating shapes using paths, Getting ready, How it works...
- vertices, adding / Adding more vertices, Getting ready, How to do it..., How it works...
- overlapping / Overlapping shapes to create other shapes, Getting ready, How to do it...
- showTweet function / How it works...
- spider chart / Leveraging a radar
- startIndex parameter / How it works...
- startingSpeed variable / How it works...
- stock chart
- about / Building a candlestick chart (stock chart)
- creating / Building a candlestick chart (stock chart), Getting ready, How to do it...
- working / How it works...
- render options, adding / Adding other render options to our stock chart
- stroke() method / There's more...
- strokeStyle values / How to do it...
- styleFormatter function
- about / The logic behind styleFormatter
- style properties, Google maps
- visibility / How it works...
- gamma / How it works...
- hue / How it works...
- lightness / How it works...
- saturation / How it works...
- sunburst chart
- creating, with InfoVis / Making a sunburst chart with InfoVis, Getting ready, How to do it...
T
- text
- drawing with / Drawing with text, How to do it..., How it works...
- gradients, using / Using gradients in your text
- shadows and glows, adding / Adding shadows and glows
- this.barData property / How it works...
- tickFormater method / Charting over time (flotJS)
- ticks function / How it works...
- trailCount variable / How it works...
- translateCSV formatting function / How it works...
- translateCSV function / How to do it...
- translate method / How it works...
- Traveler marker
- tree chart
- structuring / Structuring a tree chart, How to do it...
- working / How it works..., There's more...
- tree data
- turning, into recursive data / Turning the data and total to recursive data
- tree mapping
- about / Tree mapping and recursiveness, How to do it...
- working / How it works...
- init function, updating / Updating the init function – recalculating the total
- drawTreeMap, turning into recursive function / Turning drawTreeMap into a recursive function
- tree data, turning into recursive data / Turning the data and total to recursive data
- user interaction, adding / Adding user interaction into tree mapping, Getting ready, How to do it..., How it works...
- trialingArray array / How it works...
- Twitter feed
- connecting, to Google map / Connecting a Twitter feed to a Google map, Getting ready, How to do it..., How it works...
- TwitterMarker class / How it works...
- TwitterMarker constructor / How to do it...
U
- updateCanvas function / How it works...
- UpdateChart function
- about / The UpdateChart function
- updateCumulativeChartInfo function
- about / There's more...
- updateMeter function / How to do it...
- creating / Creating the updateMeter function
- user interaction
- adding, to tree mapping / Adding user interaction into tree mapping, Getting ready, How to do it..., How it works...
V
- vector drawing tool
- about / Understanding pixel manipulation
- vertices
- adding, to shapes / Adding more vertices, Getting ready, How to do it..., How it works...
W
- waterfall chart
- creating / Creating the flying brick chart (waterfall chart)
- about / Creating the flying brick chart (waterfall chart)
- format of numbers, clearing / Cleaning the format of numbers
- weeklyCapture function
- about / There's more...
- window.onload callback function / How to do it...
X
- XMLHttpRequest object / How it works...