<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>
