2
0

index.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502
  1. <html>
  2. <head>
  3. <link href="./css/bootstrap.min.css" rel="stylesheet">
  4. <link href="./css/index.css" rel="stylesheet">
  5. </head>
  6. <body>
  7. <div class="container">
  8. <div class="section">
  9. <h2># <span>Chart Type</span></h2>
  10. <div>
  11. <div class="row">
  12. <div class="col-md-4">
  13. <h3>Line Chart</h3>
  14. <a href="./samples/simple.html">
  15. Line chart with ordinary data
  16. </a>
  17. <a href="./samples/chart_spline.html">
  18. Spline chart with ordinary data
  19. </a>
  20. <a href="./samples/chart_step.html">
  21. Step chart with ordinary data
  22. </a>
  23. </div>
  24. <div class="col-md-4">
  25. <h3>Area Chart</h3>
  26. <a href="./samples/chart_area.html">
  27. Area chart with ordinary data
  28. </a>
  29. <a href="./samples/chart_area_spline.html">
  30. Area-spline chart with ordinary data
  31. </a>
  32. <a href="./samples/chart_area_step.html">
  33. Area-step chart with ordinary data
  34. </a>
  35. <a href="./samples/chart_area_stacked.html">
  36. Stacked Area chart with ordinary data
  37. </a>
  38. <a href="./samples/chart_area_spline_stacked.html">
  39. Stacked Area-spline chart with ordinary data
  40. </a>
  41. <a href="./samples/chart_area_step_stacked.html">
  42. Stacked Area-step chart with ordinary data
  43. </a>
  44. </div>
  45. <div class="col-md-4">
  46. <h3>Bar Chart</h3>
  47. <a href="./samples/chart_bar_space.html">
  48. Bar chart with spaces
  49. </a>
  50. <a href="./samples/chart_bar.html">
  51. Bar chart with ordinary data
  52. </a>
  53. <a href="./samples/chart_bar_stacked.html">
  54. Stacked Bar chart with ordinary data
  55. </a>
  56. <a href="./samples/chart_bar_max_width.html">
  57. Bar chart with max width
  58. </a>
  59. </div>
  60. </div>
  61. <div class="row">
  62. <div class="col-md-4">
  63. <h3>Pie Chart</h3>
  64. <a href="./samples/chart_pie.html">
  65. Pie chart with ordinary data
  66. </a>
  67. <a href="./samples/chart_pie_sort.html">
  68. Pie chart with/without sort
  69. </a>
  70. </div>
  71. <div class="col-md-4">
  72. <h3>Donut Chart</h3>
  73. <a href="./samples/chart_donut.html">
  74. Donut chart with ordinary data
  75. </a>
  76. </div>
  77. <div class="col-md-4">
  78. <h3>Gauge Chart</h3>
  79. <a href="./samples/chart_gauge.html">
  80. Gauge chart with ordinary data
  81. </a>
  82. <a href="./samples/chart_multi_arc_gauge.html">
  83. Gauge chart with multiple arcs
  84. </a>
  85. </div>
  86. </div>
  87. <div class="row">
  88. <div class="col-md-4">
  89. <h3>Scatter Chart</h3>
  90. <a href="./samples/chart_scatter.html">
  91. Scatter chart with ordinary data
  92. </a>
  93. </div>
  94. <div class="col-md-4">
  95. <h3>Combination Chart</h3>
  96. <a href="./samples/chart_combination.html">
  97. Combination chart with ordinary data
  98. </a>
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  103. <div class="section">
  104. <h2># <span>Axes</span></h2>
  105. <div>
  106. <div class="row">
  107. <div class="col-md-4">
  108. <h3>Timeseries Axis</h3>
  109. <a href="./samples/timeseries.html">
  110. Line chart with timeseries data
  111. </a>
  112. <a href="./samples/timeseries_descendent.html">
  113. Line chart with descendent timeseries data
  114. </a>
  115. <a href="./samples/timeseries_raw.html">
  116. Line chart with timeseries data as Number
  117. </a>
  118. <a href="./samples/timeseries_date.html">
  119. Line chart with timeseries data as Date object
  120. </a>
  121. </div>
  122. <div class="col-md-4">
  123. <h3>Category Axis</h3>
  124. <a href="./samples/categorized.html">
  125. Chart with category axis
  126. </a>
  127. <a href="./samples/custom_x_categorized.html">
  128. Chart with category data on category axis
  129. </a>
  130. <a href="./samples/different_category_datasets.html">
  131. Chart with different category datasets
  132. </a>
  133. </div>
  134. <div class="col-md-4">
  135. <h3>Additional Axis</h3>
  136. <a href="./samples/axes_y2.html">
  137. Add y2 axis
  138. </a>
  139. </div>
  140. </div>
  141. <div class="row">
  142. <div class="col-md-4">
  143. <h3>Axis Range</h3>
  144. <a href="./samples/axes_range.html">
  145. Set range of axis
  146. </a>
  147. </div>
  148. <div class="col-md-4">
  149. <h3>Axis Padding</h3>
  150. <a href="./samples/axes_padding.html">
  151. Set padding of axis
  152. </a>
  153. </div>
  154. <div class="col-md-4">
  155. <h3>X Axis Tick</h3>
  156. <a href="./samples/axes_x_tick_values.html">
  157. Set values for x axis
  158. </a>
  159. <a href="./samples/axes_x_tick_culling.html">
  160. Set culling for x axis
  161. </a>
  162. <a href="./samples/axes_x_tick_fit.html">
  163. Set fitting for x axis
  164. </a>
  165. <a href="./samples/axes_x_tick_rotate.html">
  166. Set rotation for x axis
  167. </a>
  168. <a href="./samples/axes_x_range_timeseries.html">
  169. Set range in timeseries for x axis
  170. </a>
  171. </div>
  172. </div>
  173. <div class="row">
  174. <div class="col-md-4">
  175. <h3>Default Y Domain</h3>
  176. <a href="./samples/axes_y_default.html">
  177. Set default y domain
  178. </a>
  179. </div>
  180. <div class="col-md-4">
  181. <h3>Y Domain</h3>
  182. <a href="./samples/domain_y.html">
  183. Update y domain automatically
  184. </a>
  185. </div>
  186. <div class="col-md-4">
  187. <h3>Default X Selection</h3>
  188. <a href="./samples/axes_x_selection.html">
  189. Set default x selection
  190. </a>
  191. </div>
  192. </div>
  193. </div>
  194. </div>
  195. <div class="section">
  196. <h2># <span>Data</span></h2>
  197. <div>
  198. <div class="row">
  199. <div class="col-md-4">
  200. <h3>Input Data</h3>
  201. <a href="./samples/data_columned.html">
  202. Columned data
  203. </a>
  204. <a href="./samples/data_rowed.html">
  205. Rowed data
  206. </a>
  207. <a href="./samples/data_json.html">
  208. JSON data
  209. </a>
  210. <a href="./samples/data_url.html">
  211. Data from URL
  212. </a>
  213. <a href="./samples/data_hide.html">
  214. Hide data when init
  215. </a>
  216. </div>
  217. <div class="col-md-4">
  218. <h3>Load Data</h3>
  219. <a href="./samples/data_load.html">
  220. Load ordinary data
  221. </a>
  222. <a href="./samples/data_load_timeseries.html">
  223. Load timeseries data
  224. </a>
  225. </div>
  226. <div class="col-md-4">
  227. <h3>Custom X</h3>
  228. <a href="./samples/custom_x_scale.html">
  229. Custom x for all data
  230. </a>
  231. <a href="./samples/custom_xs_scale.html">
  232. Custom x for each data
  233. </a>
  234. </div>
  235. </div>
  236. <div class="row">
  237. <div class="col-md-4">
  238. <h3>Data Label</h3>
  239. <a href="./samples/data_label.html">
  240. Show label on data
  241. </a>
  242. <a href="./samples/data_label_format.html">
  243. Show label on data with format
  244. </a>
  245. </div>
  246. <div class="col-md-4">
  247. <h3>Data Region</h3>
  248. <a href="./samples/data_region.html">
  249. Set region of data
  250. </a>
  251. <a href="./samples/data_region_timeseries.html">
  252. Set region of timeseries data
  253. </a>
  254. </div>
  255. </div>
  256. </div>
  257. </div>
  258. <div class="section">
  259. <h2># <span>Components</span></h2>
  260. <div>
  261. <div class="row">
  262. <div class="col-md-4">
  263. <h3>Grid</h3>
  264. <a href="./samples/grids.html">
  265. Show x/y grids
  266. </a>
  267. <a href="./samples/grids_timeseries.html">
  268. Show x/y grids with timeseries
  269. </a>
  270. <a href="./samples/grid_x_lines.html">
  271. Show optional x grids
  272. </a>
  273. <a href="./samples/grid_x_lines_timeseries.html">
  274. Show optional x grids with timeseries
  275. </a>
  276. <a href="./samples/grid_focus.html">
  277. Hide focus grid
  278. </a>
  279. </div>
  280. <div class="col-md-4">
  281. <h3>Region</h3>
  282. <a href="./samples/regions.html">
  283. Show regions
  284. </a>
  285. <a href="./samples/regions_timeseries.html">
  286. Show regions with timeseries
  287. </a>
  288. </div>
  289. <div class="col-md-4">
  290. <h3>Legend</h3>
  291. <a href="./samples/legend.html">
  292. Show legend
  293. </a>
  294. </div>
  295. </div>
  296. <div class="row">
  297. <div class="col-md-4">
  298. <h3>Tooltip</h3>
  299. <a href="./samples/tooltip_show.html">
  300. Show tooltip
  301. </a>
  302. <a href="./samples/tooltip_grouped.html">
  303. Show tooltip as each data
  304. </a>
  305. </div>
  306. </div>
  307. </div>
  308. </div>
  309. <div class="section">
  310. <h2># <span>Chart Option</span></h2>
  311. <div>
  312. <div class="row">
  313. <div class="col-md-4">
  314. <h3>Bind</h3>
  315. <a href="./samples/bindto.html">
  316. Specify the element binded
  317. </a>
  318. </div>
  319. <div class="col-md-4">
  320. <h3>Padding</h3>
  321. <a href="./samples/padding.html">
  322. Change padding of chart
  323. </a>
  324. <a href="./samples/padding_update.html">
  325. Auto padding when chart updated
  326. </a>
  327. </div>
  328. <div class="col-md-4">
  329. <h3>Empty Data</h3>
  330. <a href="./samples/emptydata.html">
  331. Show text when empty data
  332. </a>
  333. </div>
  334. </div>
  335. <div class="row">
  336. <div class="col-md-4">
  337. <h3>Point</h3>
  338. <a href="./samples/point_r.html">
  339. Change radius of data point
  340. </a>
  341. <a href="./samples/point_show.html">
  342. Show points based on condition
  343. </a>
  344. </div>
  345. <div class="col-md-4">
  346. <h3>Bar</h3>
  347. <a href="./samples/bar_zerobased.html">
  348. Disable zero-based y domain
  349. </a>
  350. </div>
  351. <div class="col-md-4">
  352. <h3>Area</h3>
  353. <a href="./samples/area_zerobased.html">
  354. Disable zero-based y domain
  355. </a>
  356. </div>
  357. </div>
  358. </div>
  359. </div>
  360. <div class="section">
  361. <h2># <span>Interaction</span></h2>
  362. <div>
  363. <div class="row">
  364. <div class="col-md-4">
  365. <h3>Zoom</h3>
  366. <a href="./samples/zoom.html">
  367. Enable zoom
  368. </a>
  369. <a href="./samples/zoom_category.html">
  370. Zoom on category axis
  371. </a>
  372. <a href="./samples/zoom_reduction.html">
  373. Zoom with reduction
  374. </a>
  375. <a href="./samples/zoom_onzoom.html">
  376. Callback on zoom
  377. </a>
  378. </div>
  379. <div class="col-md-4">
  380. <h3>Subchart</h3>
  381. <a href="./samples/subchart.html">
  382. Show subchart
  383. </a>
  384. <a href="./samples/subchart_onbrush.html">
  385. Callback on brush
  386. </a>
  387. </div>
  388. <div class="col-md-4">
  389. <h3>Selection</h3>
  390. <a href="./samples/selection.html">
  391. Select data
  392. </a>
  393. </div>
  394. </div>
  395. <div class="row">
  396. <div class="col-md-4">
  397. <h3>Disable Interaction</h3>
  398. <a href="./samples/interaction_enabled.html">
  399. Disable interaction
  400. </a>
  401. </div>
  402. </div>
  403. </div>
  404. </div>
  405. <div class="section">
  406. <h2># <span>API</span></h2>
  407. <div>
  408. <div class="row">
  409. <div class="col-md-4">
  410. <h3>Flow</h3>
  411. <a href="./samples/api_flow.html">
  412. Flow ordinary data
  413. </a>
  414. <a href="./samples/api_flow_timeseries.html">
  415. Flow timeseries data
  416. </a>
  417. </div>
  418. <div class="col-md-4">
  419. <h3>Axis</h3>
  420. <a href="./samples/api_axis_range.html">
  421. Update axis range
  422. </a>
  423. <a href="./samples/api_axis_label.html">
  424. Update axis label
  425. </a>
  426. </div>
  427. <div class="col-md-4">
  428. <h3>Grid</h3>
  429. <a href="./samples/api_xgrid_lines.html">
  430. Update x grid lines
  431. </a>
  432. <a href="./samples/api_ygrid_lines.html">
  433. Update y grid lines
  434. </a>
  435. </div>
  436. </div>
  437. <div class="row">
  438. <div class="col-md-4">
  439. <h3>Legend</h3>
  440. <a href="./samples/api_legend.html">
  441. Update legend
  442. </a>
  443. </div>
  444. <div class="col-md-4">
  445. <h3>Transform</h3>
  446. <a href="./samples/api_transform.html">
  447. Transform chart
  448. </a>
  449. </div>
  450. <div class="col-md-4">
  451. <h3>Element</h3>
  452. <a href="./samples/element.html">
  453. Access svg element of chart
  454. </a>
  455. </div>
  456. </div>
  457. <div class="row">
  458. <div class="col-md-4">
  459. <h3>Data</h3>
  460. <a href="./samples/api_data_colors.html">
  461. Update data color
  462. </a>
  463. </div>
  464. <div class="col-md-4">
  465. <h3>Tooltip</h3>
  466. <a href="./samples/api_tooltip_show.html">
  467. Show tooltip programmatically
  468. </a>
  469. </div>
  470. <div class="col-md-4">
  471. <h3>Zoom</h3>
  472. <a href="./samples/api_zoom.html">
  473. Zoom programmatically
  474. </a>
  475. </div>
  476. </div>
  477. </div>
  478. </div>
  479. <div class="section">
  480. <h2># <span>Other Library</span></h2>
  481. <div>
  482. <div class="row">
  483. <div class="col-md-4">
  484. <h3>RequireJS</h3>
  485. <a href="./samples/requirejs.html">
  486. Load by RequireJS
  487. </a>
  488. </div>
  489. </div>
  490. </div>
  491. </div>
  492. </div>
  493. </body>
  494. </html>