playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Update index.html for samples

pull/329/head
Masayuki Tanaka 11 years ago
parent
3c2a4c834c
commit
916074d342
9 changed files with 334 additions and 94 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      htdocs/css/index.css
  2. 367
      htdocs/index.html
  3. 0
      htdocs/samples/chart_donut.html
  4. 0
      htdocs/samples/chart_gauge.html
  5. 0
      htdocs/samples/chart_pie.html
  6. 0
      htdocs/samples/chart_scatter.html
  7. 40
      htdocs/samples/chart_xy.html
  8. 9
      htdocs/samples/custom_x_scale.html
  9. 0
      htdocs/samples/data_region_timeseries.html

12
htdocs/css/index.css
Unescape View File

@ -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;
}

367
htdocs/index.html
Unescape View File

@ -1,134 +1,393 @@
<html> <html>
<head> <head>
<link href="./css/bootstrap.min.css" rel="stylesheet"> <link href="./css/bootstrap.min.css" rel="stylesheet">
<link href="./css/index.css" rel="stylesheet">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="section"> <div class="section">
<a href="#basic" name="basic"><h2># <span>Basic</span></h2></a> <h2># <span>Chart Type</span></h2>
<div> <div>
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<h3>Simple Line Chart</h3> <h3>Line Chart</h3>
<p>Simple line chart for getting started.</p> <a href="./samples/simple.html" target="_blank">
<p><a class="btn btn-default" href="./samples/simple.html" role="button">View details &raquo;</a></p> Line chart with ordinary data
</a>
<a href="./samples/chart_spline.html" target="_blank">
Spline chart with ordinary data
</a>
<a href="./samples/chart_step.html" target="_blank">
Step chart with ordinary data
</a>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<h3>Multiple Line Chart</h3> <h3>Area Chart</h3>
<p>Multiple line chart with multiple data.</p> <a href="./samples/chart_area.html" target="_blank">
<p><a class="btn btn-default" href="./samples/simple_multiple.html" role="button">View details &raquo;</a></p> Area chart with ordinary data
</a>
<a class="btn btn-danger" href="./samples/chart_area_spline.html" target="_blank">
Area-spline chart with ordinary data
</a>
<a class="btn btn-danger" href="./samples/chart_area_step.html" target="_blank">
Area-step chart with ordinary data
</a>
</div>
<div class="col-md-4">
<h3>Bar Chart</h3>
<a href="./samples/chart_bar.html" target="_blank">
Bar chart with ordinary data
</a>
<a href="./samples/chart_bar_stacked.html" target="_blank">
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" target="_blank">
Pie chart with ordinary data
</a>
</div>
<div class="col-md-4">
<h3>Donut Chart</h3>
<a href="./samples/chart_donut.html" target="_blank">
Donut chart with ordinary data
</a>
</div>
<div class="col-md-4">
<h3>Gauge Chart</h3>
<a href="./samples/chart_gauge.html" target="_blank">
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" target="_blank">
Pie chart with ordinary data
</a>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<h3>Timeseries Chart</h3> <h3>Combination Chart</h3>
<p>Simple line chart with timeseries data.</p> <a href="./samples/chart_combination.html" target="_blank">
<p><a class="btn btn-default" href="./samples/timeseries.html" role="button">View details &raquo;</a></p> Combination chart with ordinary data
</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div class="section">
<a href="#axes" name="axes"><h2># <span>Axes</span></h2></a> <h2># <span>Axes</span></h2>
<div> <div>
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<h3>Categorized Axis</h3> <h3>Timeseries Axis</h3>
<p>Axis with ticks categorizing each data.</p> <a href="./samples/timeseries.html" target="_blank">
<p><a class="btn btn-default" href="./samples/categorized.html" role="button">View details &raquo;</a></p> Line chart with timeseries data
</a>
<a href="./samples/timeseries_descendent.html" target="_blank">
Line chart with descendent timeseries data
</a>
<a href="./samples/timeseries_raw.html" target="_blank">
Line chart with timeseries data as Number
</a>
<a href="./samples/timeseries_date.html" target="_blank">
Line chart with timeseries data as Date object
</a>
</div>
<div class="col-md-4">
<h3>Category Axis</h3>
<a href="./samples/categorized.html" target="_blank">
Chart with category axis
</a>
<a href="./samples/custom_x_categorized.html" target="_blank">
Chart with category data on category axis
</a>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<h3>Additional Axis</h3> <h3>Additional Axis</h3>
<p>Additional y axis can be added.</p> <a href="./samples/axes_y2.html" target="_blank">
<p><a class="btn btn-default" href="./samples/axes_y2.html" role="button">View details &raquo;</a></p> Add y2 axis
</a>
</div> </div>
</div>
<div class="row">
<div class="col-md-4"> <div class="col-md-4">
<h3>Specify Axis Min/Max Values</h3> <h3>Axis Range</h3>
<p>You can specify your own min/max values for each axis.</p> <a href="./samples/axes_range.html" target="_blank">
<p><a class="btn btn-default" href="./samples/axes_minmax.html" role="button">View details &raquo;</a></p> Set range of axis
</a>
</div> </div>
<div class="col-md-4">
<h3>Axis Padding</h3>
<a href="./samples/axes_padding.html" target="_blank">
Set padding of axis
</a>
</div>
<div class="col-md-4">
<h3>X Axis Tick</h3>
<a href="./samples/axes_x_tick_culling.html" target="_blank">
Set culling for x axis
</a>
<a href="./samples/axes_x_tick_fit.html" target="_blank">
Set fitting for x axis
</a>
<a href="./samples/axes_x_tick_rotate.html" target="_blank">
Set rotation for x axis
</a>
</div> </div>
</div> </div>
<div class="row">
<div class="col-md-4">
<h3>Y Domain</h3>
<a href="./samples/domain_y.html" target="_blank">
Update y domain automatically
</a>
</div>
</div> </div>
</div>
</div>
<div class="section"> <div class="section">
<a href="#data" name="data"><h2># <span>Data</span></h2></a> <h2># <span>Data</span></h2>
<div> <div>
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<h3>Column Oriented Data</h3> <h3>Input Data</h3>
<p>Column-oriented data can be used as input.</p> <a href="./samples/data_columned.html" target="_blank">
<p><a class="btn btn-default" href="./samples/data_columned.html" role="button">View details &raquo;</a></p> Columned data
</a>
<a href="./samples/data_rowed.html" target="_blank">
Rowed data
</a>
<a href="./samples/data_json.html" target="_blank">
JSON data
</a>
<a href="./samples/data_url.html" target="_blank">
Data from URL
</a>
<a href="./samples/data_hide.html" target="_blank">
Hide data when init
</a>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<h3>Row Oriented Data</h3> <h3>Load Data</h3>
<p>Row-oriented data can be used as input.</p> <a href="./samples/data_load.html" target="_blank">
<p><a class="btn btn-default" href="./samples/data_rowed.html" role="button">View details &raquo;</a></p> Load ordinary data
</a>
<a href="./samples/data_load_timeseries.html" target="_blank">
Load timeseries data
</a>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<h3>Data from URL</h3> <h3>Custom X</h3>
<p>Data from URL can be used as input.</p> <a href="./samples/custom_x_scale.html" target="_blank">
<p><a class="btn btn-default" href="./samples/data_url.html" role="button">View details &raquo;</a></p> Custom x for all data
</a>
<a href="./samples/custom_xs_scale.html" target="_blank">
Custom x for each data
</a>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<h3>Load Data</h3> <h3>Data Label</h3>
<p>Load data dynamically.</p> <a href="./samples/data_label.html" target="_blank">
<p><a class="btn btn-default" href="./samples/data_load.html" role="button">View details &raquo;</a></p> Show label on data
</a>
<a href="./samples/data_label_format.html" target="_blank">
Show label on data with format
</a>
</div>
<div class="col-md-4">
<h3>Data Region</h3>
<a href="./samples/data_region.html" target="_blank">
Set region of data
</a>
<a href="./samples/data_region_timeseries.html" target="_blank">
Set region of timeseries data
</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div class="section">
<a href="#chart_type" name="chart_type"><h2># <span>Chart Type</span></h2></a> <h2># <span>Components</span></h2>
<div> <div>
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<h3>Bar Chart</h3> <h3>Grid</h3>
<p>Display as Bar Chart</p> <a href="./samples/grids.html" target="_blank">
<p><a class="btn btn-default" href="./samples/chart_bar.html" role="button">View details &raquo;</a></p> Show x/y grids
</a>
<a href="./samples/grids_timeseries.html" target="_blank">
Show x/y grids with timeseries&raquo;
</a>
<a href="./samples/grid_x_lines.html" target="_blank">
Show optional x grids
</a>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<h3>Stacked Bar Chart</h3> <h3>Region</h3>
<p>Display as Stacked Bar Chart</p> <a href="./samples/region.html" target="_blank">
<p><a class="btn btn-default" href="./samples/chart_bar_stacked.html" role="button">View details &raquo;</a></p> Show regions
</a>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<h3>Spline Chart</h3> <h3>Legend</h3>
<p>Display as Spline Chart</p> <a href="./samples/legend.html" target="_blank">
<p><a class="btn btn-default" href="./samples/chart_spline.html" role="button">View details &raquo;</a></p> Show legend
</a>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<h3>Area Chart</h3> <h3>Tooltip</h3>
<p>Display as Filled Area Chart</p> <a href="./samples/tooltip_show.html" target="_blank">
<p><a class="btn btn-default" href="./samples/chart_area.html" role="button">View details &raquo;</a></p> Show tooltip
</a>
<a href="./samples/tooltip_grouped.html" target="_blank">
Show tooltip as each data
</a>
</div> </div>
</div>
</div>
</div>
<div class="section">
<h2># <span>Chart Option</span></h2>
<div>
<div class="row">
<div class="col-md-4"> <div class="col-md-4">
<h3>Combination Chart</h3> <h3>Bind</h3>
<p>Display as Bar Chart</p> <a href="./samples/bindto.html" target="_blank">
<p><a class="btn btn-default" href="./samples/chart_combination.html" role="button">View details &raquo;</a></p> Specify the element binded
</a>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<h3>Arc Gauge</h3> <h3>Padding</h3>
<p>Display as Arc Gauge</p> <a href="./samples/padding.html" target="_blank">
<p><a class="btn btn-default" href="./samples/chart_arc_gauge.html" role="button">View details &raquo;</a></p> Change padding of chart
</a>
<a href="./samples/padding_update.html" target="_blank">
Auto padding when chart updated
</a>
</div> </div>
<div class="col-md-4">
<h3>Empty Data</h3>
<a href="./samples/emptydata.html" target="_blank">
Show text when empty data
</a>
</div> </div>
</div> </div>
<div class="row">
<div class="col-md-4">
<h3>Point</h3>
<a href="./samples/point_r.html" target="_blank">
Change radius of data point
</a>
</div> </div>
</div>
</div>
</div>
<div class="section"> <div class="section">
<a href="#interaction" name="interaction"><h2># <span>Interaction</span></h2></a> <h2># <span>Interaction</span></h2>
<div> <div>
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<h3>Zoom</h3> <h3>Zoom</h3>
<p>Zoom by mouse wheel event and slide by drag.</p> <a href="./samples/zoom.html" target="_blank">
<p><a class="btn btn-default" href="./samples/interaction_zoom.html" role="button">View details &raquo;</a></p> Enable zoom
</a>
<a href="./samples/zoom_reduction.html" target="_blank">
Zoom with reduction
</a>
</div>
<div class="col-md-4">
<h3>Selection</h3>
<a href="./samples/selection.html" target="_blank">
Select data
</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" target="_blank">
Flow ordinary data
</a>
<a href="./samples/api_flow_timeseries.html" target="_blank">
Flow timeseries data
</a>
</div>
<div class="col-md-4">
<h3>Axis</h3>
<a href="./samples/api_axis_range.html" target="_blank">
Update axis range
</a>
<a href="./samples/api_axis_label.html" target="_blank">
Update axis label
</a>
</div>
<div class="col-md-4">
<h3>grid</h3>
<a href="./samples/api_xgrid_lines.html" target="_blank">
Update x grid lines
</a>
<a href="./samples/api_ygrid_lines.html" target="_blank">
Update y grid lines
</a>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h3>Legend</h3>
<a href="./samples/api_legend.html" target="_blank">
Update legend
</a>
</div>
<div class="col-md-4">
<h3>Transform</h3>
<a href="./samples/api_transform.html" target="_blank">
Transform chart
</a>
</div>
<div class="col-md-4">
<h3>Element</h3>
<a href="./samples/element.html" target="_blank">
Access svg element of chart
</a>
</div>
</div> </div>
</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" target="_blank">
Load by RequireJS
</a>
</div>
</div>
</div> </div>
</div> </div>
</div>
</body> </body>
</html> </html>

