Create Web Charts. With jqplot. Apress. Fabio Nelli

Transcription

1 Create Web Charts With jqplot Fabio Nelli Apress

2 Contents J About the Author About the Technical Reviewer Acknowledgments Introduction xv xvii xix xxi Chapter 1: Charting Technology Overview 1 Elements in a Chart 1 Most Common Charts 4 How to Realize Charts on the Web 6 HTML5 6 Charting with SVG and CANVAS 7 Canvas vs SVG 7 The DOM 9 Developing in JavaScript 10 Running and Debugging JavaScript 12 Data Types in JavaScript 13 Firebug and DevTools 15 JSON 17 Summary 17 vii

3 m CONTENTS Chapter 2: jquery Basics 19 Including the jquery Library 20 Selections 21 Chaining Methods 23 The Wrapper Set 23 jquery and the DOM 24 The readyo Method 24 Traversing the DOM with Selections 24 Create and Insert New Elements 26 Remove, Hide, and Replace Elements 27 jquery Ul: Widgets 28 Accordion 29 Tab 31 Button 32 Combo Box 35 Menu 35 Slider 37 Progress Bar 39 Concluding Thoughts on the jquery Library 41 Summary 41 Chapter 3: Introducing jqplot 43 The jqplot library 43 Including Basic Files 44 Plot Basics 45 Adding a Plot Container 45 Creating the Plot 45 Using jqplot Plug-ins 46 Understanding jqplot Options 47 Inserting Options 47 Handling Options on Axes 50 viii

4 CONTENTS Inserting Series of Data 51 Renderers and Plug-ins: A Further Clarification 55 CSS Customization 57 Thinking in Modules 58 Summary 60 Chapter 4: Line Charts with jqplot 61 Using (x, y) Pairs as Input Data 61 First Steps in the Development of a Line Chart: The Axes 63 Add a Title and Axis Labels 63 Axis Properties 65 Axes Ticks 67 Using the Log Scale 72 The Multiseries Line Chart 74 Multiple Series of Data 74 Smooth-Line Chart 77 Line and Marker Style 78 Animated Charts 80 More Than One y Axis 81 Data with JavaScript 82 Generating Data, Using Math Functions 83 Generating Random Data 84 Handling Date Values 85 The DateAxisRenderer Plug-in 86 Handling Date Values in Different Formats 88 Handling Time Values 89 Highlighting 90 Cursor Highlighter 90 Highlighting with HTML Format 93 ix

5 m CONTENTS Interacting with the Chart: Limit Lines and Zooming 94 Drawing a Limit Line on the Chart 94 Adding Buttons to Your Charts 96 Zooming 101 Changing Chart Appearance 104 Customizing Text, Using CSS 104 Changing the Background Color 105 Further Customization, Using CSS 106 Setting the Grid 107 Working with Areas on Line Charts 109 Area Charts 109 Line and Area Charts 111 Band Charts 112 Filling Between Lines in a Line Chart 116 Trend Lines 119 Summary 122 Chapter 5: Bar Charts with jqplot 123 Using the BarRenderer Plug-In to Create Bar Charts 123 Rotate Axis Tick Labels 125 Modify the Space Between the Bars 126 Adding Values at the Top of Bars 126 Bars with Negative Values 127 Bar Charts with More Than One Set of Data 129 Vertical and Horizontal Bar Charts 131 Vertical Stacked Bars 133 Horizontal Stacked Bars 134 Combination Charts: Lines in Bar Charts 136 Animated Plot 137 Marimekko Chart 139

6 i: CONTENTS Bar Chart Events 141 The jqplotdataclick Event 141 The jqplotrightclick Event 143 Other Bar Chart Events 144 Clicking the Bar to Show Information in Text 146 Handling Legends 148 Adding a Legend 148 The Enhanced Legend 151 Custom Legend Highlighting 152 Custom Tool Tip 154 Summary 157 Chapter 6: Pie Charts and Donut Charts with jqplot 159 Pie Charts 159 Donut Charts 162 Multilevel Pie Charts 164 Summary 166 Chapter 7: Candlestick Charts with jqplot 167 OHLC Charts 167 Using Real Bodies and Shadows 170 Comparing Candlesticks 170 Summary 172 Chapter 8: Scatter Charts and Bubble Charts with jqplot 173 Scatter Chart (xy Chart) 173 Bubble Chart 176 Block Chart 180 Summary 181 Chapter 9: Funnel Charts with jqplot 183 Creating a Funnel Chart 183 Summary 186 xi

7 IS CONTENTS Chapter 10: Adding Controls to Charts 187 Adding Controls 187 Using Radio Buttons 188 Adding Radio Button Controls 188 Accessing Attributes after the Chart Has Already Been Drawn 191 Using Sliders 194 Using Check Boxes 198 Summary 201 Chapter 11: Embedding jqplot Charts in jquery Widgets 203 jqplot Charts on Tabs 203 jqplot Charts on Accordions 209 Resizable and Draggable Charts 212 A Resizable Line Chart 212 Three Draggable Line Charts 214 Summary 218 Chapter 12: Handling Input Using Data 219 the JSON Format 219 The JSON Format 220 A Practical Case: The jqplot Data Renderer 221 JSON and $.getjs0n() 223 Real-Time Charts 225 Summary 228 Appendix A: Guidelines for the Examples in the Book 229 Installing a Web Server 229 Installing Aptana Studio IDE 230 Setting the Aptana Studio Workspace 230 Creating a Project 231 xii

8 CONTENTS Completing the Workspace 232 Filling the src Directory with the jqplot Library 233 Running the Examples 234 Summary 235 Appendix B: jqplot Plug-ins 237 Index xiii