playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Quite good looking graph derived from d3.js http://c3js.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
4 Commits
10 Branches
97 Tags
10 MiB
Tree: f0f117d4ea
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'f0f117d4ea'
${ noResults }
c3/examples.html

777 lines
24 KiB
Raw Normal View History Unescape

chore: update gh-pages [skip ci]
7 years ago
<!DOCTYPE html>
<html class='no-js'>
<head>
<meta charset='utf-8'>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<meta content='D3 based reusable chart library' name='description'>
<meta content='c3js.org' name='author'>
<meta content='width=device-width' name='viewport'>
<title>C3.js | D3-based reusable chart library</title>
<link href="/css/normalize-e465cb86.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/foundation.min-978d4ce8.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/tomorrow-d7cf0921.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/c3-57883d58.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/style-99fb8989.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/examples-da39a3ee.css" media="screen" rel="stylesheet" type="text/css" />
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-42896059-3', 'c3js.org');
ga('send', 'pageview');
</script>
<script src="/js/vendor/modernizr-2.6.1.min-68fdcc99.js" type="text/javascript"></script>
</head>
<body class='antialiased'>
<div class='sticky'>
<nav class='top-bar' data-options='sticky_on: large' data-topbar>
<ul class='title-area'>
<li class='name'>
<h1>
<a href='/'>C3.js | D3-based reusable chart library</a>
</h1>
</li>
<li class='toggle-topbar menu-icon'>
<a href='#'>
<span>Menu</span>
</a>
</li>
</ul>
<section class='top-bar-section'>
<ul class='right'>
<li class='has-form'>
<a class='button' href='/gettingstarted.html'>Getting Started</a>
</li>
<li class='divider'></li>
<li>
<a href='/examples.html'>Examples</a>
</li>
<li class='divider'></li>
<li>
<a href='/reference.html'>Reference</a>
</li>
<li class='divider'></li>
<li>
<a href='https://groups.google.com/forum/#!forum/c3js' target='_blank'>Forum</a>
</li>
<li class='divider'></li>
<li>
<a href='https://github.com/c3js/c3' target='_blank'>Source</a>
</li>
</ul>
</section>
</nav>
</div>
<div class='container'>
<div class='section'>
<a href='/examples.html#chart' name='chart'>
<h2>#
<span>Chart</span></h2>
</a>
<div>
<div class='row'>
<div class='large-4 columns'>
<h3>Line Chart</h3>
<p class='margin-small-bottom'>Line chart with sequential data.</p>
<a class='btn btn-default' href='/samples/simple_multiple.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Timeseries Chart</h3>
<p class='margin-small-bottom'>Simple line chart with timeseries data.</p>
<a class='btn btn-default' href='/samples/timeseries.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Spline Chart</h3>
<p class='margin-small-bottom'>Display as Spline Chart.</p>
<a class='btn btn-default' href='/samples/chart_spline.html' role='button'>View details &raquo;</a>
</div>
</div>
<div class='row'>
<div class='large-4 columns'>
<h3>Simple XY Line Chart</h3>
<p class='margin-small-bottom'>Simple line chart with custom x.</p>
<a class='btn btn-default' href='/samples/simple_xy.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Multiple XY Line Chart</h3>
<p class='margin-small-bottom'>Multiple line chart with multiple custom x.</p>
<a class='btn btn-default' href='/samples/simple_xy_multiple.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Line Chart with Regions</h3>
<p class='margin-small-bottom'>Set regions for each data with style.</p>
<a class='btn btn-default' href='/samples/simple_regions.html' role='button'>View details &raquo;</a>
</div>
</div>
<div class='row'>
<div class='large-4 columns'>
<h3>Step Chart</h3>
<p class='margin-small-bottom'>Display as Step Chart.</p>
<a class='btn btn-default' href='/samples/chart_step.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Area Chart</h3>
<p class='margin-small-bottom'>Display as Area Chart.</p>
<a class='btn btn-default' href='/samples/chart_area.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Stacked Area Chart</h3>
<p class='margin-small-bottom'>Display as Stacked Area Chart.</p>
<a class='btn btn-default' href='/samples/chart_area_stacked.html' role='button'>View details &raquo;</a>
</div>
</div>
<div class='row'>
<div class='large-4 columns'>
<h3>Bar Chart</h3>
<p class='margin-small-bottom'>Display as Bar Chart.</p>
<a class='btn btn-default' href='/samples/chart_bar.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Stacked Bar Chart</h3>
<p class='margin-small-bottom'>Display as Stacked Bar Chart.</p>
<a class='btn btn-default' href='/samples/chart_bar_stacked.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Scatter Plot</h3>
<p class='margin-small-bottom'>Display as Scatter Plot.</p>
<a class='btn btn-default' href='/samples/chart_scatter.html' role='button'>View details &raquo;</a>
</div>
</div>
<div class='row'>
<div class='large-4 columns'>
<h3>Pie Chart</h3>
<p class='margin-small-bottom'>Display as Pie Chart.</p>
<a class='btn btn-default' href='/samples/chart_pie.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Donut Chart</h3>
<p class='margin-small-bottom'>Display as Donut Chart.</p>
<a class='btn btn-default' href='/samples/chart_donut.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Gauge Chart</h3>
<p class='margin-small-bottom'>Display as Gauge Chart.</p>
<a class='btn btn-default' href='/samples/chart_gauge.html' role='button'>View details &raquo;</a>
</div>
</div>
<div class='row'>
<div class='large-4 columns'>
<h3>Combination Chart</h3>
<p class='margin-small-bottom'>Display all kinda charts up in here.</p>
<a class='btn btn-default' href='/samples/chart_combination.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'></div>
<div class='large-4 columns'></div>
</div>
</div>
</div>
<hr class='medium'>
<div class='section'>
<a href='/examples.html#axis' name='axis'>
<h2>#
<span>Axis</span></h2>
</a>
<div>
<div class='row'>
<div class='large-4 columns'>
<h3>Category Axis</h3>
<p class='margin-small-bottom'>Show ticks as categorized by each data.</p>
<a class='btn btn-default' href='/samples/categorized.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Rotated Axis</h3>
<p class='margin-small-bottom'>Switch x and y axis position.</p>
<a class='btn btn-default' href='/samples/axes_rotated.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Additional Y Axis</h3>
<p class='margin-small-bottom'>Additional y axis can be added.</p>
<a class='btn btn-default' href='/samples/axes_y2.html' role='button'>View details &raquo;</a>
</div>
</div>
<div class='row'>
<div class='large-4 columns'>
<h3>X Axis Tick Format</h3>
<p class='margin-small-bottom'>Format x axis tick text.</p>
<a class='btn btn-default' href='/samples/axes_x_tick_format.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>X Axis Tick Count</h3>
<p class='margin-small-bottom'>Set the number of ticks on X Axis.</p>
<a class='btn btn-default' href='/samples/axes_x_tick_count.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>X Axis Tick Values</h3>
<p class='margin-small-bottom'>Set tick texts on X Axis.</p>
<a class='btn btn-default' href='/samples/axes_x_tick_values.html' role='button'>View details &raquo;</a>
</div>
</div>
<div class='row'>
<div class='large-4 columns'>
<h3>X Axis Tick Culling</h3>
<p class='margin-small-bottom'>Set cull ticks or not on X Axis.</p>
<a class='btn btn-default' href='/samples/axes_x_tick_culling.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>X Axis Tick Fitting</h3>
<p class='margin-small-bottom'>Set ticks position to x of data.</p>
<a class='btn btn-default' href='/samples/axes_x_tick_fit.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>X Axis Timezone</h3>
<p class='margin-small-bottom'>Convert time to UTC.</p>
<a class='btn btn-default' href='/samples/axes_x_localtime.html' role='button'>View details &raquo;</a>
</div>
</div>
<div class='row'>
<div class='large-4 columns'>
<h3>Rotate X Axis Tick Text</h3>
<p class='margin-small-bottom'>Rotate x axis tick text.</p>
<a class='btn btn-default' href='/samples/axes_x_tick_rotate.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Y Axis Tick Format</h3>
<p class='margin-small-bottom'>Format y axis tick text.</p>
<a class='btn btn-default' href='/samples/axes_y_tick_format.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Padding for Y Axis</h3>
<p class='margin-small-bottom'>Set padding for y axis.</p>
<a class='btn btn-default' href='/samples/axes_y_padding.html' role='button'>View details &raquo;</a>
</div>
</div>
<div class='row'>
<div class='large-4 columns'>
<h3>Range for Y Axis</h3>
<p class='margin-small-bottom'>Set range for y axis.</p>
<a class='btn btn-default' href='/samples/axes_y_range.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Axis Label</h3>
<p class='margin-small-bottom'>Set label for axis.</p>
<a class='btn btn-default' href='/samples/axes_label.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Axis Label Position</h3>
<p class='margin-small-bottom'>Set axis label position.</p>
<a class='btn btn-default' href='/samples/axes_label_position.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'></div>
</div>
</div>
</div>
<hr class='medium'>
<div class='section'>
<a href='/examples.html#data' name='data'>
<h2>#
<span>Data</span></h2>
</a>
<div>
<div class='row'>
<div class='large-4 columns'>
<h3>Column Oriented Data</h3>
<p class='margin-small-bottom'>Column-oriented data can be used as input.</p>
<a class='btn btn-default' href='/samples/data_columned.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Row Oriented Data</h3>
<p class='margin-small-bottom'>Row-oriented data can be used as input.</p>
<a class='btn btn-default' href='/samples/data_rowed.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>JSON Data</h3>
<p class='margin-small-bottom'>JSON can be used as input.</p>
<a class='btn btn-default' href='/samples/data_json.html' role='button'>View details &raquo;</a>
</div>
</div>
<div class='row'>
<div class='large-4 columns'>
<h3>Data from URL</h3>
<p class='margin-small-bottom'>Data from URL can be used as input.</p>
<a class='btn btn-default' href='/samples/data_url.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Category Data</h3>
<p class='margin-small-bottom'>Load data with x values on category axis.</p>
<a class='btn btn-default' href='/samples/data_stringx.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Load Data</h3>
<p class='margin-small-bottom'>Load data dynamically.</p>
<a class='btn btn-default' href='/samples/data_load.html' role='button'>View details &raquo;</a>
</div>
</div>
<div class='row'>
<div class='large-4 columns'>
<h3>Data Name</h3>
<p class='margin-small-bottom'>Set name for each data.</p>
<a class='btn btn-default' href='/samples/data_name.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Data Color</h3>
<p class='margin-small-bottom'>Set color according to data.</p>
<a class='btn btn-default' href='/samples/data_color.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Data Order</h3>
<p class='margin-small-bottom'>Define data order. This will be used for stacked bar chart.</p>
<a class='btn btn-default' href='/samples/data_order.html' role='button'>View details &raquo;</a>
</div>
</div>
<div class='row'>
<div class='large-4 columns'>
<h3>Data Label</h3>
<p class='margin-small-bottom'>Show label of data.</p>
<a class='btn btn-default' href='/samples/data_label.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Data Label Format</h3>
<p class='margin-small-bottom'>Format label of data.</p>
<a class='btn btn-default' href='/samples/data_label_format.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Number Format Localization</h3>
<p class='margin-small-bottom'>Number format localization using D3 locale settings.</p>
<a class='btn btn-default' href='/samples/data_number_format_l10n.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'></div>
</div>
</div>
</div>
<hr class='medium'>
<div class='section'>
<a href='/examples.html#grid' name='grid'>
<h2>#
<span>Grid</span></h2>
</a>
<div>
<div class='row'>
<div class='large-4 columns'>
<h3>Grid Lines</h3>
<p class='margin-small-bottom'>Show grid lines for x and y axis.</p>
<a class='btn btn-default' href='/samples/options_gridline.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Optional X Grid Lines</h3>
<p class='margin-small-bottom'>Add optional grid lines on x grid.</p>
<a class='btn btn-default' href='/samples/grid_x_lines.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Optional Y Grid Lines</h3>
<p class='margin-small-bottom'>Add optional grid lines on y grid.</p>
<a class='btn btn-default' href='/samples/grid_y_lines.html' role='button'>View details &raquo;</a>
</div>
</div>
</div>
</div>
<hr class='medium'>
<div class='section'>
<a href='/examples.html#region' name='region'>
<h2>#
<span>Region</span></h2>
</a>
<div>
<div class='row'>
<div class='large-4 columns'>
<h3>Region</h3>
<p class='margin-small-bottom'>Show rects on chart.</p>
<a class='btn btn-default' href='/samples/region.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Region with Timeseries</h3>
<p class='margin-small-bottom'>Show rects on timeseries chart.</p>
<a class='btn btn-default' href='/samples/region_timeseries.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'></div>
</div>
</div>
</div>
<hr class='medium'>
<div class='section'>
<a href='/examples.html#interaction' name='interaction'>
<h2>#
<span>Interaction</span></h2>
</a>
<div>
<div class='row'>
<div class='large-4 columns'>
<h3>Sub Chart</h3>
<p class='margin-small-bottom'>Show sub chart for zoom and selection range.</p>
<a class='btn btn-default' href='/samples/options_subchart.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Zoom</h3>
<p class='margin-small-bottom'>Zoom by mouse wheel event and slide by drag.</p>
<a class='btn btn-default' href='/samples/interaction_zoom.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'></div>
</div>
</div>
</div>
<hr class='medium'>
<div class='section'>
<a href='/examples.html#legend' name='legend'>
<h2>#
<span>Legend</span></h2>
</a>
<div>
<div class='row'>
<div class='large-4 columns'>
<h3>Hide Legend</h3>
<p class='margin-small-bottom'>Set visibility of legend.</p>
<a class='btn btn-default' href='/samples/options_legend.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Legend Position</h3>
<p class='margin-small-bottom'>Show legend on bottom or right side.</p>
<a class='btn btn-default' href='/samples/legend_position.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Custom Legend</h3>
<p class='margin-small-bottom'>Build custom legend</p>
<a class='btn btn-default' href='/samples/legend_custom.html' role='button'>View details &raquo;</a>
</div>
</div>
</div>
</div>
<hr class='medium'>
<div class='section'>
<a href='/examples.html#tooltip' name='tooltip'>
<h2>#
<span>Tooltip</span></h2>
</a>
<div>
<div class='row'>
<div class='large-4 columns'>
<h3>Hide Tooltip</h3>
<p class='margin-small-bottom'>Set visibility of tooltip.</p>
<a class='btn btn-default' href='/samples/tooltip_show.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Tooltip Grouping</h3>
<p class='margin-small-bottom'>Show tooltips as grouped or not.</p>
<a class='btn btn-default' href='/samples/tooltip_grouped.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Tooltip Format</h3>
<p class='margin-small-bottom'>Set format for title and value on tooltip.</p>
<a class='btn btn-default' href='/samples/tooltip_format.html' role='button'>View details &raquo;</a>
</div>
</div>
</div>
</div>
<hr class='medium'>
<div class='section'>
<a href='/examples.html#chart_options' name='chart_options'>
<h2>#
<span>Chart Options</span></h2>
</a>
<div>
<div class='row'>
<div class='large-4 columns'>
<h3>Chart Size</h3>
<p class='margin-small-bottom'>Set chart size in px.</p>
<a class='btn btn-default' href='/samples/options_size.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Padding</h3>
<p class='margin-small-bottom'>Change padding for the chart.</p>
<a class='btn btn-default' href='/samples/options_padding.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Color Pattern</h3>
<p class='margin-small-bottom'>Set custom color pattern.</p>
<a class='btn btn-default' href='/samples/options_color.html' role='button'>View details &raquo;</a>
</div>
</div>
<div class='row'>
<div class='large-4 columns'>
<h3>Duration of Transition</h3>
<p class='margin-small-bottom'>Set duration of transition for chart animation.</p>
<a class='btn btn-default' href='/samples/transition_duration.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'></div>
<div class='large-4 columns'></div>
</div>
</div>
</div>
<hr class='medium'>
<div class='section'>
<a href='/examples.html#line_chart_options' name='line_chart_options'>
<h2>#
<span>Line Chart Options</span></h2>
</a>
<div>
<div class='row'>
<div class='large-4 columns'>
<h3>Hide points</h3>
<p class='margin-small-bottom'>Hide points on line chart</p>
<a class='btn btn-default' href='/samples/point_show.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'></div>
<div class='large-4 columns'></div>
</div>
</div>
</div>
<hr class='medium'>
<div class='section'>
<a href='/examples.html#pie_chart_options' name='pie_chart_options'>
<h2>#
<span>Pie Chart Options</span></h2>
</a>
<div>
<div class='row'>
<div class='large-4 columns'>
<h3>Pie Label Format</h3>
<p class='margin-small-bottom'>Change label format on Pie chart</p>
<a class='btn btn-default' href='/samples/pie_label_format.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'></div>
<div class='large-4 columns'></div>
</div>
</div>
</div>
<hr class='medium'>
<div class='section'>
<a href='/examples.html#api' name='api'>
<h2>#
<span>API</span></h2>
</a>
<div>
<div class='row'>
<div class='large-4 columns'>
<h3>Flow</h3>
<p class='margin-small-bottom'>Load/Unload data as flowing</p>
<a class='btn btn-default' href='/samples/api_flow.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Data Name</h3>
<p class='margin-small-bottom'>Update data names.</p>
<a class='btn btn-default' href='/samples/api_data_name.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Data Color</h3>
<p class='margin-small-bottom'>Update data colors.</p>
<a class='btn btn-default' href='/samples/api_data_color.html' role='button'>View details &raquo;</a>
</div>
</div>
<div class='row'>
<div class='large-4 columns'>
<h3>Axis Label</h3>
<p class='margin-small-bottom'>Update axis labels.</p>
<a class='btn btn-default' href='/samples/api_axis_label.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Axis Range</h3>
<p class='margin-small-bottom'>Update axis range.</p>
<a class='btn btn-default' href='/samples/api_axis_range.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Resize</h3>
<p class='margin-small-bottom'>Resize chart.</p>
<a class='btn btn-default' href='/samples/api_resize.html' role='button'>View details &raquo;</a>
</div>
</div>
<div class='row'>
<div class='large-4 columns'>
<h3>X Grid</h3>
<p class='margin-small-bottom'>Update custom x grids.</p>
<a class='btn btn-default' href='/samples/api_grid_x.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'></div>
<div class='large-4 columns'></div>
</div>
</div>
</div>
<hr class='medium'>
<div class='section'>
<a href='/examples.html#transform' name='transform'>
<h2>#
<span>Transform</span></h2>
</a>
<div>
<div class='row'>
<div class='large-4 columns'>
<h3>To Line Chart</h3>
<p class='margin-small-bottom'>Transform to line chart.</p>
<a class='btn btn-default' href='/samples/transform_line.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>To Spline Chart</h3>
<p class='margin-small-bottom'>Transform to spline chart.</p>
<a class='btn btn-default' href='/samples/transform_spline.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>To Bar Chart</h3>
<p class='margin-small-bottom'>Transform to bar chart.</p>
<a class='btn btn-default' href='/samples/transform_bar.html' role='button'>View details &raquo;</a>
</div>
</div>
<div class='row'>
<div class='large-4 columns'>
<h3>To Area Chart</h3>
<p class='margin-small-bottom'>Transform to area chart.</p>
<a class='btn btn-default' href='/samples/transform_area.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>To Area Spline Chart</h3>
<p class='margin-small-bottom'>Transform to area spline chart.</p>
<a class='btn btn-default' href='/samples/transform_areaspline.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>To Scatter Plot</h3>
<p class='margin-small-bottom'>Transform to scatter plot.</p>
<a class='btn btn-default' href='/samples/transform_scatter.html' role='button'>View details &raquo;</a>
</div>
</div>
<div class='row'>
<div class='large-4 columns'>
<h3>To Pie Chart</h3>
<p class='margin-small-bottom'>Transform to pie chart.</p>
<a class='btn btn-default' href='/samples/transform_pie.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>To Donut Chart</h3>
<p class='margin-small-bottom'>Transform to donut chart.</p>
<a class='btn btn-default' href='/samples/transform_donut.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'></div>
</div>
</div>
</div>
<hr class='medium'>
<div class='section'>
<a href='/examples.html#style' name='style'>
<h2>#
<span>Style</span></h2>
</a>
<div>
<div class='row'>
<div class='large-4 columns'>
<h3>Style for Region</h3>
<p class='margin-small-bottom'>Set style for regions.</p>
<a class='btn btn-default' href='/samples/style_region.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'>
<h3>Style for Grid</h3>
<p class='margin-small-bottom'>Set style for grids.</p>
<a class='btn btn-default' href='/samples/style_grid.html' role='button'>View details &raquo;</a>
</div>
<div class='large-4 columns'></div>
</div>
</div>
</div>
<footer>
<hr>
<p>&copy Masayuki Tanaka 2014</p>
</footer>
</div>
<script src="/js/jquery-1.11.0.min-910066fb.js" type="text/javascript"></script>
<script src="/js/foundation.min-1dfe8110.js" type="text/javascript"></script>
<script src="/js/highlight.pack-4af5004d.js" type="text/javascript"></script>
<script src="/js/d3-4.13.0.min-1190977b.js" type="text/javascript"></script>
chore: update gh-pages [skip ci]
7 years ago
<script src="/js/c3.min-01c2aef0.js" type="text/javascript"></script>
chore: update gh-pages [skip ci]
7 years ago
<script>
hljs.initHighlightingOnLoad();
$(document).foundation();
</script>
</body>
</html>