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

Deploy c3js/c3 to github.com/c3js/c3.git:gh-pages

gh-pages
Deployment Bot (from Travis CI) 6 years ago
parent
b124032b93
commit
3d06ac90c4
3 changed files with 212 additions and 0 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. 11
      js/samples/interaction_zoom_by_drag-74ebccde.js
  2. 54
      reference.html
  3. 147
      samples/interaction_zoom_by_drag.html

11
js/samples/interaction_zoom_by_drag-74ebccde.js
Unescape View File

@ -0,0 +1,11 @@
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40]
]
},
zoom: {
enabled: true,
type: 'drag',
}
});

54
reference.html
Unescape View File

@ -734,6 +734,12 @@
</li> </li>
<li>
<a href='#zoom-type'>zoom.type</a>
<span class="secondary label">Experimental</span>
</li>
<li> <li>
<a href='#zoom-rescale'>zoom.rescale</a> <a href='#zoom-rescale'>zoom.rescale</a>
<span class="secondary label">Experimental</span> <span class="secondary label">Experimental</span>
@ -764,6 +770,12 @@
</li> </li>
<li>
<a href='#zoom-disableDefaultBehavior'>zoom.disableDefaultBehavior</a>
<span class="secondary label">Experimental</span>
</li>
<li>Point</li> <li>Point</li>
<li> <li>
<a href='#point-show'>point.show</a> <a href='#point-show'>point.show</a>
@ -4322,6 +4334,29 @@ bindto: d3.select('#myContainer')</code></pre>
<hr> <hr>
<section> <section>
<h3> <h3>
<a href='#zoom-type'>zoom.type</a>
<span class="secondary label">Experimental</span>
</h3>
<p>There are two types of zoom behavior: 'scroll' and 'drag'</p>
<h5>Default:</h5>
<code>'scroll'</code>
<h5>Format:</h5>
<div class='sourcecode'>
<pre><code class='html javascript'>zoom: {
&nbsp;&nbsp;type: 'drag'
}</code></pre>
</div>
<h5>Example:</h5>
<ul>
<li>
<a href='/samples/interaction_zoom_by_drag.html'>Zoom by Drag</a>
</li>
</ul>
</section>
<hr>
<section>
<h3>
<a href='#zoom-rescale'>zoom.rescale</a> <a href='#zoom-rescale'>zoom.rescale</a>
<span class="secondary label">Experimental</span> <span class="secondary label">Experimental</span>
@ -4415,6 +4450,25 @@ bindto: d3.select('#myContainer')</code></pre>
<hr> <hr>
<section> <section>
<h3> <h3>
<a href='#zoom-disableDefaultBehavior'>zoom.disableDefaultBehavior</a>
<span class="secondary label">Experimental</span>
</h3>
<p>Disable the default animation of zoom. This option is useful when you want to get the zoomed domain by onzoom or onzoomend handlers and override the default animation behavior. See <a href="https://github.com/c3js/c3/pull/2439">#2439</a> for details.</p>
<h5>Default:</h5>
<code>false</code>
<h5>Format:</h5>
<div class='sourcecode'>
<pre><code class='html javascript'>zoom: {
&nbsp;&nbsp;enabled: true,
&nbsp;&nbsp;disableDefaultBehavior: true,
&nbsp;&nbsp;onzoomend: d => console.log(d)
}</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<a href='#point-show'>point.show</a> <a href='#point-show'>point.show</a>
</h3> </h3>

147
samples/interaction_zoom_by_drag.html
Unescape View File

@ -0,0 +1,147 @@
<!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-86d3c277.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/style-99fb8989.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/samples/interaction_zoom_by_drag.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'>
<h1 class='title'>Zoom by Drag</h1>
<div class='chart'>
<div id='chart'></div>
</div>
<div id='ace-error'></div>
<div class='sourcecode margin-medium-v margin-small-h'>
<h3># interaction_zoom_by_drag.js</h3>
<div class='c3-editor' id='javascript-editor'>
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40]
]
},
zoom: {
enabled: true,
type: 'drag',
}
});
</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-5.4.0.min-e9c75f0e.js" type="text/javascript"></script>
<script src="/js/c3.min-7672b626.js" type="text/javascript"></script>
<script>
hljs.initHighlightingOnLoad();
$(document).foundation();
</script>
<script src="/js/ace/ace.js" type="text/javascript"></script>
<script src="/js/ace/mode-javascript.js" type="text/javascript"></script>
<script src="/js/ace/theme-tomorrow.js" type="text/javascript"></script>
<script>
var editor = ace.edit('javascript-editor'),
error = document.getElementById('ace-error');
function debounce(func, wait) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
func.apply(context, args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
};
editor.on('change', debounce(function(e) {
try {
eval(editor.getValue());
error.innerHTML = '';
}
catch(e) {
error.innerHTML = e;
}
}, 300));
editor.setOption("maxLines", 100);
editor.setOption("showLineNumbers", false);
editor.setOption("showGutter", false);
editor.setTheme("ace/theme/tomorrow");
editor.getSession().setMode("ace/mode/javascript");
editor.commands.removeCommand('gotoline') // Disables the override of Command-L
</script>
<script src="/js/samples/interaction_zoom_by_drag-74ebccde.js" type="text/javascript"></script>
</body>
</html>
Write Preview
Loading…
Cancel
Save