JoeKuan's public fiddles
-
Chapter 2: Using Plot Lines and Plot Bands (1)
add highest and lowest plotlines
-
Chapter 2: Adjusting Intervals and Background (5)
fix the x-axis data labels and first data point touching the y-axis line
-
Chapter 2: Adjusting Intervals and Background (4)
same as previous graph and apply the same setting to the x-axis
-
Chapter 2: Adjusting Intervals and Background (3)
draw a line on the y-axis with line width of 2 and add some measurement marks along the interval lines
-
Chapter 2: Adjusting Intervals and Background (2)
add striping effect and shading to the intervals and change the interval lines a similar range with the stripes
-
Chapter 2: Adjusting Intervals and Background (1)
assign the tickInterval value to 10 with semi-interval in unit of 5 with dashed & dotted style
-
Chapter 2: Accessing Axis Data Type (2)
Time as numerical value as 'datetime' data type in x-axis
-
Chapter 2: Accessing Axis Data Type (1)
Time as string in categories in x-axis
-
Chapter 2: Credits Alignment (2)
adjustment to the credits alignment
-
Chapter 2: Credits Alignment (1)
move the credits to the bottom left of the chart
-
Chapter 2: Axis Title Alignment
Y-axis title horizontal aligned at the top
-
Chapter 2:
4 different indices on 4 axes
-
Chapter 6: Mood Swing Detector (5)
Same radial gradient size, use fx and fx to move the radial focal point from the pivot
-
Chapter 6: Mood Swing Detector (4)
Same radial gradient size, use fx and fy feature to move the radial gradient starting point from bottom.
-
Chapter 6: Mood Swing Detector (3)
Radial gradient radius is half of the gauge and locates at the bottom of the chart. Gradient starts from 15% of the radial radius and finishes at 85% position.
-
Chapter 6: Mood Swing Detector (2)
Radial gradient starts generally from the center towards the edge of the gauge
-
Chapter 6: Mood Swing Detector (1)
No radial gradient - Ugly
-
Chapter 6: Range chart of market index (unsorted fields)
Convert series data in market index chart into range series: High & Low -> Column range and UNSORTED Open & Close -> arearange
-
Chapter 6: Range chart of market index (sorted fields)
Convert series data in market index chart into range series: High & Low -> Column range and SORTED Open & Close -> arearange
-
Chapter 6: Spider chart of web browsers statistic
Change polar presentation into spider chart with adjustment in axes, also includes plotband to demonstrate what it looks like in polar coordinates.