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

Fix conflict

pull/302/merge
Masayuki Tanaka 11 years ago
parent
cdac727ce8 e8ac367d45
commit
5f3b9e637b
10 changed files with 288 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 60
      c3.js
  2. 6
      c3.min.js
  3. 19
      htdocs/index.html
  4. 33
      htdocs/samples/api_data_colors.html
  5. 115
      htdocs/samples/api_xgrid_lines.html
  6. 25
      htdocs/samples/bar_zerobased.html
  7. 9
      htdocs/samples/chart_bar.html
  8. 27
      htdocs/samples/element.html
  9. 21
      htdocs/samples/grids.html
  10. 47
      htdocs/samples/zoom_category.html

60
c3.js
Unescape View File

@ -253,7 +253,8 @@
// bar
var __bar_width = getConfig(['bar', 'width']),
__bar_width_ratio = getConfig(['bar', 'width', 'ratio'], 0.6);
__bar_width_ratio = getConfig(['bar', 'width', 'ratio'], 0.6),
__bar_zerobased = getConfig(['bar', 'zerobased'], true);
// pie
var __pie_label_show = getConfig(['pie', 'label', 'show'], true),
@ -700,7 +701,7 @@
subYMin = __axis_rotated ? 0 : height2;
subYMax = __axis_rotated ? width2 : 1;
// update scales
x = getX(xMin, xMax, forInit ? undefined : x.domain(), function () { return xAxis.tickOffset(); });
x = getX(xMin, xMax, forInit ? undefined : x.orgDomain(), function () { return xAxis.tickOffset(); });
y = getY(yMin, yMax, forInit ? undefined : y.domain());
y2 = getY(yMin, yMax, forInit ? undefined : y2.domain());
subX = getX(xMin, xMax, orgXDomain, function (d) { return d % 1 ? 0 : subXAxis.tickOffset(); });
@ -750,11 +751,7 @@
scale[key] = _scale[key];
}
scale.orgDomain = function () {
var domain = _scale.domain();
if (orgXDomain && orgXDomain[0] === domain[0] && orgXDomain[1] < domain[1]) {
domain[1] = orgXDomain[1];
}
return domain;
return _scale.domain();
};
// define custom domain() for categorized axis
if (isCategorized) {
@ -763,7 +760,6 @@
domain = this.orgDomain();
return [domain[0], domain[1] + 1];
}
orgXDomain = domain;
_scale.domain(domain);
return scale;
};
@ -975,12 +971,25 @@
return textAnchorForAxisLabel(__axis_rotated, getY2AxisLabelPosition());
}
function getMaxTickWidth(id) {
var maxWidth = 0, axisClass = id === 'x' ? CLASS.axisX : id === 'y' ? CLASS.axisY : CLASS.axisY2;
var maxWidth = 0, targetsToShow, scale, axis;
if (svg) {
svg.selectAll('.' + axisClass + ' .tick text').each(function () {
var box = this.getBoundingClientRect();
if (maxWidth < box.width) { maxWidth = box.width; }
});
targetsToShow = filterTargetsToShow(c3.data.targets);
if (id === 'y') {
scale = y.copy().domain(getYDomain(targetsToShow, 'y'));
axis = getYAxis(scale, yOrient, __axis_y_tick_format, __axis_y_ticks);
} else if (id === 'y2') {
scale = y2.copy().domain(getYDomain(targetsToShow, 'y2'));
axis = getYAxis(scale, y2Orient, __axis_y2_tick_format, __axis_y2_ticks);
} else {
scale = x.copy().domain(getXDomain(targetsToShow));
axis = getXAxis(scale, xOrient, getXAxisTickFormat(), __axis_x_tick_values ? __axis_x_tick_values : xAxis.tickValues());
}
main.append("g").call(axis).each(function () {
d3.select(this).selectAll('text').each(function () {
var box = this.getBoundingClientRect();
if (maxWidth < box.width) { maxWidth = box.width; }
});
}).remove();
}
currentMaxTickWidth = maxWidth <= 0 ? currentMaxTickWidth : maxWidth;
return currentMaxTickWidth;
@ -1250,6 +1259,7 @@
domainLength, padding, padding_top, padding_bottom,
center = axisId === 'y2' ? __axis_y2_center : __axis_y_center,
yDomainAbs, lengths, diff, ratio, isAllPositive, isAllNegative,
isZeroBased = (hasBarType(yTargets) && __bar_zerobased) || hasAreaType(yTargets),
showHorizontalDataLabel = hasDataLabel() && __axis_rotated,
showVerticalDataLabel = hasDataLabel() && !__axis_rotated;
if (yTargets.length === 0) { // use current domain if target of axisId is none
@ -1262,7 +1272,7 @@
isAllNegative = yDomainMin <= 0 && yDomainMax <= 0;
// Bar/Area chart should be 0-based if all positive|negative
if (hasBarType(yTargets) || hasAreaType(yTargets)) {
if (isZeroBased) {
if (isAllPositive) { yDomainMin = 0; }
if (isAllNegative) { yDomainMax = 0; }
}
@ -1296,7 +1306,7 @@
padding_bottom = getAxisPadding(__axis_y2_padding, 'bottom', padding, domainLength);
}
// Bar/Area chart should be 0-based if all positive|negative
if (hasBarType(yTargets) || hasAreaType(yTargets)) {
if (isZeroBased) {
if (isAllPositive) { padding_bottom = yDomainMin; }
if (isAllNegative) { padding_top = -yDomainMax; }
}
@ -2292,6 +2302,7 @@
else {
if (ids.indexOf(id) < 0) { ids.push(id); }
color = pattern[ids.indexOf(id) % pattern.length];
colors[id] = color;
}
return callback instanceof Function ? callback(color, d) : color;
};
@ -2946,7 +2957,7 @@
// MEMO: call here to update legend box and tranlate for all
// MEMO: translate will be upated by this, so transform not needed in updateLegend()
updateLegend(mapToIds(c3.data.targets), {withTransform: false, withTransitionForTransform: false});
updateLegend(mapToIds(c3.data.targets), {withTransform: false, withTransitionForTransform: false, withTransition: false});
/*-- Main Region --*/
@ -3571,21 +3582,6 @@
transitions.axisY2.call(y2Axis);
transitions.axisSubX.call(subXAxis);
if (targetsToShow.length) {
// Update dimensions according to the width of ticks, etc
updateSizes();
updateScales();
updateSvgSize();
transformAll(true, transitions);
// x changes above, so need to update domain too
updateXDomain(targetsToShow, withUpdateXDomain, withUpdateOrgXDomain);
// Update axis again because the length can be updated because of update of max tick width and generate tickOffset
transitions.axisX.call(xAxis);
transitions.axisSubX.call(subXAxis);
transitions.axisY.call(yAxis);
transitions.axisY2.call(y2Axis);
}
// Update axis label
updateAxisLabels(withTransition);
@ -5116,7 +5112,7 @@
c3.groups = function (groups) {
if (isUndefined(groups)) { return __data_groups; }
__data_groups = groups;
redraw({withUpdateOrgXDomain: true, withUpdateXDomain: true});
redraw();
return __data_groups;
};

6
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

19
htdocs/index.html
Unescape View File

@ -313,6 +313,12 @@
Change radius of data point
</a>
</div>
<div class="col-md-4">
<h3>Bar</h3>
<a href="./samples/bar_zerobased.html">
Disable zero-based y domain
</a>
</div>
</div>
</div>
</div>
@ -326,6 +332,9 @@
<a href="./samples/zoom.html">
Enable zoom
</a>
<a href="./samples/zoom.html">
Zoom on category axis
</a>
<a href="./samples/zoom_reduction.html">
Zoom with reduction
</a>
@ -363,7 +372,7 @@
</a>
</div>
<div class="col-md-4">
<h3>grid</h3>
<h3>Grid</h3>
<a href="./samples/api_xgrid_lines.html">
Update x grid lines
</a>
@ -392,6 +401,14 @@
</a>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h3>Data</h3>
<a href="./samples/api_data_colors.html">
Update data color
</a>
</div>
</div>
</div>
</div>

33
htdocs/samples/api_data_colors.html
Unescape View File

@ -0,0 +1,33 @@
<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.js"></script>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
},
axis: {
x: {
type: 'category'
}
}
});
setTimeout(function () {
chart.data.colors({data1: '#000'});
}, 1000);
</script>
</body>
</html>

