<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.html"> Bar chart with ordinary data </a> <a href="./samples/chart_bar_stacked.html"> Stacked Bar chart with ordinary data </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> </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> </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 Extent</h3> <a href="./samples/axes_x_extent.html"> Set default x extent </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> </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.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> </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>