Skip to content

C
c3-closed
Commit ceaa0b5c authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Add onzoom and onbrush callbacks - #395

parent a9188e40
Show whitespace changes
Inline Side-by-side
Showing with 126 additions and 2 deletions
c3.js
View file @ ceaa0b5c
......@@ -126,7 +126,8 @@
var __zoom_enabled = getConfig(['zoom', 'enabled'], false),
__zoom_extent = getConfig(['zoom', 'extent']),
__zoom_privileged = getConfig(['zoom', 'privileged'], false);
__zoom_privileged = getConfig(['zoom', 'privileged'], false),
__zoom_onzoom = getConfig(['zoom', 'onzoom'], function () {});
var __interaction_enabled = getConfig(['interaction', 'enabled'], true);
......@@ -175,7 +176,8 @@
// subchart
var __subchart_show = getConfig(['subchart', 'show'], false),
__subchart_size_height = getConfig(['subchart', 'size', 'height'], 60);
__subchart_size_height = getConfig(['subchart', 'size', 'height'], 60),
__subchart_onbrush = getConfig(['subchart', 'onbrush'], function () {});
// color
var __color_pattern = getConfig(['color', 'pattern'], []),
......@@ -4219,6 +4221,7 @@
withSubchart: false,
withUpdateXDomain: true
});
__subchart_onbrush.call(c3, x.orgDomain());
}
function redrawForZoom() {
if (!__zoom_enabled) {
......@@ -4243,6 +4246,7 @@
if (d3.event.sourceEvent.type === 'mousemove') {
cancelClick = true;
}
__zoom_onzoom.call(c3, x.orgDomain());
}
function generateResize() {
......
c3.min.js
View file @ ceaa0b5c
This source diff could not be displayed because it is too large. You can view the blob instead.
htdocs/index.html
View file @ ceaa0b5c
......@@ -344,12 +344,18 @@
<a href="./samples/zoom_reduction.html">
Zoom with reduction
</a>
<a href="./samples/zoom_onzoom.html">
Callback on zoom
</a>
</div>
<div class="col-md-4">
<h3>Subchart</h3>
<a href="./samples/subchart.html">
Show subchart
</a>
<a href="./samples/subchart_onbrush.html">
Callback on brush
</a>
</div>
<div class="col-md-4">
<h3>Selection</h3>
......
htdocs/samples/subchart_onbrush.html 0 → 100644
View file @ ceaa0b5c
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
x : 'x',
columns: [
['x', '2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01'],
['sample', 30, 200, 100, 400, 150],
['sample2', 130, 300, 200, 450, 250]
]
},
axis : {
x : {
type : 'timeseries',
tick : {
format : "%Y-%m-%d"
}
}
},
subchart: {
show: true,
onbrush: function (domain) {
console.log(this, domain);
}
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['sample', 30, 200, 100, 400, 150],
['sample2', 130, 300, 200, 450, 250]
]
},
subchart: {
show: true,
onbrush: function (domain) {
console.log(this, domain);
}
}
});
</script>
</body>
</html>
htdocs/samples/zoom_onzoom.html 0 → 100644
View file @ ceaa0b5c
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
x : 'x',
columns: [
['x', '2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01'],
['sample', 30, 200, 100, 400, 150],
['sample2', 130, 300, 200, 450, 250]
]
},
axis : {
x : {
type : 'timeseries',
tick : {
format : "%Y-%m-%d"
}
}
},
zoom: {
enabled: true,
onzoom: function (domain) {
console.log(this, domain);
}
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['sample', 30, 200, 100, 400, 150],
['sample2', 130, 300, 200, 450, 250]
]
},
zoom: {
enabled: true,
onzoom: function (domain) {
console.log(this, domain);
}
}
});
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment