Nelli Beginning JavaScript Charts

With jqPlot, d3, and Highcharts
1. Auflage 2014
ISBN: 978-1-4302-6290-9
Verlag: APRESS
Format: PDF
Kopierschutz: 1 - PDF Watermark

E-Book, Englisch, 602 Seiten, eBook

Beginning JavaScript Charts shows how to convert your data into eye-catching, innovative, animated, and highly interactive browser-based charts. This book is suitable for developers of all experience levels and needs: for those who love fast and effective solutions, you can use the jqPlot library to generate charts with amazing effects and animations using only a few lines of code; if you want more power and need to create data visualization beyond traditional charts, then D3 is the JavaScript library for you; finally, if you need a high-performance, professional solution for interactive charts, then the Highcharts library is also covered.If you are an experienced developer and want to take things further, then Beginning JavaScript Charts also shows you how to develop your own graphics library starting from scratch using jQuery. At the end of the book, you will have a good knowledge of all the elements needed to manage data from every possible source, from high-end scientific instruments to Arduino boards, from PHP SQL databases queries to simple HTML tables, and from Matlab calculations to reports in Excel. You will be able to provide cutting-edge charts exploiting the growing power of modern browsers.Create all kinds of charts using the latest technologies available on browsers (HTML5, CSS3, jQuery, jqPlot, D3, Highcharts, and SVG) Full of step-by-step examples, Beginning JavaScript Charts introduces you gradually to all aspects of chart development, from the data source to the choice of which solution to apply. This book provides a number of tools that can be the starting point for any project requiring graphical representations of data, whether using commercial libraries or your own

Zielgruppe

Popular/general

Autoren/Hrsg.

Nelli, Fabio

Inhaltsverzeichnis

