diff --git a/htdocs/css/index.css b/htdocs/css/index.css new file mode 100644 index 0000000..f38c901 --- /dev/null +++ b/htdocs/css/index.css @@ -0,0 +1,12 @@ +.row { + margin-left: 8px; +} +.row a { + display: block; + text-align: left; + font-size: 1.2em; + line-height: 1.8; +} +.row h3 { + color: #777; +} \ No newline at end of file diff --git a/htdocs/index.html b/htdocs/index.html index e75bf57..6ff72e8 100644 --- a/htdocs/index.html +++ b/htdocs/index.html @@ -1,134 +1,393 @@ +
-

# Basic

 +

# Chart Type

-

Simple Line Chart

-

Simple line chart for getting started.

-

View details »

+

Line Chart

+ + Line chart with ordinary data + + + Spline chart with ordinary data + + + Step chart with ordinary data +
-

Multiple Line Chart

-

Multiple line chart with multiple data.

-

View details »

+

Area Chart

+ + Area chart with ordinary data + + + Area-spline chart with ordinary data + + + Area-step chart with ordinary data + +
+
+

Bar Chart

+ + Bar chart with ordinary data + + + Stacked Bar chart with ordinary data + +
+
+
+
+

Pie Chart

+ + Pie chart with ordinary data + +
+
+

Donut Chart

+ + Donut chart with ordinary data + +
+
+

Gauge Chart

+ + Gauge chart with ordinary data + +
+
+
+
+

Scatter Chart

+ + Pie chart with ordinary data +
-

Timeseries Chart

-

Simple line chart with timeseries data.

-

View details »

+

Combination Chart

+ + Combination chart with ordinary data +
+
-

# Axes

 +

# Axes

-

Categorized Axis

-

Axis with ticks categorizing each data.

-

View details »

+

Timeseries Axis

+ + Line chart with timeseries data + + + Line chart with descendent timeseries data + + + Line chart with timeseries data as Number + + + Line chart with timeseries data as Date object + +
+
+

Category Axis

+ + Chart with category axis + + + Chart with category data on category axis +

Additional Axis

-

Additional y axis can be added.

-

View details »

+ + Add y2 axis +
+
+
-

Specify Axis Min/Max Values

-

You can specify your own min/max values for each axis.

-

View details »

+

Axis Range

+ + Set range of axis + +
+
+

Axis Padding

+ + Set padding of axis + +
+
+

X Axis Tick

+ + Set culling for x axis + + + Set fitting for x axis + + + Set rotation for x axis + +
+
+
+
+

Y Domain

+ + Update y domain automatically +
+
-

# Data

 +

# Data

-

Column Oriented Data

-

Column-oriented data can be used as input.

-

View details »

+

Input Data

+ + Columned data + + + Rowed data + + + JSON data + + + Data from URL + + + Hide data when init +
-

Row Oriented Data

-

Row-oriented data can be used as input.

-

View details »

+

Load Data

+ + Load ordinary data + + + Load timeseries data +
-

Data from URL

-

Data from URL can be used as input.

-

View details »

+

Custom X

+ + Custom x for all data + + + Custom x for each data +
-

Load Data

-

Load data dynamically.

-

View details »

+

Data Label

+ + Show label on data + + + Show label on data with format + +
+
+

Data Region

+ + Set region of data + + + Set region of timeseries data +
+
-

# Chart Type

 +

# Components

-

Bar Chart

-

Display as Bar Chart

-

View details »

+

Grid

+ + Show x/y grids + + + Show x/y grids with timeseries» + + + Show optional x grids +
-

Stacked Bar Chart

-

Display as Stacked Bar Chart

-

View details »

+

Region

+ + Show regions +
-

Spline Chart

-

Display as Spline Chart

-

View details »

+

Legend

+ + Show legend +
-

Area Chart

-

Display as Filled Area Chart

-

View details »

+

Tooltip

+ + Show tooltip + + + Show tooltip as each data +
+
+
+
+ +
+

# Chart Option

+
+
-

Combination Chart

-

Display as Bar Chart

-

View details »

+

Bind

+ + Specify the element binded +
-

Arc Gauge

-

Display as Arc Gauge

-

View details »

+

Padding

+ + Change padding of chart + + + Auto padding when chart updated + +
+
+

Empty Data

+ + Show text when empty data + +
+
+
+
+

Point

+ + Change radius of data point +
+
-

# Interaction

 +

# Interaction

Zoom

-

Zoom by mouse wheel event and slide by drag.

-

View details »

+ + Enable zoom + + + Zoom with reduction + +
+
+

Selection

+ + Select data + +
+
+
+
+ +
+

# API

+
+
+
+

Flow

+ + Flow ordinary data + + + Flow timeseries data + +
+
+

Axis

+ + Update axis range + + + Update axis label + +
+
+

grid

+ + Update x grid lines + + + Update y grid lines + +
+
+
+
+

Legend

+ + Update legend + +
+
+

Transform

+ + Transform chart + +
+
+

Element

+ + Access svg element of chart +
+
+
+

# Other Library

+
+
+
+

RequireJS

+ + Load by RequireJS + +
+
+
+
diff --git a/htdocs/samples/donut.html b/htdocs/samples/chart_donut.html similarity index 100% rename from htdocs/samples/donut.html rename to htdocs/samples/chart_donut.html diff --git a/htdocs/samples/chart_arc_gauge.html b/htdocs/samples/chart_gauge.html similarity index 100% rename from htdocs/samples/chart_arc_gauge.html rename to htdocs/samples/chart_gauge.html diff --git a/htdocs/samples/pie.html b/htdocs/samples/chart_pie.html similarity index 100% rename from htdocs/samples/pie.html rename to htdocs/samples/chart_pie.html diff --git a/htdocs/samples/scatter.html b/htdocs/samples/chart_scatter.html similarity index 100% rename from htdocs/samples/scatter.html rename to htdocs/samples/chart_scatter.html diff --git a/htdocs/samples/chart_xy.html b/htdocs/samples/chart_xy.html deleted file mode 100644 index 8895167..0000000 --- a/htdocs/samples/chart_xy.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - - -
- - - - - - diff --git a/htdocs/samples/custom_x_scale.html b/htdocs/samples/custom_x_scale.html index dbff9a7..7945ee8 100644 --- a/htdocs/samples/custom_x_scale.html +++ b/htdocs/samples/custom_x_scale.html @@ -45,6 +45,15 @@ }); }, 3000); + setTimeout(function () { + chart.load({ + columns: [ + ['x', 130, 140, 200, 300, 450, 550], + ['sample', 200, 350, 100, 200, 50, 100] + ] + }) + }, 4000); + diff --git a/htdocs/samples/timeseries_region.html b/htdocs/samples/data_region_timeseries.html similarity index 100% rename from htdocs/samples/timeseries_region.html rename to htdocs/samples/data_region_timeseries.html