115
htdocs/samples/api_xgrid_lines.html
Unescape View File

@ -8,7 +8,10 @@
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
var axis_rotated = false, axis_x_type = "";
var generate = function () { return c3.generate({
bindto: '#chart',
data: {
columns: [
@ -16,46 +19,106 @@
]
},
axis: {
// rotated: true,
rotated: axis_rotated,
x: {
type: axis_x_type
}
},
grid: {
x: {
// lines: [{value: 3, text:'Label 3'}, {value: 4.5, text: 'Label 4.5'}]
}
}
});
}); }, chart = generate();
setTimeout(function () {
var queue = [
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
}, 1000);
setTimeout(function () {
},
function () {
chart.xgrids([{value: 2, text:'Label 2'}]);
}, 2000);
setTimeout(function () {
},
function () {
chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
}, 3000);
setTimeout(function () {
},
function () {
chart.xgrids.remove({value:2});
}, 4000);
setTimeout(function () {
},
function () {
chart.xgrids.remove({class:'hoge'});
}, 5000);
setTimeout(function () {
},
function () {
chart.xgrids.remove([{value: 1}, {value: 4}]);
}, 6000);
setTimeout(function () {
},
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
}, 7000);
setTimeout(function () {
},
function () {
chart.xgrids.remove();
},
function () {
axis_rotated = true;
chart = generate();
},
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
},
function () {
chart.xgrids([{value: 2, text:'Label 2'}]);
},
function () {
chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
},
function () {
chart.xgrids.remove({value:2});
},
function () {
chart.xgrids.remove({class:'hoge'});
},
function () {
chart.xgrids.remove([{value: 1}, {value: 4}]);
},
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
},
function () {
chart.xgrids.remove();
}, 8000);
},
function () {
axis_rotated = false;
axis_x_type = 'category';
chart = generate();
},
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
},
function () {
chart.xgrids([{value: 2, text:'Label 2'}]);
},
function () {
chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
},
function () {
chart.xgrids.remove({value:2});
},
function () {
chart.xgrids.remove({class:'hoge'});
},
function () {
chart.xgrids.remove([{value: 1}, {value: 4}]);
},
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
},
function () {
chart.xgrids.remove();
},
];
var i = 0;
queue.forEach(function (f) {
setTimeout(f, 1000 * i++);
});
</script>
</body>

