ClemensKim - kyj909

hightchart 참고 도서 [Learning Highcharts] 본문

IT/Script

hightchart 참고 도서 [Learning Highcharts]

kyj909 2013. 7. 12. 15:04

음... 뭐 그럭저럭 볼만하다. 지금 버전에 비해 낮은버전으로 설명하였지만. 그정도로도 충분.


Learning Highcharts

Table of Contents
Preface 1
Chapter 1: Web Charts 7
A short history of web charting 7
HTML image map (server-side technology) 8
Java applet (client side) and servlet (server side) 9
Adobe Shockwave Flash (client side) 11
The uprising of JavaScript and HTML5 12
HTML5 (SVG and canvas) 12
SVG (Scalable Vector Graphics) 12
Canvas 14
JavaScript charts on the market 15
jqPlot 15
amCharts 16
Ext JS 4 Charts 16
YUI 3 Charts 16
FusionCharts 17
JS Charts 17
Flot and Flotr 17
Why Highcharts? 18
Highcharts and JavaScript frameworks 18
Presentation 19
License 20
Simple API model 20
Documentations 20
Openness (feature request with user voice) 21
Highcharts – a quick tutorial 22
Directories structure 22
Summary 30
Chapter 2: Highcharts Configurations 31
Configuration structure 31
Understanding Highcharts layouts 32
Chart margins and spacings 35
Chart label properties 36
Title and subtitle alignments 38
Legend alignment 39
Axis title alignment 39
Credits alignment 40
Experimenting with the automatic layout 41
Experimenting with the fixed layout 43
Framing the chart with axes 45
Accessing the axis data type 45
Adjusting intervals and background 48
Using plot lines and plot bands 53
Extending to multiple axes 56
Revisiting the series configuration 61
Exploring PlotOptions 63
Styling the tooltips 68
Formatting the tooltips in HTML 69
Using the callback handler 70
Applying a multiple series tooltip 71
Animating charts 72
Expanding colors with gradients 74
Summary 78
Chapter 3: Line, Area, and Scatter Charts 79
Introducing line charts 79
Extending to multiple series line charts 82
Sketching an area chart 86
Mixing line and area series 90
Simulating a projection chart 90
Contrasting spline with step line 92
Extending to a stacked area chart 93
Plotting charts with missing data 96
Combining scatter and area series 98
Polishing a chart with an artistic style 100
Summary 104
Chapter 4: Bar and Column Charts 105
Introducing column charts 106
Overlapped column chart 108
Stacking and grouping a column chart 109
Mixing the stacked and single columns 111
Comparing the columns in stacked percentages 112
Adjusting column colors and data labels 113
Introducing bar charts 116
Giving the bar chart a simpler look 118
Constructing a mirror chart 120
Extending to a stacked mirror chart 124
Converting a single bar chart into a horizontal gauge chart 126
Sticking the charts together 128
Summary 130
Chapter 5: Pie Charts 131
Understanding the relationship of chart, pie, and series 131
Plotting simple pie charts – single series 132
Configuring the pie with sliced off sections 133
Applying a legend to a pie chart 136
Plotting multiple pies in a chart – multiple series 137
Preparing a donut chart – multiple series 139
Building a chart with multiple series types 142
Summary 146
Chapter 6: Gauge, Polar, and Range Charts 147
Loading gauge, polar, and range charts 147
Plotting a speedometer gauge chart 148
Plotting a twin dials chart – a Fiat 500 speedometer 148
Plotting a gauge chart pane 149
Setting pane backgrounds 150
Managing axes with different scales 152
Extending to multiple panes 153
Gauge series – dial and pivot 156
Polishing the chart with fonts and colors 158
Converting a spline chart to a polar/radar chart 160
Plotting range charts with market index data 164
Using a radial gradient on a gauge chart 167
Summary 171
Chapter 7: Highcharts APIs 173
Understanding the Highcharts class model 174
Highcharts constructor – Highcharts.Chart 175
Navigating through Highcharts components 176
Using object hierarchy 176
Using the Chart.get method 177
Using the object hierarchy and Chart.get method 177
Using Highcharts APIs 177
Chart configurations 179
Getting data in Ajax and displaying new series with Chart.addSeries 180
Displaying multiple series with simultaneous Ajax calls 184
Extracting SVG data with Chart.getSVG 186
Selecting data points and adding plot lines 191
Using Axis.getExtremes and Axis.addPlotLine 192
Using Chart.getSelectedPoints and Chart.renderer methods 193
Exploring the series update 194
Continuous series update 196
Running the experiment 198
Applying a new set of data with Series.setData 199
Using Series.remove and Chart.addSeries to reinsert series with new data 201
Updating data points with Point.update 203
Removing and adding data points with Point.remove and Series.addPoint 206
Exploring SVG animations performance on browsers 209
Comparing Highcharts' performance on large datasets 211
Summary 213
Chapter 8: Highcharts Events 215
Introducing Highcharts events 216
Portfolio history example 217
Top-level chart 219
Constructing the series configuration for a top-level chart 220
Launching an Ajax query with the chart load event 221
Activating the user interface with the chart redraw event 222
Selecting and unselecting a data point with the point select and unselect events 222
Zooming the selected area with the chart selection event 223
Detail chart 226
Constructing the series configuration for the detail chart 227
Hovering over a data point with the mouseOver and mouseOut point events 228
Applying the chart click event 229
Changing the mouse cursor over plot lines with mouseover event 235
Setting up a plot line action with the click event 235
Stocks' growth chart example 237
Plot averaging series from displayed stocks series 238
Launching a dialog with the series click event 243
Launching a pie chart with the series checkboxClick event 244
Editing the pie chart's slice with the point click, update, and
remove events 246
Summary 248
Chapter 9: Highcharts and jQuery Mobile 249
A short introduction of jQuery Mobile 249
Understanding a mobile page structure 250
Understanding page initialization 252
Linking between mobile pages 256
Highcharts in touch screen environments 258
Integrating Highcharts and jQuery Mobile using an Olympic
medals table application 258
Loading up the gold medals page 259
Detecting device properties 260
Plotting a Highcharts chart on mobile device 261
Switching graph options with the jQuery Mobile dialog box 266
Changing the graph presentation with a swipeleft motion event 269
Switching graph orientation with the orientationchange event 271
Drilling down for data with the point click event 273
Building a dynamic content dialog with the point click event 275
Applying the gesturechange (pinch actions) event to a pie chart 277
Summary 280
Chapter 10: Highcharts and Ext JS 281
Short introduction to Sencha Ext JS 281
A quick tour of Ext JS components 283
Implementing and loading Ext JS code 283
Creating and accessing Ext JS components 284
Using layout and viewport 285
Panel 286
GridPanel 287
FormPanel 287
TabPanel 287
Window 288
Ajax 288
Store and JsonStore 289
Example of using JsonStore and GridPanel 289
The Highcharts extension 291
Step 1 – removing some of the Highcharts options 291
Step 2 – converting to Highcharts extension configuration 292
Step 3 – constructing a series option by mapping the JsonStore
data model 293
Step 4 – creating the Highcharts extension 293
Passing series specific options in the Highcharts extension 295
Converting a data model into a Highcharts series 295
X-axis category data and y-axis numerical values 295
Numerical values for both x and y axes 296
Performing pre-processing from store data 297
Plotting pie charts 298
Plotting donut charts 299
Module APIs 300
addSeries 301
removeSerie and removeAllSeries 301
setTitle and setSubTitle 301
draw 302
Event handling and export modules 302
Extending the example with Highcharts 302
Displaying a context menu by clicking on a data point 309
A commercially Rich Internet Application with Highcharts – AppQoS 311
Summary 313
Chapter 11: Running Highcharts on the Server Side 315
Running Highcharts on the server side 316
Highcharts on the server side 316
Using Xvfb and web browsers (Unix solution) 317
Setting up a Highcharts export example on the client side 317
Installing Xvfb and a web browser 320
Starting up the Xvfb server 321
Applying server-side change 322
Running the server task 322
Rhino and Batik (Java solution) 323
Node.js/Node and Node-Highcharts (JavaScript solution) 324
Installing Node and modules 324
Setting up the Node server 325
Running the Node-Highcharts module 325
Starting the Node server and issuing a URL query 327
PhantomJS (headless webkit) 327
Preparing the series data script 328
Preparing the PhantomJS script 328
Comparison between the approaches 331
Summary 332
Index 333

'IT > Script' 카테고리의 다른 글

웹 차트 (web chart)  (0) 2013.07.22
hightchart 참고 정리  (0) 2013.07.12
hightchart [하이차트] 이번에는 hightchat 를 하게 됐음-리얼타임 샘플  (0) 2013.07.12
NVD3 charts  (0) 2013.05.10
Flot 차트 샘플 관련  (0) 2013.04.11
Comments