mirror of https://github.com/masayuki0812/c3.git
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.
776 lines
24 KiB
776 lines
24 KiB
<!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-bbe380ed.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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</a> |
|
</div> |
|
|
|
<div class='large-4 columns'></div> |
|
</div> |
|
</div> |
|
</div> |
|
<footer> |
|
<hr> |
|
<p>© 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-5.4.0.min-e9c75f0e.js" type="text/javascript"></script> |
|
<script src="/js/c3.min-50d5fecd.js" type="text/javascript"></script> |
|
<script> |
|
hljs.initHighlightingOnLoad(); |
|
$(document).foundation(); |
|
</script> |
|
|
|
|
|
</body> |
|
</html>
|
|
|