25
htdocs/samples/bar_zerobased.html
Unescape View File

@ -0,0 +1,25 @@
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 1030, 1200, 1100, 1400, 1150, 1250],
['data2', 2130, 2100, 2140, 2200, 2150, 1850]
],
type: 'bar',
},
bar: {
zerobased: false
}
});
</script>
</body>
</html>

9
htdocs/samples/chart_bar.html
Unescape View File

@ -11,8 +11,10 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
['data1', 1030, 1200, 1100, 1400, 1150, 1250],
['data2', 2130, 2100, 2140, 2200, 2150, 1850]
// ['data1', 30, 200, 100, 400, 150, 250],
// ['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar',
onclick: function (d, element) { console.log("onclick", d, element); },
@ -27,7 +29,8 @@
bar: {
width: {
ratio: 0.3
}
},
zerobased: false
}
});
</script>

27
htdocs/samples/element.html
Unescape View File

@ -3,26 +3,35 @@
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<!-- <div id="chart"></div>-->
<div id="chart1"></div>
<div id="chart2"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
var chart1 = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, null, 150, 250]
],
},
// size: {
// width: 640,
// height: 320
// }
});
setTimeout(function () {
document.body.appendChild(chart.element);
}, 1000);
var chart2 = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, null, 150, 250]
],
type: 'bar'
}
});
document.getElementById('chart1').appendChild(chart1.element);
$('#chart2').append(chart2.element);
</script>
</body>
</html>

21
htdocs/samples/grids.html
Unescape View File

@ -8,6 +8,7 @@
<div id="chart3"></div>
<div id="chart4"></div>
<div id="chart5"></div>
<div id="chart6"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
@ -85,6 +86,26 @@
}
});
c3.generate({
bindto: '#chart6',
data: {
columns: bigData
},
axis: {
x: {
type: 'category'
}
},
grid: {
x: {
show: true
},
y: {
show: true
}
}
});
</script>
</body>
</html>

47
htdocs/samples/zoom_category.html
Unescape View File

@ -0,0 +1,47 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart"></div>
<button onclick="load()">Load</button>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
generateData(100)
],
},
axis: {
x: {
type: 'category'
}
},
zoom: { enabled: true },
subchart: { show: true }
});
function load() {
chart.load({
columns: [
generateData(Math.random() * 1000)
],
});
}
function generateData(n) {
var column = ['sample'];
for (var i = 0; i < n; i++) {
column.push(Math.random() * 500);
}
return column;
}
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save