123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502 |
- <html>
- <head>
- <link href="./css/bootstrap.min.css" rel="stylesheet">
- <link href="./css/index.css" rel="stylesheet">
- </head>
- <body>
- <div class="container">
- <div class="section">
- <h2># <span>Chart Type</span></h2>
- <div>
- <div class="row">
- <div class="col-md-4">
- <h3>Line Chart</h3>
- <a href="./samples/simple.html">
- Line chart with ordinary data
- </a>
- <a href="./samples/chart_spline.html">
- Spline chart with ordinary data
- </a>
- <a href="./samples/chart_step.html">
- Step chart with ordinary data
- </a>
- </div>
- <div class="col-md-4">
- <h3>Area Chart</h3>
- <a href="./samples/chart_area.html">
- Area chart with ordinary data
- </a>
- <a href="./samples/chart_area_spline.html">
- Area-spline chart with ordinary data
- </a>
- <a href="./samples/chart_area_step.html">
- Area-step chart with ordinary data
- </a>
- <a href="./samples/chart_area_stacked.html">
- Stacked Area chart with ordinary data
- </a>
- <a href="./samples/chart_area_spline_stacked.html">
- Stacked Area-spline chart with ordinary data
- </a>
- <a href="./samples/chart_area_step_stacked.html">
- Stacked Area-step chart with ordinary data
- </a>
- </div>
- <div class="col-md-4">
- <h3>Bar Chart</h3>
- <a href="./samples/chart_bar_space.html">
- Bar chart with spaces
- </a>
- <a href="./samples/chart_bar.html">
- Bar chart with ordinary data
- </a>
- <a href="./samples/chart_bar_stacked.html">
- Stacked Bar chart with ordinary data
- </a>
- <a href="./samples/chart_bar_max_width.html">
- Bar chart with max width
- </a>
- </div>
- </div>
- <div class="row">
- <div class="col-md-4">
- <h3>Pie Chart</h3>
- <a href="./samples/chart_pie.html">
- Pie chart with ordinary data
- </a>
- <a href="./samples/chart_pie_sort.html">
- Pie chart with/without sort
- </a>
- </div>
- <div class="col-md-4">
- <h3>Donut Chart</h3>
- <a href="./samples/chart_donut.html">
- Donut chart with ordinary data
- </a>
- </div>
- <div class="col-md-4">
- <h3>Gauge Chart</h3>
- <a href="./samples/chart_gauge.html">
- Gauge chart with ordinary data
- </a>
- <a href="./samples/chart_multi_arc_gauge.html">
- Gauge chart with multiple arcs
- </a>
- </div>
- </div>
- <div class="row">
- <div class="col-md-4">
- <h3>Scatter Chart</h3>
- <a href="./samples/chart_scatter.html">
- Scatter chart with ordinary data
- </a>
- </div>
- <div class="col-md-4">
- <h3>Combination Chart</h3>
- <a href="./samples/chart_combination.html">
- Combination chart with ordinary data
- </a>
- </div>
- </div>
- </div>
- </div>
- <div class="section">
- <h2># <span>Axes</span></h2>
- <div>
- <div class="row">
- <div class="col-md-4">
- <h3>Timeseries Axis</h3>
- <a href="./samples/timeseries.html">
- Line chart with timeseries data
- </a>
- <a href="./samples/timeseries_descendent.html">
- Line chart with descendent timeseries data
- </a>
- <a href="./samples/timeseries_raw.html">
- Line chart with timeseries data as Number
- </a>
- <a href="./samples/timeseries_date.html">
- Line chart with timeseries data as Date object
- </a>
- </div>
- <div class="col-md-4">
- <h3>Category Axis</h3>
- <a href="./samples/categorized.html">
- Chart with category axis
- </a>
- <a href="./samples/custom_x_categorized.html">
- Chart with category data on category axis
- </a>
- <a href="./samples/different_category_datasets.html">
- Chart with different category datasets
- </a>
- </div>
- <div class="col-md-4">
- <h3>Additional Axis</h3>
- <a href="./samples/axes_y2.html">
- Add y2 axis
- </a>
- </div>
- </div>
- <div class="row">
- <div class="col-md-4">
- <h3>Axis Range</h3>
- <a href="./samples/axes_range.html">
- Set range of axis
- </a>
- </div>
- <div class="col-md-4">
- <h3>Axis Padding</h3>
- <a href="./samples/axes_padding.html">
- Set padding of axis
- </a>
- </div>
- <div class="col-md-4">
- <h3>X Axis Tick</h3>
- <a href="./samples/axes_x_tick_values.html">
- Set values for x axis
- </a>
- <a href="./samples/axes_x_tick_culling.html">
- Set culling for x axis
- </a>
- <a href="./samples/axes_x_tick_fit.html">
- Set fitting for x axis
- </a>
- <a href="./samples/axes_x_tick_rotate.html">
- Set rotation for x axis
- </a>
- <a href="./samples/axes_x_range_timeseries.html">
- Set range in timeseries for x axis
- </a>
- </div>
- </div>
- <div class="row">
- <div class="col-md-4">
- <h3>Default Y Domain</h3>
- <a href="./samples/axes_y_default.html">
- Set default y domain
- </a>
- </div>
- <div class="col-md-4">
- <h3>Y Domain</h3>
- <a href="./samples/domain_y.html">
- Update y domain automatically
- </a>
- </div>
- <div class="col-md-4">
- <h3>Default X Selection</h3>
- <a href="./samples/axes_x_selection.html">
- Set default x selection
- </a>
- </div>
- </div>
- </div>
- </div>
- <div class="section">
- <h2># <span>Data</span></h2>
- <div>
- <div class="row">
- <div class="col-md-4">
- <h3>Input Data</h3>
- <a href="./samples/data_columned.html">
- Columned data
- </a>
- <a href="./samples/data_rowed.html">
- Rowed data
- </a>
- <a href="./samples/data_json.html">
- JSON data
- </a>
- <a href="./samples/data_url.html">
- Data from URL
- </a>
- <a href="./samples/data_hide.html">
- Hide data when init
- </a>
- </div>
- <div class="col-md-4">
- <h3>Load Data</h3>
- <a href="./samples/data_load.html">
- Load ordinary data
- </a>
- <a href="./samples/data_load_timeseries.html">
- Load timeseries data
- </a>
- </div>
- <div class="col-md-4">
- <h3>Custom X</h3>
- <a href="./samples/custom_x_scale.html">
- Custom x for all data
- </a>
- <a href="./samples/custom_xs_scale.html">
- Custom x for each data
- </a>
- </div>
- </div>
- <div class="row">
- <div class="col-md-4">
- <h3>Data Label</h3>
- <a href="./samples/data_label.html">
- Show label on data
- </a>
- <a href="./samples/data_label_format.html">
- Show label on data with format
- </a>
- </div>
- <div class="col-md-4">
- <h3>Data Region</h3>
- <a href="./samples/data_region.html">
- Set region of data
- </a>
- <a href="./samples/data_region_timeseries.html">
- Set region of timeseries data
- </a>
- </div>
- </div>
- </div>
- </div>
- <div class="section">
- <h2># <span>Components</span></h2>
- <div>
- <div class="row">
- <div class="col-md-4">
- <h3>Grid</h3>
- <a href="./samples/grids.html">
- Show x/y grids
- </a>
- <a href="./samples/grids_timeseries.html">
- Show x/y grids with timeseries
- </a>
- <a href="./samples/grid_x_lines.html">
- Show optional x grids
- </a>
- <a href="./samples/grid_x_lines_timeseries.html">
- Show optional x grids with timeseries
- </a>
- <a href="./samples/grid_focus.html">
- Hide focus grid
- </a>
- </div>
- <div class="col-md-4">
- <h3>Region</h3>
- <a href="./samples/regions.html">
- Show regions
- </a>
- <a href="./samples/regions_timeseries.html">
- Show regions with timeseries
- </a>
- </div>
- <div class="col-md-4">
- <h3>Legend</h3>
- <a href="./samples/legend.html">
- Show legend
- </a>
- </div>
- </div>
- <div class="row">
- <div class="col-md-4">
- <h3>Tooltip</h3>
- <a href="./samples/tooltip_show.html">
- Show tooltip
- </a>
- <a href="./samples/tooltip_grouped.html">
- Show tooltip as each data
- </a>
- </div>
- </div>
- </div>
- </div>
- <div class="section">
- <h2># <span>Chart Option</span></h2>
- <div>
- <div class="row">
- <div class="col-md-4">
- <h3>Bind</h3>
- <a href="./samples/bindto.html">
- Specify the element binded
- </a>
- </div>
- <div class="col-md-4">
- <h3>Padding</h3>
- <a href="./samples/padding.html">
- Change padding of chart
- </a>
- <a href="./samples/padding_update.html">
- Auto padding when chart updated
- </a>
- </div>
- <div class="col-md-4">
- <h3>Empty Data</h3>
- <a href="./samples/emptydata.html">
- Show text when empty data
- </a>
- </div>
- </div>
- <div class="row">
- <div class="col-md-4">
- <h3>Point</h3>
- <a href="./samples/point_r.html">
- Change radius of data point
- </a>
- <a href="./samples/point_show.html">
- Show points based on condition
- </a>
- </div>
- <div class="col-md-4">
- <h3>Bar</h3>
- <a href="./samples/bar_zerobased.html">
- Disable zero-based y domain
- </a>
- </div>
- <div class="col-md-4">
- <h3>Area</h3>
- <a href="./samples/area_zerobased.html">
- Disable zero-based y domain
- </a>
- </div>
- </div>
- </div>
- </div>
- <div class="section">
- <h2># <span>Interaction</span></h2>
- <div>
- <div class="row">
- <div class="col-md-4">
- <h3>Zoom</h3>
- <a href="./samples/zoom.html">
- Enable zoom
- </a>
- <a href="./samples/zoom_category.html">
- Zoom on category axis
- </a>
- <a href="./samples/zoom_reduction.html">
- Zoom with reduction
- </a>
- <a href="./samples/zoom_onzoom.html">
- Callback on zoom
- </a>
- </div>
- <div class="col-md-4">
- <h3>Subchart</h3>
- <a href="./samples/subchart.html">
- Show subchart
- </a>
- <a href="./samples/subchart_onbrush.html">
- Callback on brush
- </a>
- </div>
- <div class="col-md-4">
- <h3>Selection</h3>
- <a href="./samples/selection.html">
- Select data
- </a>
- </div>
- </div>
- <div class="row">
- <div class="col-md-4">
- <h3>Disable Interaction</h3>
- <a href="./samples/interaction_enabled.html">
- Disable interaction
- </a>
- </div>
- </div>
- </div>
- </div>
- <div class="section">
- <h2># <span>API</span></h2>
- <div>
- <div class="row">
- <div class="col-md-4">
- <h3>Flow</h3>
- <a href="./samples/api_flow.html">
- Flow ordinary data
- </a>
- <a href="./samples/api_flow_timeseries.html">
- Flow timeseries data
- </a>
- </div>
- <div class="col-md-4">
- <h3>Axis</h3>
- <a href="./samples/api_axis_range.html">
- Update axis range
- </a>
- <a href="./samples/api_axis_label.html">
- Update axis label
- </a>
- </div>
- <div class="col-md-4">
- <h3>Grid</h3>
- <a href="./samples/api_xgrid_lines.html">
- Update x grid lines
- </a>
- <a href="./samples/api_ygrid_lines.html">
- Update y grid lines
- </a>
- </div>
- </div>
- <div class="row">
- <div class="col-md-4">
- <h3>Legend</h3>
- <a href="./samples/api_legend.html">
- Update legend
- </a>
- </div>
- <div class="col-md-4">
- <h3>Transform</h3>
- <a href="./samples/api_transform.html">
- Transform chart
- </a>
- </div>
- <div class="col-md-4">
- <h3>Element</h3>
- <a href="./samples/element.html">
- Access svg element of chart
- </a>
- </div>
- </div>
- <div class="row">
- <div class="col-md-4">
- <h3>Data</h3>
- <a href="./samples/api_data_colors.html">
- Update data color
- </a>
- </div>
- <div class="col-md-4">
- <h3>Tooltip</h3>
- <a href="./samples/api_tooltip_show.html">
- Show tooltip programmatically
- </a>
- </div>
- <div class="col-md-4">
- <h3>Zoom</h3>
- <a href="./samples/api_zoom.html">
- Zoom programmatically
- </a>
- </div>
- </div>
- </div>
- </div>
- <div class="section">
- <h2># <span>Other Library</span></h2>
- <div>
- <div class="row">
- <div class="col-md-4">
- <h3>RequireJS</h3>
- <a href="./samples/requirejs.html">
- Load by RequireJS
- </a>
- </div>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
|