0
htdocs/samples/donut.html → htdocs/samples/chart_donut.html
Unescape View File

0
htdocs/samples/chart_arc_gauge.html → htdocs/samples/chart_gauge.html
Unescape View File

0
htdocs/samples/pie.html → htdocs/samples/chart_pie.html
Unescape View File

0
htdocs/samples/scatter.html → htdocs/samples/chart_scatter.html
Unescape View File

40
htdocs/samples/chart_xy.html
Unescape View File

@ -1,40 +0,0 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.min.js"></script>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
columns: [
['x', 30, 40, 100, 200, 250, 350],
['sample', 30, 200, 100, 400, 150, 250]
]
}
});
setTimeout(function () {
chart.load({
columns: [
['sample', 100, 300, 200, 300, 150, 300]
]
})
}, 1000);
setTimeout(function () {
chart.load({
columns: [
['x', 130, 140, 200, 300, 450, 550],
['sample', 200, 350, 100, 200, 50, 100]
]
})
}, 1500);
</script>
</body>
</html>

9
htdocs/samples/custom_x_scale.html
Unescape View File

@ -45,6 +45,15 @@
}); });
}, 3000); }, 3000);
setTimeout(function () {
chart.load({
columns: [
['x', 130, 140, 200, 300, 450, 550],
['sample', 200, 350, 100, 200, 50, 100]
]
})
}, 4000);
</script> </script>
</body> </body>
</html> </html>

0
htdocs/samples/timeseries_region.html → htdocs/samples/data_region_timeseries.html
Unescape View File

Write Preview
Loading…
Cancel
Save