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