CityApper
/
tinydatacenter
mirror de https://github.com/harlanji/tinydatacenter


			
				
					
						
						
							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>