1;Contents at a Glance;3
2;Contents;588
3;About the Author;600
4;About the Technical Reviewer;601
5;Acknowledgments;602
6;Introduction;5
7;Chapter 1: Charting Technology Overview;6
7.1;Elements in a Chart;6
7.2;Most Common Charts;9
7.3;How to Realize Charts on the Web;11
7.4;HTML5;11
7.5;Charting with SVG and CANVAS;12
7.5.1;Canvas vs SVG;12
7.6;The DOM;14
7.7;Developing in JavaScript;15
7.7.1;Running and Debugging JavaScript;17
7.7.2;Data Types in JavaScript;18
7.7.2.1;Arrays;18
7.7.2.2;Objects;20
7.8;Firebug and DevTools;21
7.9;JSON;23
7.10;Summary;23
8;Chapter 2: jQuery Basics;24
8.1;Including the jQuery Library;25
8.1.1;Selections;26
8.1.2;Chaining Methods;28
8.1.3;The Wrapper Set;28
8.2;jQuery and the DOM;29
8.2.1;The ready(?) Method;29
8.2.2;Traversing the DOM with Selections;29
8.2.3;Create and Insert New Elements;31
8.2.4;Remove, Hide, and Replace Elements;32
8.3;jQuery UI: Widgets;33
8.3.1;Accordion;34
8.3.2;Tab;36
8.3.3;Button;37
8.3.4;Combo Box;39
8.3.5;Menu;40
8.3.6;Slider;42
8.3.7;Progress Bar;44
8.4;Concluding Thoughts on the jQuery Library;46
8.5;Summary;46
9;Chapter 3: Simple HTML Tables;47
9.1;Creating a Table for Your Data;47
9.1.1;Your Example’s Goals;47
9.1.2;Applying CSS to Your Table;50
9.1.3;Adding Color Gradation to Your Table;51
9.1.4;Adding Color Gradation to Your Table, Using Files;55
9.2;Parsing the Table Data;56
9.2.1;Importing the jQuery Library;56
9.2.2;xLabels;57
9.2.2.1;Extracting the Labels;59
9.2.3;dataGroups;62
9.3;Ready for Implementing Graphics;63
9.4;Summary;63
10;Chapter 4: Drawing a Line Chart;64
10.1;Defining the Canvas;64
10.2;Setting the Canvas;66
10.3;Drawing a Line Chart;68
10.3.1;Drawing Axes, Tick Labels, and the Grid;69
10.4;Drawing Lines on the Chart;76
10.5;Adding a Legend;78
10.6;Adding a Title;80
10.7;Hiding the Table;82
10.8;Summary;83
11;Chapter 5: Drawing a Bar Chart;84
11.1;Drawing a Bar Chart;84
11.2;Summary;87
12;Chapter 6: Drawing a Pie Chart;88
12.1;Drawing a Pie Chart;88
12.1.1;Setting the Canvas;88
12.1.2;Implementing the Pie Chart;92
12.1.3;Completing the Pie Chart;95
12.2;Adding Effects;97
12.2.1;Adding a Gradient Effect;97
12.2.2;Adding a Better Gradient Effect;99
12.2.3;Creating a Pie Chart with a Slice Pulled Out;100
12.2.4;Inserting an Animation to Pull Out the Slice;102
12.2.5;Clicking a Slice to Pull It Out;107
12.2.6;Clicking a Slice to Pull It Out with Animation;111
12.2.7;Other Effects;115
12.3;Summary;115
13;Chapter 7: Creating a Library for Simple Charts;116
13.1;Creating a Library;116
13.2;Main Features: Target, Data, and Options;117
13.3;Implementing the Library;122
13.3.1;Setting the Canvas;122
13.3.2;Drawing the Axes, Tick Labels, and Grid;123
13.3.3;Drawing Data;127
13.3.4;Adding the Legend;129
13.4;Default Values;130
13.5;Summary;133
14;Chapter 8: Introducing jqPlot;134
14.1;The jqPlot library;134
14.2;Including Basic Files;134
14.3;Plot Basics;136
14.3.1;Adding a Plot Container;136
14.3.2;Creating the Plot;136
14.4;Using jqPlot Plug-ins;137
14.5;Understanding jqPlot Options;138
14.5.1;Inserting Options;138
14.5.2;Handling Options on Axes;141
14.6;Inserting Series of Data;143
14.7;Renderers and Plug-ins: A Further Clarification;146
14.8;CSS Customization;149
14.9;Thinking in Modules;150
14.10;Summary;152
15;Chapter 9: Line Charts with jqPlot;153
15.1;Using (x, y) Pairs as Input Data;153
15.2;First Steps in the Development of a Line Chart: The Axes;155
15.2.1;Add a Title and Axis Labels;155
15.2.2;Axis Properties;157
15.2.3;Axes Ticks;160
15.2.4;Using the Log Scale;166
15.3;The Multiseries Line Chart;168
15.3.1;Multiple Series of Data;168
15.3.2;Smooth-Line Chart;171
15.3.3;Line and Marker Style;173
15.3.4;Animated Charts;175
15.3.5;More Than One y Axis;176
15.4;Data with JavaScript;178
15.4.1;Generating Data, Using Math Functions;178
15.4.2;Generating Random Data;181
15.5;Handling Date Values;182
15.5.1;The DateAxisRenderer Plug-in;182
15.5.2;Handling Date Values in Different Formats;185
15.5.3;Handling Time Values;186
15.6;Highlighting;187
15.6.1;Cursor Highlighter;188
15.6.2;Highlighting with HTML Format;190
15.7;Interacting with the Chart: Limit Lines and Zooming;191
15.7.1;Drawing a Limit Line on the Chart;191
15.7.2;Adding Buttons to Your Charts;193
15.7.3;Zooming;198
15.8;Changing Chart Appearance;201
15.8.1;Customizing Text, Using CSS;202
15.8.2;Changing the Background Color;203
15.8.3;Further Customization, Using CSS;204
15.8.4;Setting the Grid;205
15.9;Working with Areas on Line Charts;207
15.9.1;Area Charts;208
15.9.2;Line and Area Charts;210
15.9.3;Band Charts;210
15.9.4;Filling Between Lines in a Line Chart;215
15.10;Trend Lines;219
15.11;Summary;222
16;Chapter 10: Bar Charts with jqPlot;223
16.1;Using the BarRenderer Plug-In to Create Bar Charts;223
16.2;Rotate Axis Tick Labels;225
16.3;Modify the Space Between the Bars;226
16.4;Adding Values at the Top of Bars;227
16.5;Bars with Negative Values;228
16.6;Bar Charts with More Than One Set of Data;230
16.6.1;Vertical and Horizontal Bar Charts;232
16.6.2;Vertical Stacked Bars;234
16.6.3;Horizontal Stacked Bars;236
16.7;Combination Charts: Lines in Bar Charts;237
16.8;Animated Plot;239
16.9;Marimekko Chart;240
16.10;Bar Chart Events;242
16.10.1;The jqplotDataClick Event;243
16.10.2;The jqplotRightClick Event;244
16.10.3;Other Bar Chart Events;245
16.10.4;Clicking the Bar to Show Information in Text;247
16.11;Handling Legends;249
16.11.1;Adding a Legend;249
16.11.2;The Enhanced Legend;252
16.11.3;Custom Legend Highlighting;253
16.12;Custom Tool Tip;255
16.13;Summary;258
17;Chapter 11: Pie Charts and Donut Charts with jqPlot;259
17.1;Pie Charts;259
17.2;Donut Charts;262
17.3;Multilevel Pie Charts;265
17.4;Summary;267
18;Chapter 12: Candlestick Charts with jqPlot;268
18.1;OHLC Charts;268
18.2;Using Real Bodies and Shadows;271
18.3;Comparing Candlesticks;271
18.4;Summary;273
19;Chapter 13: Scatter Charts and Bubble Charts with jqPlot;274
19.1;Scatter Chart (xy Chart);274
19.2;Bubble Chart;277
19.3;Block Chart;280
19.4;Summary;282
20;Chapter 14: Funnel Charts with jqPlot;283
20.1;Creating a Funnel Chart;283
20.2;Summary;286
21;Chapter 15: Adding Controls to Charts;287
21.1;Adding Controls;287
21.2;Using Radio Buttons;288
21.2.1;Adding Radio Button Controls;288
21.2.2;Accessing Attributes after the Chart Has Already Been Drawn;292
21.3;Using Sliders;294
21.4;Using Check Boxes;298
21.5;Summary;301
22;Chapter 16: Embedding jqPlot Charts in jQuery Widgets;302
22.1;jqPlot Charts on Tabs;302
22.2;jqPlot Charts on Accordions;308
22.3;Resizable and Draggable Charts;311
22.3.1;A Resizable Line Chart;311
22.3.2;Three Draggable Line Charts;313
22.4;Summary;316
23;Chapter 17: Handling Input Data;317
23.1;Using the JSON Format;317
23.1.1;The JSON Format;318
23.1.2;A Practical Case: The jqPlot Data Renderer;319
23.1.3;JSON and $.getJSON();321
23.2;Real-Time Charts;323
23.3;Summary;326
24;Chapter 18: Moving from jqPlot to Highcharts;327
24.1;The Highcharts Distribution;327
24.2;Similarities and Differences;329
24.3;Line Charts with Highcharts;331
24.3.1;Completing the Line Chart;332
24.3.2;Different Ways of Handling Input Data;334
24.3.3;The grid: Advanced Management;336
24.3.4;Customizing Tooltips with HTML;338
24.3.5;Customizing the Legend with HTML;339
24.3.6;Adding Bands;339
24.3.7;Customizing the Marker Points;341
24.3.8;The Themes of Highcharts;342
24.4;Reading Data from a File;343
24.4.1;Reading a CSV File Using $.get();343
24.4.2;Excluding CSV Columns from Your Data;348
24.5;Exporting the Chart;349
24.6;The Master Detail Chart;350
24.7;Bar and Pie Charts with Highcharts;357
24.7.1;Bar Charts;357
24.7.2;Pie Charts;360
24.8;Gantt Charts;362
24.9;Combined Charts;365
24.10;Highstock Library;369
24.11;Summary;370
25;Chapter 19: Working with D3;371
25.1;Introducing D3;372
25.2;Starting with a Blank HTML Page;372
25.3;Using Selections and Operators;373
25.3.1;Selections and Selectors;373
25.3.2;Operators;375
25.4;Creating New Elements;378
25.4.1;The html() Method;378
25.4.2;The append() Method;379
25.4.3;The insert(?) Method;382
25.5;Inserting Data into Elements;385
25.6;Applying Dynamic Properties;388
25.7;Adding SVG Elements;389
25.7.1;Creating an SVG Element;389
25.7.2;Transformations;391
25.7.3;Transitions;395
25.8;Summary;397
26;Chapter 20: Line Charts with D3;398
26.1;Developing a Line Chart with D3;398
26.1.1;Starting with the First Bricks;398
26.1.2;Scales, Domains, and Ranges;399
26.1.3;Inside the Code;400
26.1.4;Using Data with (x, y) Values;408
26.1.5;Controlling the Axes’ Range;411
26.1.6;Adding the Axis Arrows;412
26.1.7;Adding a Title and Axis Labels;414
26.2;Drawing a Line Chart from Data in a CSV File;415
26.2.1;Reading and Parsing Data;415
26.2.2;Implementing Axes and the Grid;416
26.2.3;Drawing Data with the csv() Function;420
26.2.4;Adding Marks to the Line;423
26.2.5;Line Charts with Filled Areas;426
26.3;Multiseries Line Charts;428
26.3.1;Working with Multiple Series of Data;428
26.3.2;Adding a Legend;434
26.3.3;Interpolating Lines;435
26.4;Difference Line Chart;437
26.5;Summary;445
27;Chapter 21: Bar Charts with D3;446
27.1;Drawing a Bar Chart;446
27.2;Drawing a Stacked Bar Chart;452
27.3;A Normalized Stacked Bar Chart;461
27.4;Drawing a Grouped Bar Chart;465
27.5;Horizontal Bar Chart with Negative Values;472
27.6;Summary;476
28;Chapter 22: Pie Charts with D3;477
28.1;The Basic Pie Charts;477
28.1.1;Drawing a Basic Pie Chart;478
28.1.2;Some Variations on Pie Charts;483
28.1.2.1;Working on Color Sequences;483
28.1.2.2;Sorting the Slices in a Pie Chart;484
28.1.2.3;Adding Spaces Between the Slices;485
28.1.2.4;Representing the Slices Only with Outlines;486
28.1.2.5;Mixing All of This;487
28.2;Donut Charts;488
28.3;Polar Area Diagrams;493
28.4;Summary;497
29;Chapter 23: Candlestick Charts with D3;498
29.1;Creating an OHLC Chart;498
29.2;Date Format;504
29.3;Box Representation in Candlestick Charts;506
29.4;Summary;507
30;Chapter 24: Scatterplot and Bubble Charts with D3;508
30.1;Scatterplot;508
30.2;Markers and Symbols;514
30.2.1;Using Symbols as Markers;514
30.2.2;Using Customized Markers;516
30.3;Adding More Functionalities;519
30.3.1;Trendlines;519
30.3.2;Clusters;524
30.3.2.1;K-Mean Algorithm;525
30.3.2.2;Applying the Cluster Analysis to the Scatterplot;528
30.4;Highlighting Data Points;532
30.5;Bubble Chart;536
30.6;Summary;538
31;Chapter 25: Radar Charts with D3;539
31.1;Radar Chart;539
31.1.1;Building Auto Scaling Axes;540
31.1.2;Adding Data to the Radar Chart;544
31.2;Improving Your Radar Chart;547
31.3;Summary;550
32;Chapter 26: Handling Live Data with D3;551
32.1;Real-Time Charts;551
32.2;Using PHP to Extract Data from a MySQL Table;557
32.2.1;Starting with a TSV File;558
32.2.2;Moving On to the Real Case;562
32.3;Summary;565
32.4;Conclusion;565
33;Appendix A: Guidelines for the Examples in the Book;566
33.1;Installing a Web Server;566
33.2;Installing Aptana Studio IDE;567
33.3;Setting the Aptana Studio Workspace;567
33.4;Creating a Project;568
33.5;Completing the Workspace;569
33.6;Filling the src Directory with the Libraries;570
33.7;Running the Examples;571
33.8;Summary;572
34;Appendix B: jqPlot Plug-ins;573
35;Index;575

Über Autor(innen)

Fabio Nelli, is an IT Scientific Application Specialist at IRBM Science Park, a private research center in Pomezia, Roma (Italy). He has beena computer consultant for many years at IBM, EDS, Merck Sharp, and Dohme, along with several banks and insurance companies.He has an Organic Chemistry degree and many years of experience in Information technologies and Automation systems applied to Life Sciences (Tech Specialist at Beckman Coulter Italy and Spain).He is currently developing Java applications that interface Oracle databases with scientific instrumentations generating data and web server applications providing analysis of the results to researchers in real time.