mirror of https://github.com/masayuki0812/c3.git
Chris Evans
10 years ago
176 changed files with 28752 additions and 4639 deletions
@ -0,0 +1 @@
|
||||
.c3 svg{font:10px sans-serif}.c3 line,.c3 path{fill:none;stroke:#000}.c3 text{-webkit-user-select:none;-moz-user-select:none;user-select:none}.c3-bars path,.c3-event-rect,.c3-legend-item-tile,.c3-xgrid-focus,.c3-ygrid{shape-rendering:crispEdges}.c3-chart-arc path{stroke:#fff}.c3-chart-arc text{fill:#fff;font-size:13px}.c3-grid line{stroke:#aaa}.c3-grid text{fill:#aaa}.c3-xgrid,.c3-ygrid{stroke-dasharray:3 3}.c3-text.c3-empty{fill:gray;font-size:2em}.c3-line{stroke-width:1px}.c3-circle._expanded_{stroke-width:1px;stroke:#fff}.c3-selected-circle{fill:#fff;stroke-width:2px}.c3-bar{stroke-width:0}.c3-bar._expanded_{fill-opacity:.75}.c3-chart-arcs-title{font-size:1.3em}.c3-target.c3-focused{opacity:1}.c3-target.c3-focused path.c3-line,.c3-target.c3-focused path.c3-step{stroke-width:2px}.c3-target.c3-defocused{opacity:.3!important}.c3-region{fill:#4682b4;fill-opacity:.1}.c3-brush .extent{fill-opacity:.1}.c3-legend-item{font-size:12px}.c3-legend-item-hidden{opacity:.15}.c3-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.c3-tooltip-container{z-index:10}.c3-tooltip{border-collapse:collapse;border-spacing:0;background-color:#fff;empty-cells:show;-webkit-box-shadow:7px 7px 12px -9px #777;-moz-box-shadow:7px 7px 12px -9px #777;box-shadow:7px 7px 12px -9px #777;opacity:.9}.c3-tooltip tr{border:1px solid #CCC}.c3-tooltip th{background-color:#aaa;font-size:14px;padding:2px 5px;text-align:left;color:#FFF}.c3-tooltip td{font-size:13px;padding:3px 6px;background-color:#fff;border-left:1px dotted #999}.c3-tooltip td>span{display:inline-block;width:10px;height:10px;margin-right:6px}.c3-tooltip td.value{text-align:right}.c3-area{stroke-width:0;opacity:.2}.c3-chart-arcs .c3-chart-arcs-background{fill:#e0e0e0;stroke:none}.c3-chart-arcs .c3-chart-arcs-gauge-unit{fill:#000;font-size:16px}.c3-chart-arcs .c3-chart-arcs-gauge-max,.c3-chart-arcs .c3-chart-arcs-gauge-min{fill:#777}.c3-chart-arc .c3-gauge-value{fill:#000} |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,11 @@
|
||||
{ |
||||
"js": [ |
||||
"../../bower_components/d3/d3.min.js", |
||||
"../../c3.min.js" |
||||
], |
||||
"css": [ |
||||
"../../c3.css" |
||||
], |
||||
|
||||
"template": "<html><head><meta charset=\"utf-8\"><style>{0}</style></head><body><div id=\"chart\"></div></body></html>" |
||||
} |
||||
@ -0,0 +1,140 @@
|
||||
/** |
||||
* PNG\JPEG exporter for C3.js, version 0.2 |
||||
* (c) 2014 Yuval Bar-On |
||||
* |
||||
* usage: path/to/phantomjs output options [WxH] |
||||
* |
||||
*/ |
||||
|
||||
// useful python-styled string formatting, "hello {0}! Javascript is {1}".format("world", "awesome");
|
||||
if (!String.prototype.format) { |
||||
String.prototype.format = function() { |
||||
var args = arguments; |
||||
return this.replace(/{(\d+)}/g, function(match, number) {
|
||||
return typeof args[number] != 'undefined' |
||||
? args[number] |
||||
: match |
||||
; |
||||
}); |
||||
}; |
||||
} |
||||
|
||||
// defaults
|
||||
var page = require('webpage').create(), |
||||
fs = require('fs'), |
||||
system = require('system'), |
||||
config = JSON.parse( fs.read('config.json') ), |
||||
output, size; |
||||
|
||||
if (system.args.length < 3 ) { |
||||
console.log('Usage: phantasm.js filename html [WxH]'); |
||||
phantom.exit(1); |
||||
} else { |
||||
out = system.args[1]; |
||||
opts = JSON.parse( system.args[2] ); |
||||
|
||||
if (system.args[3]) { |
||||
var dimensions = system.args[3].split('x'), |
||||
width = dimensions[0], |
||||
height = dimensions[1]; |
||||
|
||||
function checkNum(check) { |
||||
check = parseInt(check); |
||||
if (!isNaN(check)) |
||||
return check; |
||||
return false; |
||||
} |
||||
|
||||
width = checkNum(width); |
||||
height = checkNum(height); |
||||
|
||||
if (width && height) { |
||||
page.viewportSize = { |
||||
height: height, |
||||
width: width |
||||
} |
||||
} |
||||
|
||||
// fit chart size to img size, if undefined
|
||||
if (!opts.size) { |
||||
opts.size = { |
||||
"height": height, |
||||
"width": width |
||||
}; |
||||
} |
||||
} else { |
||||
// check if size is defined in chart,
|
||||
// else apply defaults
|
||||
page.viewportSize = { |
||||
height: (opts.size && opts.size.height) ? opts.size.height : 320, |
||||
width: (opts.size && opts.size.width ) ? opts.size.width : 710, |
||||
} |
||||
} |
||||
} |
||||
|
||||
page.onResourceRequested = function(requestData, request) { |
||||
console.log('::loading resource ', requestData['url']); |
||||
};
|
||||
|
||||
// helpful debug functions
|
||||
page.onConsoleMessage = function(msg){ |
||||
console.log(msg); |
||||
}; |
||||
|
||||
page.onError = function(msg, trace) { |
||||
var msgStack = ['ERROR: ' + msg]; |
||||
|
||||
if (trace && trace.length) { |
||||
msgStack.push('TRACE:'); |
||||
trace.forEach(function(t) { |
||||
msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function +'")' : '')); |
||||
}); |
||||
} |
||||
|
||||
console.error(msgStack.join('\n')); |
||||
}; |
||||
|
||||
// render page
|
||||
function injectVerify(script) { |
||||
var req = page.injectJs(script); |
||||
if (!req) {
|
||||
console.log( '\nError!\n' + script + ' not found!\n' ); |
||||
phantom.exit(1);
|
||||
} |
||||
} |
||||
|
||||
page.onLoadFinished = function() { |
||||
console.log('::rendering'); |
||||
|
||||
for (var j in config.js) { |
||||
injectVerify(config.js[j]); |
||||
} |
||||
|
||||
page.evaluate(function(chartoptions) { |
||||
// phantomjs doesn't know how to handle .bind, so we override
|
||||
Function.prototype.bind = Function.prototype.bind || function (thisp) { |
||||
var fn = this; |
||||
return function () { |
||||
return fn.apply(thisp, arguments); |
||||
}; |
||||
}; |
||||
|
||||
// generate chart
|
||||
c3.generate(chartoptions); |
||||
|
||||
}, opts); |
||||
|
||||
// setting transition to 0 has proven not to work thus far, but 300ms isn't much
|
||||
// so this is acceptable for now
|
||||
setTimeout(function() { |
||||
page.render(out); |
||||
phantom.exit(); |
||||
}, 300); |
||||
} |
||||
|
||||
// apply css inline because that usually renders better
|
||||
var css = ''; |
||||
for (var i in config.css) { |
||||
css += fs.read(config.css[i]); |
||||
} |
||||
page.content = config.template.format(css); |
||||
|
After Width: | Height: | Size: 16 KiB |
@ -0,0 +1,380 @@
|
||||
var c3ext = {}; |
||||
c3ext.generate = function (options) { |
||||
|
||||
if (options.zoom2 != null) { |
||||
zoom2_reducers = options.zoom2.reducers || {}; |
||||
zoom2_enabled = options.zoom2.enabled; |
||||
_zoom2_factor = options.zoom2.factor || 1; |
||||
_zoom2_maxItems = options.zoom2.maxItems; |
||||
} |
||||
|
||||
if (!zoom2_enabled) { |
||||
return c3.generate(options); |
||||
} |
||||
|
||||
|
||||
var originalData = Q.copy(options.data); |
||||
var zoom2_reducers; |
||||
var zoom2_enabled; |
||||
var _zoom2_maxItems; |
||||
|
||||
if (_zoom2_maxItems == null) { |
||||
var el = d3.select(options.bindto)[0][0]; |
||||
if (el != null) { |
||||
var availWidth = el.clientWidth; |
||||
|
||||
var pointSize = 20; |
||||
_zoom2_maxItems = Math.ceil(availWidth / pointSize); |
||||
} |
||||
if (_zoom2_maxItems == null || _zoom2_maxItems < 10) { |
||||
_zoom2_maxItems = 10; |
||||
} |
||||
} |
||||
|
||||
function onZoomChanged(e) { |
||||
refresh(); |
||||
} |
||||
|
||||
var zoom2 = c3ext.ZoomBehavior({ changed: onZoomChanged, bindto: options.bindto }); |
||||
|
||||
zoom2.enhance = function () { |
||||
_zoom2_maxItems *= 2; |
||||
var totalItems = zoom2.getZoom().totalItems; |
||||
if (_zoom2_maxItems > totalItems) |
||||
_zoom2_maxItems = totalItems; |
||||
refresh(); |
||||
} |
||||
zoom2.dehance = function () { |
||||
_zoom2_maxItems = Math.ceil(_zoom2_maxItems / 2) + 1; |
||||
refresh(); |
||||
} |
||||
|
||||
zoom2.maxItems = function () { return _zoom2_maxItems; }; |
||||
function zoomAndReduceData(list, zoomRange, func, maxItems) { |
||||
//var maxItems = 10;//Math.ceil(10 * zoomFactor);
|
||||
var list2 = list.slice(zoomRange[0], zoomRange[1]); |
||||
var chunkSize = 1; |
||||
var list3 = list2; |
||||
if (list3.length > maxItems) { |
||||
var chunkSize = Math.ceil(list2.length / maxItems); |
||||
list3 = list3.splitIntoChunksOf(chunkSize).map(func); |
||||
} |
||||
//console.log("x" + getCurrentZoomLevel() + ", maxItems=" + maxItems + " chunkSize=" + chunkSize + " totalBefore=" + list2.length + ", totalAfter=" + list3.length);
|
||||
return list3; |
||||
} |
||||
|
||||
function first(t) { return t[0]; } |
||||
|
||||
var getDataForZoom = function (data) { |
||||
if (data.columns == null || data.columns.length == 0) |
||||
return; |
||||
|
||||
var zoomInfo = zoom2.getZoom(); |
||||
if (zoomInfo.totalItems != data.columns[0].length - 1) { |
||||
zoom2.setOptions({ totalItems: data.columns[0].length - 1 }); |
||||
zoomInfo = zoom2.getZoom(); |
||||
} |
||||
data.columns = originalData.columns.map(function (column) { |
||||
var name = column[0]; |
||||
var reducer = zoom2_reducers[name] || first; //by default take the first
|
||||
|
||||
var values = column.slice(1); |
||||
var newValues = zoomAndReduceData(values, zoomInfo.currentZoom, reducer, _zoom2_maxItems); |
||||
return [name].concat(newValues); |
||||
}); |
||||
return data; |
||||
}; |
||||
|
||||
getDataForZoom(options.data); |
||||
var chart = c3.generate(options); |
||||
var _chart_load_org = chart.load.bind(chart); |
||||
chart.zoom2 = zoom2; |
||||
chart.load = function (data) { |
||||
if (data.unload) { |
||||
unload(data.unload); |
||||
delete data.unload; |
||||
} |
||||
Q.copy(data, originalData); |
||||
refresh(); |
||||
} |
||||
chart.unload = function (names) { |
||||
unload(names); |
||||
refresh(); |
||||
} |
||||
|
||||
function unload(names) { |
||||
originalData.columns.removeAll(function (t) { names.contains(t); }); |
||||
} |
||||
|
||||
|
||||
function refresh() { |
||||
var data = Q.copy(originalData) |
||||
getDataForZoom(data); |
||||
_chart_load_org(data); |
||||
}; |
||||
|
||||
|
||||
return chart; |
||||
} |
||||
|
||||
c3ext.ZoomBehavior = function (options) { |
||||
var zoom = { __type: "ZoomBehavior" }; |
||||
|
||||
var _zoom2_factor; |
||||
var _left; |
||||
var totalItems; |
||||
var currentZoom; |
||||
var bindto = options.bindto; |
||||
var _zoomChanged = options.changed || function () { }; |
||||
var element; |
||||
var mousewheelTimer; |
||||
var deltaY = 0; |
||||
var leftRatio = 0; |
||||
|
||||
|
||||
zoom.setOptions = function (options) { |
||||
if (options == null) |
||||
options = {}; |
||||
_zoom2_factor = options.factor || 1; |
||||
_left = 0; |
||||
totalItems = options.totalItems || 0; |
||||
currentZoom = [0, totalItems]; |
||||
_zoomChanged = options.changed || _zoomChanged; |
||||
} |
||||
|
||||
zoom.setOptions(options); |
||||
|
||||
|
||||
function verifyZoom(newZoom) { |
||||
//newZoom.sort();
|
||||
if (newZoom[1] > totalItems) { |
||||
var diff = newZoom[1] - totalItems; |
||||
newZoom[0] -= diff; |
||||
newZoom[1] -= diff; |
||||
} |
||||
if (newZoom[0] < 0) { |
||||
var diff = newZoom[0] * -1; |
||||
newZoom[0] += diff; |
||||
newZoom[1] += diff; |
||||
} |
||||
if (newZoom[1] > totalItems) |
||||
newZoom[1] = totalItems; |
||||
if (newZoom[0] < 0) |
||||
newZoom[0] = 0; |
||||
} |
||||
|
||||
function zoomAndPan(zoomFactor, left) { |
||||
var itemsToShow = Math.ceil(totalItems / zoomFactor); |
||||
var newZoom = [left, left + itemsToShow]; |
||||
verifyZoom(newZoom); |
||||
currentZoom = newZoom; |
||||
onZoomChanged(); |
||||
} |
||||
|
||||
function onZoomChanged() { |
||||
if (_zoomChanged != null) |
||||
_zoomChanged(zoom.getZoom()); |
||||
} |
||||
function applyZoomAndPan() { |
||||
zoomAndPan(_zoom2_factor, _left); |
||||
} |
||||
function getItemsToShow() { |
||||
var itemsToShow = Math.ceil(totalItems / _zoom2_factor); |
||||
return itemsToShow; |
||||
} |
||||
|
||||
|
||||
zoom.getZoom = function () { |
||||
return { totalItems: totalItems, currentZoom: currentZoom.slice() }; |
||||
} |
||||
|
||||
zoom.factor = function (factor, skipDraw) { |
||||
if (arguments.length == 0) |
||||
return _zoom2_factor; |
||||
_zoom2_factor = factor; |
||||
if (_zoom2_factor < 1) |
||||
_zoom2_factor = 1; |
||||
if (skipDraw) |
||||
return; |
||||
applyZoomAndPan(); |
||||
} |
||||
zoom.left = function (left, skipDraw) { |
||||
if (arguments.length == 0) |
||||
return _left; |
||||
_left = left; |
||||
if (_left < 0) |
||||
_left = 0; |
||||
var pageSize = getItemsToShow(); |
||||
//_left += pageSize;
|
||||
if (_left + pageSize > totalItems) |
||||
_left = totalItems - pageSize; |
||||
console.log({ left: _left, pageSize: pageSize }); |
||||
if (skipDraw) |
||||
return; |
||||
applyZoomAndPan(); |
||||
} |
||||
|
||||
zoom.zoomAndPanByRatio = function (zoomRatio, panRatio) { |
||||
|
||||
var pageSize = getItemsToShow(); |
||||
var leftOffset = Math.round(pageSize * panRatio); |
||||
var mouseLeft = _left + leftOffset; |
||||
zoom.factor(zoom.factor() * zoomRatio, true); |
||||
|
||||
var finalLeft = mouseLeft; |
||||
if (zoomRatio != 1) { |
||||
var pageSize2 = getItemsToShow(); |
||||
var leftOffset2 = Math.round(pageSize2 * panRatio); |
||||
finalLeft = mouseLeft - leftOffset2; |
||||
} |
||||
zoom.left(finalLeft, true); |
||||
applyZoomAndPan(); |
||||
} |
||||
|
||||
zoom.zoomIn = function () { |
||||
zoom.zoomAndPanByRatio(2, 0); |
||||
} |
||||
|
||||
zoom.zoomOut = function () { |
||||
zoom.zoomAndPanByRatio(0.5, 0); |
||||
} |
||||
|
||||
zoom.panLeft = function () { |
||||
zoom.zoomAndPanByRatio(1, -1); |
||||
} |
||||
zoom.panRight = function () { |
||||
zoom.zoomAndPanByRatio(1, 1); |
||||
} |
||||
|
||||
zoom.reset = function () { |
||||
_left = 0; |
||||
_zoom2_factor = 1; |
||||
applyZoomAndPan(); |
||||
} |
||||
|
||||
function doZoom() { |
||||
if (deltaY != 0) { |
||||
var maxDelta = 10; |
||||
var multiply = (maxDelta + deltaY) / maxDelta; |
||||
//var factor = chart.zoom2.factor()*multiply;
|
||||
//factor= Math.ceil(factor*100) / 100;
|
||||
console.log({ deltaY: deltaY, multiply: multiply }); |
||||
zoom.zoomAndPanByRatio(multiply, leftRatio);//0.5);//leftRatio);
|
||||
deltaY = 0; |
||||
} |
||||
} |
||||
|
||||
function element_mousewheel(e) { |
||||
deltaY += e.deltaY; |
||||
leftRatio = (e.offsetX - 70) / (e.currentTarget.offsetWidth - 70); |
||||
//console.log({ "e.offsetX": e.offsetX, "e.currentTarget.offsetWidth": e.currentTarget.offsetWidth, leftRatio: leftRatio });
|
||||
mousewheelTimer.set(150); |
||||
e.preventDefault(); |
||||
} |
||||
|
||||
if (bindto != null) { |
||||
element = $(options.bindto); |
||||
if (element.mousewheel) { |
||||
mousewheelTimer = new Timer(doZoom); |
||||
element.mousewheel(element_mousewheel); |
||||
} |
||||
} |
||||
|
||||
return zoom; |
||||
|
||||
} |
||||
|
||||
if (typeof (Q) == "undefined") { |
||||
var Q = function () { |
||||
}; |
||||
|
||||
Q.copy = function (src, target, options, depth) { |
||||
///<summary>Copies an object into a target object, recursively cloning any object or array in the way, overwrite=true will overwrite a primitive field value even if exists</summary>
|
||||
///<param name="src" />
|
||||
///<param name="target" />
|
||||
///<param name="options" type="Object">{ overwrite:false }</param>
|
||||
///<returns type="Object">The copied object</returns>
|
||||
if (depth == null) |
||||
depth = 0; |
||||
if (depth == 100) { |
||||
console.warn("Q.copy is in depth of 100 - possible circular reference") |
||||
} |
||||
options = options || { overwrite: false }; |
||||
if (src == target || src == null) |
||||
return target; |
||||
if (typeof (src) != "object") { |
||||
if (options.overwrite || target == null) |
||||
return src; |
||||
return target; |
||||
} |
||||
if (typeof (src.clone) == "function") { |
||||
if (options.overwrite || target == null) |
||||
return src.clone(); |
||||
return target; |
||||
} |
||||
if (target == null) { |
||||
if (src instanceof Array) |
||||
target = []; |
||||
else |
||||
target = {}; |
||||
} |
||||
|
||||
if (src instanceof Array) { |
||||
for (var i = 0; i < src.length; i++) { |
||||
var item = src[i]; |
||||
var item2 = target[i]; |
||||
item2 = Q.copy(item, item2, options, depth + 1); |
||||
target[i] = item2; |
||||
} |
||||
target.splice(src.length, target.length - src.length); |
||||
return target; |
||||
} |
||||
for (var p in src) { |
||||
var value = src[p]; |
||||
var value2 = target[p]; |
||||
value2 = Q.copy(value, value2, options, depth + 1); |
||||
target[p] = value2; |
||||
} |
||||
return target; |
||||
} |
||||
} |
||||
if (typeof (Timer) == "undefined") { |
||||
var Timer = function (action, ms) { |
||||
this.action = action; |
||||
if (ms != null) |
||||
this.set(ms); |
||||
} |
||||
|
||||
Timer.prototype.set = function (ms) { |
||||
if (ms == null) |
||||
ms = this._ms; |
||||
else |
||||
this._ms = ms; |
||||
this.clear(); |
||||
if (ms == null) |
||||
return; |
||||
this.timeout = window.setTimeout(this.onTick.bind(this), ms); |
||||
} |
||||
|
||||
Timer.prototype.onTick = function () { |
||||
this.clear(); |
||||
this.action(); |
||||
} |
||||
|
||||
Timer.prototype.clear = function (ms) { |
||||
if (this.timeout == null) |
||||
return; |
||||
window.clearTimeout(this.timeout); |
||||
this.timeout = null; |
||||
} |
||||
} |
||||
if (typeof(Array.prototype.splitIntoChunksOf)=="undefined") { |
||||
Array.prototype.splitIntoChunksOf = function (countInEachChunk) { |
||||
var chunks = Math.ceil(this.length / countInEachChunk); |
||||
var list = []; |
||||
for (var i = 0; i < this.length; i += countInEachChunk) { |
||||
list.push(this.slice(i, i + countInEachChunk)); |
||||
} |
||||
return list; |
||||
} |
||||
} |
||||
@ -0,0 +1,12 @@
|
||||
.row { |
||||
margin-left: 8px; |
||||
} |
||||
.row a { |
||||
display: block; |
||||
text-align: left; |
||||
font-size: 1.2em; |
||||
line-height: 1.8; |
||||
} |
||||
.row h3 { |
||||
color: #777; |
||||
} |
||||
@ -0,0 +1,5 @@
|
||||
{ |
||||
"data1": [120, 140, 170, 150, 180], |
||||
"data2": [80, 50, 100, 70, 120], |
||||
"data3": [200, 210, 250, 300, 280] |
||||
} |
||||
|
@ -0,0 +1,5 @@
|
||||
{ |
||||
"data1": [20, 40, 70, 50, 80, 30], |
||||
"data2": [180, 150, 200, 170, 220, 400], |
||||
"data3": [1200, 1210, 1250, 1300, 1280, 1000] |
||||
} |
||||
@ -0,0 +1,6 @@
|
||||
[ |
||||
{ "id": 1, "name": "abc", "data1": 1200, "data2": 500 }, |
||||
{ "id": 2, "name": "efg", "data1": 900, "data2": 600 }, |
||||
{ "id": 3, "name": "pqr", "data1": 1150, "data2": 300 }, |
||||
{ "id": 4, "name": "xyz", "data1": 1020, "data2": 900 } |
||||
] |
||||
@ -1,124 +1,481 @@
|
||||
<html> |
||||
<head> |
||||
<link href="./css/bootstrap.min.css" rel="stylesheet"> |
||||
<link href="./css/index.css" rel="stylesheet"> |
||||
</head> |
||||
<body> |
||||
<div class="container"> |
||||
<div class="section"> |
||||
<a href="#basic" name="basic"><h2># <span>Basic</span></h2></a> |
||||
<h2># <span>Chart Type</span></h2> |
||||
<div> |
||||
<div class="row"> |
||||
<div class="col-md-4"> |
||||
<h3>Simple Line Chart</h3> |
||||
<p>Simple line chart for getting started.</p> |
||||
<p><a class="btn btn-default" href="./samples/simple.html" role="button">View details »</a></p> |
||||
<h3>Line Chart</h3> |
||||
<a href="./samples/simple.html"> |
||||
Line chart with ordinary data |
||||
</a> |
||||
<a href="./samples/chart_spline.html"> |
||||
Spline chart with ordinary data |
||||
</a> |
||||
<a href="./samples/chart_step.html"> |
||||
Step chart with ordinary data |
||||
</a> |
||||
</div> |
||||
<div class="col-md-4"> |
||||
<h3>Multiple Line Chart</h3> |
||||
<p>Multiple line chart with multiple data.</p> |
||||
<p><a class="btn btn-default" href="./samples/simple_multiple.html" role="button">View details »</a></p> |
||||
<h3>Area Chart</h3> |
||||
<a href="./samples/chart_area.html"> |
||||
Area chart with ordinary data |
||||
</a> |
||||
<a href="./samples/chart_area_spline.html"> |
||||
Area-spline chart with ordinary data |
||||
</a> |
||||
<a href="./samples/chart_area_step.html"> |
||||
Area-step chart with ordinary data |
||||
</a> |
||||
<a href="./samples/chart_area_stacked.html"> |
||||
Stacked Area chart with ordinary data |
||||
</a> |
||||
<a href="./samples/chart_area_spline_stacked.html"> |
||||
Stacked Area-spline chart with ordinary data |
||||
</a> |
||||
<a href="./samples/chart_area_step_stacked.html"> |
||||
Stacked Area-step chart with ordinary data |
||||
</a> |
||||
</div> |
||||
<div class="col-md-4"> |
||||
<h3>Bar Chart</h3> |
||||
<a href="./samples/chart_bar.html"> |
||||
Bar chart with ordinary data |
||||
</a> |
||||
<a href="./samples/chart_bar_stacked.html"> |
||||
Stacked Bar chart with ordinary data |
||||
</a> |
||||
</div> |
||||
</div> |
||||
<div class="row"> |
||||
<div class="col-md-4"> |
||||
<h3>Pie Chart</h3> |
||||
<a href="./samples/chart_pie.html"> |
||||
Pie chart with ordinary data |
||||
</a> |
||||
<a href="./samples/chart_pie_sort.html"> |
||||
Pie chart with/without sort |
||||
</a> |
||||
</div> |
||||
<div class="col-md-4"> |
||||
<h3>Donut Chart</h3> |
||||
<a href="./samples/chart_donut.html"> |
||||
Donut chart with ordinary data |
||||
</a> |
||||
</div> |
||||
<div class="col-md-4"> |
||||
<h3>Gauge Chart</h3> |
||||
<a href="./samples/chart_gauge.html"> |
||||
Gauge chart with ordinary data |
||||
</a> |
||||
</div> |
||||
</div> |
||||
<div class="row"> |
||||
<div class="col-md-4"> |
||||
<h3>Scatter Chart</h3> |
||||
<a href="./samples/chart_scatter.html"> |
||||
Scatter chart with ordinary data |
||||
</a> |
||||
</div> |
||||
<div class="col-md-4"> |
||||
<h3>Timeseries Chart</h3> |
||||
<p>Simple line chart with timeseries data.</p> |
||||
<p><a class="btn btn-default" href="./samples/timeseries.html" role="button">View details »</a></p> |
||||
<h3>Combination Chart</h3> |
||||
<a href="./samples/chart_combination.html"> |
||||
Combination chart with ordinary data |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="section"> |
||||
<a href="#axes" name="axes"><h2># <span>Axes</span></h2></a> |
||||
<h2># <span>Axes</span></h2> |
||||
<div> |
||||
<div class="row"> |
||||
<div class="col-md-4"> |
||||
<h3>Categorized Axis</h3> |
||||
<p>Axis with ticks categorizing each data.</p> |
||||
<p><a class="btn btn-default" href="./samples/categorized.html" role="button">View details »</a></p> |
||||
<h3>Timeseries Axis</h3> |
||||
<a href="./samples/timeseries.html"> |
||||
Line chart with timeseries data |
||||
</a> |
||||
<a href="./samples/timeseries_descendent.html"> |
||||
Line chart with descendent timeseries data |
||||
</a> |
||||
<a href="./samples/timeseries_raw.html"> |
||||
Line chart with timeseries data as Number |
||||
</a> |
||||
<a href="./samples/timeseries_date.html"> |
||||
Line chart with timeseries data as Date object |
||||
</a> |
||||
</div> |
||||
<div class="col-md-4"> |
||||
<h3>Category Axis</h3> |
||||
<a href="./samples/categorized.html"> |
||||
Chart with category axis |
||||
</a> |
||||
<a href="./samples/custom_x_categorized.html"> |
||||
Chart with category data on category axis |
||||
</a> |
||||
</div> |
||||
<div class="col-md-4"> |
||||
<h3>Additional Axis</h3> |
||||
<p>Additional y axis can be added.</p> |
||||
<p><a class="btn btn-default" href="./samples/axes_y2.html" role="button">View details »</a></p> |
||||
<a href="./samples/axes_y2.html"> |
||||
Add y2 axis |
||||
</a> |
||||
</div> |
||||
</div> |
||||
<div class="row"> |
||||
<div class="col-md-4"> |
||||
<h3>Axis Range</h3> |
||||
<a href="./samples/axes_range.html"> |
||||
Set range of axis |
||||
</a> |
||||
</div> |
||||
<div class="col-md-4"> |
||||
<h3>Axis Padding</h3> |
||||
<a href="./samples/axes_padding.html"> |
||||
Set padding of axis |
||||
</a> |
||||
</div> |
||||
<div class="col-md-4"> |
||||
<h3>X Axis Tick</h3> |
||||
<a href="./samples/axes_x_tick_values.html"> |
||||
Set values for x axis |
||||
</a> |
||||
<a href="./samples/axes_x_tick_culling.html"> |
||||
Set culling for x axis |
||||
</a> |
||||
<a href="./samples/axes_x_tick_fit.html"> |
||||
Set fitting for x axis |
||||
</a> |
||||
<a href="./samples/axes_x_tick_rotate.html"> |
||||
Set rotation for x axis |
||||
</a> |
||||
<a href="./samples/axes_x_range_timeseries.html"> |
||||
Set range in timeseries for x axis |
||||
</a> |
||||
</div> |
||||
</div> |
||||
<div class="row"> |
||||
<div class="col-md-4"> |
||||
<h3>Default Y Domain</h3> |
||||
<a href="./samples/axes_y_default.html"> |
||||
Set default y domain |
||||
</a> |
||||
</div> |
||||
<div class="col-md-4"> |
||||
<h3>Y Domain</h3> |
||||
<a href="./samples/domain_y.html"> |
||||
Update y domain automatically |
||||
</a> |
||||
</div> |
||||
<div class="col-md-4"> |
||||
<h3>Default X Extent</h3> |
||||
<a href="./samples/axes_x_extent.html"> |
||||
Set default x extent |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="section"> |
||||
<a href="#data" name="data"><h2># <span>Data</span></h2></a> |
||||
<h2># <span>Data</span></h2> |
||||
<div> |
||||
<div class="row"> |
||||
<div class="col-md-4"> |
||||
<h3>Column Oriented Data</h3> |
||||
<p>Column-oriented data can be used as input.</p> |
||||
<p><a class="btn btn-default" href="./samples/data_columned.html" role="button">View details »</a></p> |
||||
<h3>Input Data</h3> |
||||
<a href="./samples/data_columned.html"> |
||||
Columned data |
||||
</a> |
||||
<a href="./samples/data_rowed.html"> |
||||
Rowed data |
||||
</a> |
||||
<a href="./samples/data_json.html"> |
||||
JSON data |
||||
</a> |
||||
<a href="./samples/data_url.html"> |
||||
Data from URL |
||||
</a> |
||||
<a href="./samples/data_hide.html"> |
||||
Hide data when init |
||||
</a> |
||||
</div> |
||||
<div class="col-md-4"> |
||||
<h3>Row Oriented Data</h3> |
||||
<p>Row-oriented data can be used as input.</p> |
||||
<p><a class="btn btn-default" href="./samples/data_rowed.html" role="button">View details »</a></p> |
||||
<h3>Load Data</h3> |
||||
<a href="./samples/data_load.html"> |
||||
Load ordinary data |
||||
</a> |
||||
<a href="./samples/data_load_timeseries.html"> |
||||
Load timeseries data |
||||
</a> |
||||
</div> |
||||
<div class="col-md-4"> |
||||
<h3>Data from URL</h3> |
||||
<p>Data from URL can be used as input.</p> |
||||
<p><a class="btn btn-default" href="./samples/data_url.html" role="button">View details »</a></p> |
||||
<h3>Custom X</h3> |
||||
<a href="./samples/custom_x_scale.html"> |
||||
Custom x for all data |
||||
</a> |
||||
<a href="./samples/custom_xs_scale.html"> |
||||
Custom x for each data |
||||
</a> |
||||
</div> |
||||
</div> |
||||
<div class="row"> |
||||
<div class="col-md-4"> |
||||
<h3>Load Data</h3> |
||||
<p>Load data dynamically.</p> |
||||
<p><a class="btn btn-default" href="./samples/data_load.html" role="button">View details »</a></p> |
||||
<h3>Data Label</h3> |
||||
<a href="./samples/data_label.html"> |
||||
Show label on data |
||||
</a> |
||||
<a href="./samples/data_label_format.html"> |
||||
Show label on data with format |
||||
</a> |
||||
</div> |
||||
<div class="col-md-4"> |
||||
<h3>Data Region</h3> |
||||
<a href="./samples/data_region.html"> |
||||
Set region of data |
||||
</a> |
||||
<a href="./samples/data_region_timeseries.html"> |
||||
Set region of timeseries data |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="section"> |
||||
<a href="#chart_type" name="chart_type"><h2># <span>Chart Type</span></h2></a> |
||||
<h2># <span>Components</span></h2> |
||||
<div> |
||||
<div class="row"> |
||||
<div class="col-md-4"> |
||||
<h3>Bar Chart</h3> |
||||
<p>Display as Bar Chart</p> |
||||
<p><a class="btn btn-default" href="./samples/chart_bar.html" role="button">View details »</a></p> |
||||
<h3>Grid</h3> |
||||
<a href="./samples/grids.html"> |
||||
Show x/y grids |
||||
</a> |
||||
<a href="./samples/grids_timeseries.html"> |
||||
Show x/y grids with timeseries |
||||
</a> |
||||
<a href="./samples/grid_x_lines.html"> |
||||
Show optional x grids |
||||
</a> |
||||
<a href="./samples/grid_x_lines_timeseries.html"> |
||||
Show optional x grids with timeseries |
||||
</a> |
||||
<a href="./samples/grid_focus.html"> |
||||
Hide focus grid |
||||
</a> |
||||
</div> |
||||
<div class="col-md-4"> |
||||
<h3>Stacked Bar Chart</h3> |
||||
<p>Display as Stacked Bar Chart</p> |
||||
<p><a class="btn btn-default" href="./samples/chart_bar_stacked.html" role="button">View details »</a></p> |
||||
<h3>Region</h3> |
||||
<a href="./samples/regions.html"> |
||||
Show regions |
||||
</a> |
||||
<a href="./samples/regions_timeseries.html"> |
||||
Show regions with timeseries |
||||
</a> |
||||
</div> |
||||
<div class="col-md-4"> |
||||
<h3>Spline Chart</h3> |
||||
<p>Display as Spline Chart</p> |
||||
<p><a class="btn btn-default" href="./samples/chart_spline.html" role="button">View details »</a></p> |
||||
<h3>Legend</h3> |
||||
<a href="./samples/legend.html"> |
||||
Show legend |
||||
</a> |
||||
</div> |
||||
</div> |
||||
<div class="row"> |
||||
<div class="col-md-4"> |
||||
<h3>Area Chart</h3> |
||||
<p>Display as Filled Area Chart</p> |
||||
<p><a class="btn btn-default" href="./samples/chart_area.html" role="button">View details »</a></p> |
||||
<h3>Tooltip</h3> |
||||
<a href="./samples/tooltip_show.html"> |
||||
Show tooltip |
||||
</a> |
||||
<a href="./samples/tooltip_grouped.html"> |
||||
Show tooltip as each data |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="section"> |
||||
<h2># <span>Chart Option</span></h2> |
||||
<div> |
||||
<div class="row"> |
||||
<div class="col-md-4"> |
||||
<h3>Combination Chart</h3> |
||||
<p>Display as Bar Chart</p> |
||||
<p><a class="btn btn-default" href="./samples/chart_combination.html" role="button">View details »</a></p> |
||||
<h3>Bind</h3> |
||||
<a href="./samples/bindto.html"> |
||||
Specify the element binded |
||||
</a> |
||||
</div> |
||||
<div class="col-md-4"> |
||||
<h3>Padding</h3> |
||||
<a href="./samples/padding.html"> |
||||
Change padding of chart |
||||
</a> |
||||
<a href="./samples/padding_update.html"> |
||||
Auto padding when chart updated |
||||
</a> |
||||
</div> |
||||
<div class="col-md-4"> |
||||
<h3>Empty Data</h3> |
||||
<a href="./samples/emptydata.html"> |
||||
Show text when empty data |
||||
</a> |
||||
</div> |
||||
</div> |
||||
<div class="row"> |
||||
<div class="col-md-4"> |
||||
<h3>Point</h3> |
||||
<a href="./samples/point_r.html"> |
||||
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 class="col-md-4"> |
||||
<h3>Area</h3> |
||||
<a href="./samples/area_zerobased.html"> |
||||
Disable zero-based y domain |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="section"> |
||||
<a href="#interaction" name="interaction"><h2># <span>Interaction</span></h2></a> |
||||
<h2># <span>Interaction</span></h2> |
||||
<div> |
||||
<div class="row"> |
||||
<div class="col-md-4"> |
||||
<h3>Zoom</h3> |
||||
<p>Zoom by mouse wheel event and slide by drag.</p> |
||||
<p><a class="btn btn-default" href="./samples/interaction_zoom.html" role="button">View details »</a></p> |
||||
<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> |
||||
<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> |
||||
<a href="./samples/selection.html"> |
||||
Select data |
||||
</a> |
||||
</div> |
||||
</div> |
||||
<div class="row"> |
||||
<div class="col-md-4"> |
||||
<h3>Disable Interaction</h3> |
||||
<a href="./samples/interaction_enabled.html"> |
||||
Disable interaction |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="section"> |
||||
<h2># <span>API</span></h2> |
||||
<div> |
||||
<div class="row"> |
||||
<div class="col-md-4"> |
||||
<h3>Flow</h3> |
||||
<a href="./samples/api_flow.html"> |
||||
Flow ordinary data |
||||
</a> |
||||
<a href="./samples/api_flow_timeseries.html"> |
||||
Flow timeseries data |
||||
</a> |
||||
</div> |
||||
<div class="col-md-4"> |
||||
<h3>Axis</h3> |
||||
<a href="./samples/api_axis_range.html"> |
||||
Update axis range |
||||
</a> |
||||
<a href="./samples/api_axis_label.html"> |
||||
Update axis label |
||||
</a> |
||||
</div> |
||||
<div class="col-md-4"> |
||||
<h3>Grid</h3> |
||||
<a href="./samples/api_xgrid_lines.html"> |
||||
Update x grid lines |
||||
</a> |
||||
<a href="./samples/api_ygrid_lines.html"> |
||||
Update y grid lines |
||||
</a> |
||||
</div> |
||||
</div> |
||||
<div class="row"> |
||||
<div class="col-md-4"> |
||||
<h3>Legend</h3> |
||||
<a href="./samples/api_legend.html"> |
||||
Update legend |
||||
</a> |
||||
</div> |
||||
<div class="col-md-4"> |
||||
<h3>Transform</h3> |
||||
<a href="./samples/api_transform.html"> |
||||
Transform chart |
||||
</a> |
||||
</div> |
||||
<div class="col-md-4"> |
||||
<h3>Element</h3> |
||||
<a href="./samples/element.html"> |
||||
Access svg element of chart |
||||
</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 class="col-md-4"> |
||||
<h3>Tooltip</h3> |
||||
<a href="./samples/api_tooltip_show.html"> |
||||
Show tooltip programmatically |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="section"> |
||||
<h2># <span>Other Library</span></h2> |
||||
<div> |
||||
<div class="row"> |
||||
<div class="col-md-4"> |
||||
<h3>RequireJS</h3> |
||||
<a href="./samples/requirejs.html"> |
||||
Load by RequireJS |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</body> |
||||
</html> |
||||
|
||||
@ -0,0 +1,13 @@
|
||||
c3.chart.internal.fn.isTimeSeries = function () { |
||||
console.log('custom isTimeSeries'); |
||||
return false; |
||||
}; |
||||
c3.chart.internal.fn.additionalConfig.test1 = undefined; |
||||
c3.chart.internal.fn.additionalConfig.test2 = undefined; |
||||
|
||||
c3.chart.fn.hoge = function () { |
||||
console.log("hoge()", this.internal.isTimeSeries()); |
||||
}; |
||||
c3.chart.fn.test = function () { |
||||
console.log('test()', this.internal.config.test1); |
||||
}; |
||||
@ -0,0 +1,81 @@
|
||||
var chart; |
||||
function refresh() { |
||||
if (suspendRefresh) |
||||
return; |
||||
chart.load({ |
||||
columns: [ |
||||
["Value"].concat(zoom(column, currentZoom, "t=>Math.round(t.avg())".toLambda())), |
||||
["xColumn"].concat(zoom(xColumn, currentZoom, "t=>t[0]".toLambda())), |
||||
] |
||||
}); |
||||
} |
||||
|
||||
function getChart() { |
||||
return chart; |
||||
} |
||||
function main() { |
||||
var last = 0; |
||||
var max = 10000; |
||||
var column = Array.generate(max, function (i) { |
||||
return last += Math.randomInt(-10, 10); |
||||
}); |
||||
var xColumn = Array.generateNumbers(0, max); |
||||
var options = { |
||||
bindto: "#divChart", |
||||
data: { |
||||
columns: [ |
||||
["Value"].concat(column), |
||||
["x"].concat(xColumn), |
||||
], |
||||
type: "line", |
||||
x: "x" |
||||
}, |
||||
zoom2: { |
||||
enabled: true, |
||||
} |
||||
}; |
||||
chart = c3ext.generate(options); |
||||
|
||||
window.setInterval(refreshStatus, 1000); |
||||
|
||||
function refreshStatus() { |
||||
var zoomInfo = chart.zoom2.getZoom(); |
||||
var info = { |
||||
reduced: chart.zoom2.maxItems(), |
||||
actual: (zoomInfo.currentZoom[1] - zoomInfo.currentZoom[0]), |
||||
range: zoomInfo.currentZoom[0] + "-" + zoomInfo.currentZoom[1], |
||||
total: zoomInfo.totalItems |
||||
}; |
||||
$("#status").text(JSON.stringify(info, null, " ")); |
||||
} |
||||
|
||||
}; |
||||
|
||||
if (typeof (Array.generate) == "undefined") { |
||||
Array.generate = function (length, generator) { |
||||
var list = new Array(length); |
||||
for (var i = 0; i < length; i++) { |
||||
list[i] = generator(i); |
||||
} |
||||
return list; |
||||
} |
||||
} |
||||
if (typeof (Math.randomInt) == "undefined") { |
||||
Math.randomInt = function (min, max) { |
||||
return Math.floor(Math.random() * (max - min + 1)) + min; |
||||
} |
||||
} |
||||
if (typeof (Array.generateNumbers) == "undefined") { |
||||
Array.generateNumbers = function (from, until) { |
||||
if (arguments.length == 1) { |
||||
until = from; |
||||
from = 0; |
||||
} |
||||
var length = until - from; |
||||
var list = new Array(length); |
||||
for (var i = 0; i < length; i++) { |
||||
list[i] = i + from; |
||||
} |
||||
return list; |
||||
} |
||||
} |
||||
@ -0,0 +1,81 @@
|
||||
<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', 30, 200, 100, 400, 150, 250], |
||||
['data2', 50, 20, 10, 40, 15, 25] |
||||
], |
||||
axes: { |
||||
data1: 'y', |
||||
data2: 'y2', |
||||
} |
||||
}, |
||||
axis: { |
||||
x: { |
||||
label: 'X Label' |
||||
}, |
||||
y: { |
||||
label: { |
||||
text: 'Y Axis Label', |
||||
position: 'outer-middle' |
||||
} |
||||
}, |
||||
y2: { |
||||
show: true, |
||||
label: { |
||||
text: 'Y2 Axis Label', |
||||
position: 'outer-middle' |
||||
} |
||||
} |
||||
}, |
||||
tooltip: { |
||||
// enabled: false |
||||
}, |
||||
zoom: { |
||||
// enabled: true |
||||
}, |
||||
subchart: { |
||||
// show: true |
||||
} |
||||
}); |
||||
|
||||
setTimeout(function () { |
||||
chart.axis.max(500); |
||||
}, 1000); |
||||
|
||||
setTimeout(function () { |
||||
chart.axis.min(-500); |
||||
}, 2000); |
||||
|
||||
setTimeout(function () { |
||||
chart.axis.max({y: 600, y2: 100}); |
||||
}, 3000); |
||||
|
||||
setTimeout(function () { |
||||
chart.axis.min({y: -600, y2: -100}); |
||||
}, 4000); |
||||
|
||||
setTimeout(function () { |
||||
chart.axis.range({max: 1000, min: -1000}); |
||||
}, 5000); |
||||
|
||||
setTimeout(function () { |
||||
chart.axis.range({min: {y: 1000}, max: {y: 2000}}); |
||||
}, 6000); |
||||
|
||||
setTimeout(function () { |
||||
chart.axis.range({max: {y: 600, y2: 100}, min: {y: -100, y2: 0}}); |
||||
}, 7000); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,48 @@
|
||||
<html> |
||||
<head> |
||||
<link href="/css/c3.css" rel="stylesheet" type="text/css"> |
||||
</head> |
||||
<body> |
||||
<div id="chart"></div> |
||||
<div id="message"></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: { |
||||
x: 'x', |
||||
columns: [ |
||||
['x', '1e-3', '1e-2', '1'], |
||||
['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250] |
||||
] |
||||
}, |
||||
axis: { |
||||
x: { |
||||
type: 'categorized' |
||||
} |
||||
} |
||||
}); |
||||
|
||||
setTimeout(function () { |
||||
d3.select('#message').node().innerHTML = "chart.categories() =>" + chart.categories(); |
||||
}, 1000); |
||||
|
||||
setTimeout(function () { |
||||
chart.categories(['updated 1', 'updated 2', 'updated 3', 'updated 4']); |
||||
d3.select('#message').node().innerHTML = ""; |
||||
}, 2000); |
||||
|
||||
setTimeout(function () { |
||||
d3.select('#message').node().innerHTML = "chart.category(1) =>" + chart.category(1); |
||||
}, 3000); |
||||
|
||||
setTimeout(function () { |
||||
chart.category(1, 'UPDATED 1'); |
||||
d3.select('#message').node().innerHTML = ""; |
||||
}, 4000); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,223 @@
|
||||
<html> |
||||
<head> |
||||
<link rel="stylesheet" type="text/css" href="/css/c3.css"> |
||||
<style> |
||||
.c3-region-1 { |
||||
fill: #dd3333; |
||||
fill-opacity: 0.8 |
||||
} |
||||
</style> |
||||
</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 padding = {}, types = {}, chart, generate = function () { return c3.generate({ |
||||
data: { |
||||
columns: [ |
||||
['data1'], |
||||
['data2'], |
||||
], |
||||
types: types, |
||||
labels: true |
||||
}, |
||||
bar: { |
||||
width: 10 |
||||
}, |
||||
axis: { |
||||
x: { |
||||
padding: padding |
||||
}, |
||||
y: { |
||||
/* |
||||
min: -100, |
||||
max: 1000 |
||||
*/ |
||||
} |
||||
}, |
||||
grid: { |
||||
x: { |
||||
show: true, |
||||
lines: [{value: 3, text:'Label 3'}, {value: 4.5, text: 'Label 4.5'}] |
||||
}, |
||||
y: { |
||||
show: true |
||||
} |
||||
}, |
||||
regions: [ |
||||
{start:2, end:4, class:'region1'}, |
||||
{start:100, end:200, axis:'y'}, |
||||
], |
||||
}); |
||||
}; |
||||
|
||||
function run() { |
||||
|
||||
chart = generate(); |
||||
|
||||
setTimeout(function () { |
||||
// Load only one data |
||||
chart.flow({ |
||||
rows: [ |
||||
['data1', 'data2', 'data3'], |
||||
[500, 100, 200], |
||||
[200, null, null], |
||||
[100, 50, null] |
||||
], |
||||
duration: 1500, |
||||
|
||||
done: function () { |
||||
// Load 2 data without data2 and remove 1 data |
||||
chart.flow({ |
||||
columns: [ |
||||
['data1', 200, 300], |
||||
['data3', 100, 100] |
||||
], |
||||
length: 0, |
||||
duration: 1500, |
||||
|
||||
done: function () { |
||||
chart.flow({ |
||||
columns: [ |
||||
['data1', 200, 300], |
||||
['data2', 200, 300], |
||||
['data3', 100, 100] |
||||
], |
||||
length: 2, |
||||
duration: 1500, |
||||
done: function () { |
||||
|
||||
chart.flow({ |
||||
columns: [ |
||||
['data1', 500], |
||||
['data2', 100], |
||||
['data3', 200] |
||||
], |
||||
length: 1, |
||||
duration: 1500, |
||||
}); |
||||
} |
||||
|
||||
}); |
||||
}// done |
||||
|
||||
}); |
||||
}, |
||||
|
||||
}); |
||||
}, 1000); |
||||
|
||||
setTimeout(function () { |
||||
chart.flow({ |
||||
columns: [ |
||||
['data1', 250], |
||||
['data2', 350], |
||||
['data3', 150] |
||||
], |
||||
length: 0 |
||||
}); |
||||
}, 9000); |
||||
|
||||
setTimeout(function () { |
||||
chart.flow({ |
||||
columns: [ |
||||
['data1', 100], |
||||
['data2', 50], |
||||
['data3', 300] |
||||
], |
||||
length: 2 |
||||
}); |
||||
}, 10000); |
||||
|
||||
setTimeout(function () { |
||||
chart.flow({ |
||||
columns: [ |
||||
['data1', 600], |
||||
['data2', 400], |
||||
['data3', 500] |
||||
], |
||||
to: 2, |
||||
}); |
||||
}, 11000); |
||||
|
||||
setTimeout(function () { |
||||
chart.flow({ |
||||
columns: [ |
||||
['data1', 100], |
||||
['data2', 200], |
||||
['data3', 300] |
||||
] |
||||
}); |
||||
}, 12000); |
||||
|
||||
setTimeout(function () { |
||||
chart = generate(); |
||||
}, 13000); |
||||
|
||||
setTimeout(function () { |
||||
chart.flow({ |
||||
columns: [ |
||||
['data1', 500, 100], |
||||
['data2', 100, 200], |
||||
['data3', 200, 300], |
||||
], |
||||
duration: 1500, |
||||
done: function () { |
||||
chart.flow({ |
||||
columns: [ |
||||
['data1', 200], |
||||
['data3', 100] |
||||
], |
||||
// duration: 1000, |
||||
length: 1 |
||||
}); |
||||
}, |
||||
}); |
||||
}, 14000); |
||||
|
||||
setTimeout(function () { |
||||
chart.flow({ |
||||
columns: [ |
||||
['data1', 200], |
||||
['data2', 300], |
||||
['data3', 100] |
||||
], |
||||
to: 1, |
||||
}); |
||||
}, 18000); |
||||
|
||||
setTimeout(function () { |
||||
chart.flow({ |
||||
columns: [ |
||||
['data1', 200], |
||||
['data2', 300], |
||||
['data3', 400] |
||||
] |
||||
}); |
||||
}, 19000); |
||||
|
||||
} |
||||
|
||||
run(); |
||||
|
||||
// Test for no padding |
||||
setTimeout(function () { |
||||
padding = {left: 0, right: 0}; |
||||
run(); |
||||
}, 22000); |
||||
|
||||
// Test for other chart types |
||||
setTimeout(function () { |
||||
types = { |
||||
data2: 'area', |
||||
data3: 'bar', |
||||
}; |
||||
run(); |
||||
}, 45000); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,173 @@
|
||||
<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 padding = {}, types = {}; |
||||
|
||||
var generate = function () { return c3.generate({ |
||||
data: { |
||||
x: 'x', |
||||
columns: [ |
||||
['x', ], |
||||
['data1', ], |
||||
['data2', ], |
||||
// ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-10', '2013-01-11', '2013-01-12'], |
||||
// ['data1', 30, 200, 100, 400, 150, 250], |
||||
// ['data2', 310, 400, 200, 100, 450, 150], |
||||
// ['data3', 310, 400, 200, 100, null, 150], |
||||
], |
||||
types: types, |
||||
// labels: true |
||||
}, |
||||
bar: { |
||||
width: 10 |
||||
}, |
||||
axis: { |
||||
x: { |
||||
type: 'timeseries', |
||||
tick: { |
||||
format: '%m/%d', |
||||
}, |
||||
padding: padding |
||||
}, |
||||
y: { |
||||
/* |
||||
min: -100, |
||||
max: 1000 |
||||
*/ |
||||
} |
||||
}, |
||||
/* not supported yet |
||||
grid: { |
||||
x: { |
||||
show: true |
||||
}, |
||||
y: { |
||||
show: true |
||||
} |
||||
} |
||||
*/ |
||||
}); }, chart; |
||||
|
||||
function run() { |
||||
|
||||
chart = generate(); |
||||
|
||||
setTimeout(function () { |
||||
chart.flow({ |
||||
columns: [ |
||||
['x', '2013-01-21'], |
||||
['data1', 500], |
||||
['data3', 200], |
||||
], |
||||
duration: 1500 |
||||
}); |
||||
}, 1000); |
||||
|
||||
setTimeout(function () { |
||||
chart.flow({ |
||||
columns: [ |
||||
['x', '2013-02-01', '2013-02-08', '2013-02-15'], |
||||
['data1', 200, 400, 300], |
||||
['data2', 100, 300, 200], |
||||
['data3', 100, 200, 50] |
||||
], |
||||
length: 1, |
||||
duration: 1500 |
||||
}); |
||||
}, 4000); |
||||
|
||||
setTimeout(function () { |
||||
console.log("Flow 1"); |
||||
chart.flow({ |
||||
columns: [ |
||||
['x', '2013-03-01', '2013-03-08'], |
||||
['data1', 200, 500], |
||||
['data2', 300, 400], |
||||
['data3', 400, 200] |
||||
], |
||||
to: '2013-02-08', |
||||
duration: 1500 |
||||
}); |
||||
}, 7000); |
||||
|
||||
setTimeout(function () { |
||||
chart.flow({ |
||||
columns: [ |
||||
['x', '2013-03-15', '2013-05-01'], |
||||
['data1', 200, 500], |
||||
['data2', 300, 400], |
||||
['data3', 400, 200] |
||||
], |
||||
length: 0, |
||||
duration: 1500 |
||||
}); |
||||
}, 10000); |
||||
|
||||
setTimeout(function () { |
||||
chart = generate(); |
||||
}, 14000); |
||||
|
||||
setTimeout(function () { |
||||
chart.flow({ |
||||
columns: [ |
||||
['x', '2013-01-21', '2013-01-25', '2013-01-26'], |
||||
['data1', 500, 300, 100], |
||||
['data3', 200, 150, null], |
||||
], |
||||
duration: 1500 |
||||
}); |
||||
}, 15000); |
||||
|
||||
setTimeout(function () { |
||||
chart.flow({ |
||||
columns: [ |
||||
['x', '2013-02-01'], |
||||
['data1', 200], |
||||
['data2', 100], |
||||
['data3', 100] |
||||
], |
||||
length: 0, |
||||
duration: 1500 |
||||
}); |
||||
}, 18000); |
||||
|
||||
setTimeout(function () { |
||||
chart.flow({ |
||||
columns: [ |
||||
['x', '2013-03-01'], |
||||
['data1', 200], |
||||
['data2', 300], |
||||
['data3', 400] |
||||
], |
||||
to: '2013-02-01', |
||||
duration: 1500 |
||||
}); |
||||
}, 21000); |
||||
}; |
||||
|
||||
run(); |
||||
|
||||
setTimeout(function () { |
||||
padding = {left: 0, right: 0}; |
||||
run(); |
||||
}, 25000); |
||||
|
||||
setTimeout(function () { |
||||
types = { |
||||
data2: 'area', |
||||
data3: 'bar', |
||||
} |
||||
run(); |
||||
}, 50000); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,136 @@
|
||||
<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 columns = []; |
||||
for (var i = 0; i < 5; i++ ) { |
||||
columns[i] = ['datahogehogeohgeohoge' + i, 10 * i, 20 * i, 30 * i]; |
||||
} |
||||
|
||||
var chart = c3.generate({ |
||||
data: { |
||||
columns: columns, |
||||
}, |
||||
axis: { |
||||
x: { |
||||
type: 'category' |
||||
} |
||||
} |
||||
}); |
||||
|
||||
setTimeout(function () { |
||||
chart.legend.hide(); |
||||
}, 1000); |
||||
|
||||
setTimeout(function () { |
||||
chart = c3.generate({ |
||||
data: { |
||||
columns: columns, |
||||
}, |
||||
axis: { |
||||
x: { |
||||
type: 'category' |
||||
} |
||||
}, |
||||
legend: { |
||||
position: 'right' |
||||
} |
||||
}); |
||||
}, 2000); |
||||
|
||||
setTimeout(function () { |
||||
chart.legend.hide(); |
||||
}, 3000); |
||||
|
||||
setTimeout(function () { |
||||
chart = c3.generate({ |
||||
data: { |
||||
columns: columns, |
||||
}, |
||||
axis: { |
||||
rotated: true |
||||
} |
||||
}); |
||||
}, 4000); |
||||
|
||||
setTimeout(function () { |
||||
chart.legend.hide(); |
||||
}, 5000); |
||||
|
||||
setTimeout(function () { |
||||
chart = c3.generate({ |
||||
data: { |
||||
columns: columns, |
||||
}, |
||||
legend: { |
||||
position: 'right' |
||||
}, |
||||
axis: { |
||||
rotated: true |
||||
} |
||||
}); |
||||
}, 6000); |
||||
|
||||
setTimeout(function () { |
||||
chart.legend.hide(); |
||||
}, 7000); |
||||
|
||||
setTimeout(function () { |
||||
chart = c3.generate({ |
||||
data: { |
||||
columns: columns, |
||||
}, |
||||
legend: { |
||||
show: false |
||||
} |
||||
}); |
||||
}, 8000); |
||||
|
||||
setTimeout(function () { |
||||
chart.legend.show(); |
||||
}, 9000); |
||||
|
||||
setTimeout(function () { |
||||
chart = c3.generate({ |
||||
data: { |
||||
columns: columns, |
||||
}, |
||||
legend: { |
||||
show: false |
||||
}, |
||||
axis: { |
||||
rotated: true |
||||
} |
||||
}); |
||||
}, 10000); |
||||
|
||||
setTimeout(function () { |
||||
chart.legend.show(); |
||||
}, 11000); |
||||
|
||||
setTimeout(function () { |
||||
chart = c3.generate({ |
||||
data: { |
||||
columns: columns, |
||||
}, |
||||
legend: { |
||||
position: 'right', |
||||
show: false |
||||
} |
||||
}); |
||||
}, 12000); |
||||
|
||||
setTimeout(function () { |
||||
chart.legend.show(); |
||||
}, 13000); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,38 @@
|
||||
<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] |
||||
], |
||||
} |
||||
}); |
||||
|
||||
setTimeout(function () { |
||||
chart.tooltip.show({ x: 1 }); |
||||
}, 1000); |
||||
|
||||
setTimeout(function () { |
||||
chart.tooltip.show({ index: 3 }); |
||||
}, 2000); |
||||
|
||||
setTimeout(function () { |
||||
chart.tooltip.show({ data: {x: 2} }); |
||||
}, 3000); |
||||
|
||||
setTimeout(function () { |
||||
chart.tooltip.hide(); |
||||
}, 4000); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,70 @@
|
||||
<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] |
||||
], |
||||
}, |
||||
}); |
||||
|
||||
setTimeout(function () { |
||||
chart.transform('bar'); |
||||
}, 1000); |
||||
|
||||
setTimeout(function () { |
||||
chart.transform('pie'); |
||||
}, 2000); |
||||
|
||||
setTimeout(function () { |
||||
chart.transform('donut'); |
||||
}, 3000); |
||||
|
||||
setTimeout(function () { |
||||
chart.transform('area'); |
||||
}, 4000); |
||||
|
||||
setTimeout(function () { |
||||
chart.transform('spline'); |
||||
}, 5000); |
||||
|
||||
setTimeout(function () { |
||||
chart = c3.generate({ |
||||
data: { |
||||
columns: [ |
||||
['data1', 30, 200, 100, 400, 150, 250], |
||||
['data2', 50, 20, 10, 40, 15, 25], |
||||
['data1_x', 50, 20, 10, 40, 15, 25], |
||||
['data2_x', 30, 200, 100, 400, 150, 250], |
||||
], |
||||
xs: { |
||||
data1: 'data1_x', |
||||
data2: 'data2_x', |
||||
}, |
||||
type: 'scatter' |
||||
}, |
||||
}); |
||||
}, 7000); |
||||
|
||||
setTimeout(function () { |
||||
chart.transform('pie'); |
||||
}, 8000); |
||||
|
||||
setTimeout(function () { |
||||
chart.transform('scatter'); |
||||
}, 9000); |
||||
|
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,125 @@
|
||||
<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 axis_rotated = false, axis_x_type = ""; |
||||
|
||||
var generate = function () { return c3.generate({ |
||||
bindto: '#chart', |
||||
data: { |
||||
columns: [ |
||||
['sample', 30, 200, 100, 400, 150, 250] |
||||
] |
||||
}, |
||||
axis: { |
||||
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(); |
||||
|
||||
var queue = [ |
||||
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(); |
||||
}, |
||||
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(); |
||||
}, |
||||
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> |
||||
</html> |
||||
@ -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: 'area', |
||||
}, |
||||
area: { |
||||
zerobased: false |
||||
} |
||||
}); |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,62 @@
|
||||
<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: { |
||||
columns: [ |
||||
['data1', 30, 200, 100, 400, 150, 250], |
||||
['data2', 300, 2000, 1000, 4000, 1500, 2500], |
||||
], |
||||
axes: { |
||||
data2: 'y2' |
||||
} |
||||
}, |
||||
axis: { |
||||
y: { |
||||
padding: { |
||||
top: 0.1, |
||||
bottom: 0.1, |
||||
unit: 'ratio' |
||||
} |
||||
}, |
||||
y2: { |
||||
show: true, |
||||
padding: { |
||||
top: 200, |
||||
bottom: 200, |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
|
||||
var chart2 = c3.generate({ |
||||
bindto: '#chart2', |
||||
data: { |
||||
columns: [ |
||||
['data1', 3000, 20000, 10000, 40000, 15000, 25000], |
||||
], |
||||
}, |
||||
axis: { |
||||
y: { |
||||
padding: { |
||||
top: 0.1, |
||||
bottom: 0.1, |
||||
unit: 'ratio' |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,87 @@
|
||||
<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: { |
||||
columns: [ |
||||
['sample', 100, 200, 100, 400, 150, 250] |
||||
], |
||||
}, |
||||
axis: { |
||||
x: { |
||||
min: -10, |
||||
max: 10, |
||||
} |
||||
}, |
||||
}); |
||||
|
||||
var chart2 = c3.generate({ |
||||
bindto: '#chart2', |
||||
data: { |
||||
x: 'x', |
||||
columns: [ |
||||
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'], |
||||
['sample', 100, 200, 100, 400, 150, 250] |
||||
], |
||||
}, |
||||
axis: { |
||||
x: { |
||||
type: 'timeseries', |
||||
min: new Date('2012-12-20'), |
||||
max: '2013-03-01', |
||||
tick : { |
||||
format : "%Y-%m-%d %H:%M:%S" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
|
||||
setTimeout(function () { |
||||
chart1.axis.max({x: 20}); |
||||
}, 1000); |
||||
|
||||
setTimeout(function () { |
||||
chart1.axis.min({x: -5}); |
||||
}, 2000); |
||||
|
||||
setTimeout(function () { |
||||
chart1.axis.range({max: {x: 5}, min: {x: 0}}); |
||||
}, 3000); |
||||
|
||||
setTimeout(function () { |
||||
chart2.axis.max({x: new Date('2013-02-01')}); |
||||
}, 1000); |
||||
|
||||
setTimeout(function () { |
||||
chart2.axis.min({x: new Date('2012-12-01')}); |
||||
}, 2000); |
||||
|
||||
setTimeout(function () { |
||||
chart2.axis.range({max: {x: '2013-01-06'}, min: {x: '2013-01-01'}}); |
||||
}, 3000); |
||||
|
||||
setTimeout(function () { |
||||
chart2.axis.max({y: 1000}); |
||||
}, 4000); |
||||
|
||||
setTimeout(function () { |
||||
chart2.axis.min({y: -1000}); |
||||
}, 5000); |
||||
|
||||
setTimeout(function () { |
||||
chart2.axis.range({max: {y: 400}, min: {y: 0}}); |
||||
}, 6000); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,76 @@
|
||||
<html> |
||||
<head> |
||||
<link rel="stylesheet" type="text/css" href="/css/c3.css"> |
||||
</head> |
||||
<body> |
||||
<div id="chart1"></div> |
||||
<div id="chart2"></div> |
||||
<div id="chart3"></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: { |
||||
columns: [ |
||||
['data1', 100, 200, 50, 300, 400, 290], |
||||
['data2', 10, 20, 50, 30, 10, 100], |
||||
], |
||||
}, |
||||
axis: { |
||||
x: { |
||||
extent: [2, 4.5] |
||||
} |
||||
}, |
||||
subchart: { |
||||
show: true |
||||
} |
||||
}); |
||||
|
||||
var chart2 = c3.generate({ |
||||
bindto: '#chart2', |
||||
data: { |
||||
x: 'x', |
||||
columns: [ |
||||
['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01', '2014-06-01'], |
||||
['data1', 100, 200, 50, 300, 400, 290], |
||||
['data2', 10, 20, 50, 30, 10, 100], |
||||
], |
||||
}, |
||||
axis: { |
||||
x: { |
||||
type: 'timeseries', |
||||
extent: ['2014-03-01', '2014-04-20'] |
||||
} |
||||
}, |
||||
subchart: { |
||||
show: true |
||||
} |
||||
}); |
||||
|
||||
var chart3 = c3.generate({ |
||||
bindto: '#chart3', |
||||
data: { |
||||
columns: [ |
||||
['data1', 100, 200, 50, 300, 400, 290], |
||||
['data2', 10, 20, 50, 30, 10, 100], |
||||
], |
||||
}, |
||||
axis: { |
||||
x: { |
||||
extent: [1, 4.2] |
||||
} |
||||
}, |
||||
zoom: { |
||||
enabled: true |
||||
}, |
||||
subchart: { |
||||
show: true |
||||
} |
||||
}); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,137 @@
|
||||
<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 data, axis_x_localtime; |
||||
|
||||
var data1 = { |
||||
x : 'date', |
||||
columns: [ |
||||
['date', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05'], |
||||
['sample', 30, 200, 100, 400, 150], |
||||
['sample2', 130, 300, 200, 450, 250] |
||||
] |
||||
}; |
||||
|
||||
var data2 = { |
||||
x : 'date', |
||||
columns: [ |
||||
['date', 1356966000000, 1357052400000, 1357138800000, 1357225200000, 1357311600000], |
||||
['sample', 30, 200, 100, 400, 150], |
||||
['sample2', 130, 300, 200, 450, 250] |
||||
] |
||||
}; |
||||
|
||||
var data3 = { |
||||
x : 'date', |
||||
columns: [ |
||||
['date', new Date(1356966000000), new Date(1357052400000), new Date(1357138800000), new Date(1357225200000), new Date(1357311600000)], |
||||
['sample', 30, 200, 100, 400, 150], |
||||
['sample2', 130, 300, 200, 450, 250] |
||||
] |
||||
}; |
||||
|
||||
var data4 = { |
||||
x : 'date', |
||||
x_format : '%Y%m%d', |
||||
columns: [ |
||||
['date', '20130101', '20130102', '20130103', '20130104', '20130105'], |
||||
['sample', 1030, 1200, 1100, 1400, 1150], |
||||
['sample2', 130, 300, 200, 450, 250] |
||||
] |
||||
}; |
||||
|
||||
var data5 = { |
||||
x : 'date', |
||||
x_format : '%Y%m%d %H:%M:%S', |
||||
columns: [ |
||||
['date', '20130101 00:00:00', '20130102 00:00:00', '20130103 00:00:00', '20130104 00:00:00', '20130105 00:00:00'], |
||||
['sample', 30, 200, 100, 400, 150], |
||||
['sample2', 1130, 1300, 1200, 1450, 1250] |
||||
] |
||||
}; |
||||
|
||||
var generate = function () { return c3.generate({ |
||||
bindto: '#chart', |
||||
data: data, |
||||
axis : { |
||||
x : { |
||||
type : 'timeseries', |
||||
tick : { |
||||
format : "%Y-%m-%d %H:%M:%S" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format |
||||
}, |
||||
localtime: axis_x_localtime |
||||
} |
||||
} |
||||
}); }; |
||||
|
||||
setTimeout(function () { |
||||
data = data1; |
||||
axis_x_localtime = true; |
||||
chart = generate(); |
||||
}, 1000); |
||||
|
||||
setTimeout(function () { |
||||
data = data1; |
||||
axis_x_localtime = false; |
||||
chart = generate(); |
||||
}, 2000); |
||||
|
||||
setTimeout(function () { |
||||
data = data2; |
||||
axis_x_localtime = true; |
||||
chart = generate(); |
||||
}, 3000); |
||||
|
||||
setTimeout(function () { |
||||
data = data2; |
||||
axis_x_localtime = false; |
||||
chart = generate(); |
||||
}, 4000); |
||||
|
||||
setTimeout(function () { |
||||
data = data3; |
||||
axis_x_localtime = true; |
||||
chart = generate(); |
||||
}, 5000); |
||||
|
||||
setTimeout(function () { |
||||
data = data3; |
||||
axis_x_localtime = false; |
||||
chart = generate(); |
||||
}, 6000); |
||||
|
||||
setTimeout(function () { |
||||
data = data4; |
||||
axis_x_localtime = true; |
||||
chart = generate(); |
||||
}, 7000); |
||||
|
||||
setTimeout(function () { |
||||
data = data4; |
||||
axis_x_localtime = false; |
||||
chart = generate(); |
||||
}, 8000); |
||||
|
||||
setTimeout(function () { |
||||
data = data5; |
||||
axis_x_localtime = true; |
||||
chart = generate(); |
||||
}, 9000); |
||||
|
||||
setTimeout(function () { |
||||
data = data5; |
||||
axis_x_localtime = false; |
||||
chart = generate(); |
||||
}, 10000); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,57 @@
|
||||
<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", |
||||
"axis": { |
||||
"x": { |
||||
"type": "timeseries", |
||||
"min": 1401879600000, |
||||
"max": 1401969600000, |
||||
} |
||||
}, |
||||
"data": { |
||||
"type": "line", |
||||
"columns": [ |
||||
["epoch", 1401879600000, 1401883200000, 1401886800000], |
||||
["y", 1955, 2419, 2262] |
||||
], |
||||
"xs": { |
||||
"y": "epoch" |
||||
} |
||||
} |
||||
}); |
||||
|
||||
var chart2 = c3.generate({ |
||||
"bindto": "#chart2", |
||||
"axis": { |
||||
"x": { |
||||
"type": "timeseries", |
||||
"min": new Date(1401879600000), |
||||
"max": new Date(1401969600000), |
||||
} |
||||
}, |
||||
"data": { |
||||
"type": "line", |
||||
"columns": [ |
||||
["epoch", 1401879600000, 1401883200000, 1401886800000], |
||||
["y", 1955, 2419, 2262] |
||||
], |
||||
"xs": { |
||||
"y": "epoch" |
||||
} |
||||
} |
||||
}); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,55 @@
|
||||
<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: { |
||||
columns: [ |
||||
['data1', 30, 200, 100, 400, 150, 250], |
||||
['data2', 50, 20, 10, 40, 15, 25] |
||||
], |
||||
}, |
||||
axis: { |
||||
x : { |
||||
tick: { |
||||
values: [2, 4] |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
|
||||
var chart2 = c3.generate({ |
||||
bindto: '#chart2', |
||||
data: { |
||||
x : 'date', |
||||
xFormat : '%Y%m%d', |
||||
columns: [ |
||||
['date', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'], |
||||
['sample', 30, 200, 100, 400, 150, 250], |
||||
['sample2', 130, 300, 200, 450, 250, 350] |
||||
] |
||||
}, |
||||
axis : { |
||||
x : { |
||||
type : 'timeseries', |
||||
tick : { |
||||
format : "%e %b %y", // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format |
||||
values: ['20130103', '20130104'] |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
|
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -1,22 +1,23 @@
|
||||
<html> |
||||
<head> |
||||
<link rel="stylesheet" type="text/css" href="/css/style.css"> |
||||
<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.min.js"></script> |
||||
<script src="/js/c3.js"></script> |
||||
<script> |
||||
var chart = c3.generate({ |
||||
bindto: '#chart', |
||||
data: { |
||||
columns: [ |
||||
['sample', 30, 200, 100, 400, 150, 250] |
||||
['data1'], |
||||
['data2'], |
||||
], |
||||
types: { |
||||
'sample': 'bar' |
||||
}, |
||||
axis: { |
||||
y: { |
||||
default: [-100, 100] |
||||
} |
||||
} |
||||
}); |
||||
@ -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> |
||||
@ -0,0 +1,41 @@
|
||||
<html> |
||||
<head> |
||||
<link href="/css/c3.css" rel="stylesheet" type="text/css"> |
||||
</head> |
||||
<body> |
||||
<div id="chart1" style="height:300px;"></div> |
||||
<div class="chart2" style="height:150px;"></div> |
||||
<div class="chart3" style="height:150px;"></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: { |
||||
columns: [ |
||||
['data1', 130, 210, 120, 440, 250, 350] |
||||
] |
||||
} |
||||
}); |
||||
|
||||
var chart2 = c3.generate({ |
||||
bindto: '.chart2', |
||||
data: { |
||||
columns: [ |
||||
['data1', 30, 200, 100, 400, 150, 250] |
||||
] |
||||
} |
||||
}); |
||||
|
||||
var chart3 = c3.generate({ |
||||
bindto: document.getElementsByClassName('chart3')[0], |
||||
data: { |
||||
columns: [ |
||||
['data1', 30, 200, 100, 400, 150, 250] |
||||
] |
||||
} |
||||
}); |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,49 @@
|
||||
<html> |
||||
<head> |
||||
<link href="/css/c3.css" rel="stylesheet" type="text/css"> |
||||
</head> |
||||
<body> |
||||
<div id="chart1"></div> |
||||
<div id="chart2"></div> |
||||
<div id="chart3"></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: { |
||||
columns: [ |
||||
['data1', 300, 350, 300, 0, 0, 0], |
||||
['data2', 130, 100, 140, 200, 150, 50] |
||||
], |
||||
type: 'area-spline' |
||||
} |
||||
}); |
||||
|
||||
var chart2 = c3.generate({ |
||||
bindto: '#chart2', |
||||
data: { |
||||
columns: [ |
||||
['data1', -300, -350, -300, 0, 0, 0], |
||||
['data2', -130, -100, -140, -200, -150, -50] |
||||
], |
||||
type: 'area-spline' |
||||
} |
||||
}); |
||||
|
||||
var chart3 = c3.generate({ |
||||
bindto: '#chart3', |
||||
data: { |
||||
columns: [ |
||||
['data1', -300, 350, -300, 0, 0, 0], |
||||
['data2', -130, -100, 140, -200, 150, -50] |
||||
], |
||||
type: 'area-spline' |
||||
} |
||||
}); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,52 @@
|
||||
<html> |
||||
<head> |
||||
<link href="/css/c3.css" rel="stylesheet" type="text/css"> |
||||
</head> |
||||
<body> |
||||
<div id="chart1"></div> |
||||
<div id="chart2"></div> |
||||
<div id="chart3"></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: { |
||||
columns: [ |
||||
['data1', 300, 350, 300, 0, 0, 100], |
||||
['data2', 130, 0, 140, 200, 0, 50], |
||||
], |
||||
type: 'area-spline', |
||||
groups: [['data1', 'data2']], |
||||
} |
||||
}); |
||||
|
||||
var chart2 = c3.generate({ |
||||
bindto: '#chart2', |
||||
data: { |
||||
columns: [ |
||||
['data1', -300, -350, -300, 0, 0, -100], |
||||
['data2', -130, 0, -140, -200, 0, -50] |
||||
], |
||||
type: 'area-spline', |
||||
groups: [['data1', 'data2']], |
||||
} |
||||
}); |
||||
|
||||
var chart3 = c3.generate({ |
||||
bindto: '#chart3', |
||||
data: { |
||||
columns: [ |
||||
['data1', -300, 350, -300, 0, 0, 100], |
||||
['data2', -130, 0, 140, -200, 150, -50] |
||||
], |
||||
type: 'area-spline', |
||||
groups: [['data1', 'data2']], |
||||
} |
||||
}); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,52 @@
|
||||
<html> |
||||
<head> |
||||
<link href="/css/c3.css" rel="stylesheet" type="text/css"> |
||||
</head> |
||||
<body> |
||||
<div id="chart1"></div> |
||||
<div id="chart2"></div> |
||||
<div id="chart3"></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: { |
||||
columns: [ |
||||
['data1', 300, 350, 300, 0, 0, 100], |
||||
['data2', 130, 0, 140, 200, 0, 50], |
||||
], |
||||
type: 'area', |
||||
groups: [['data1', 'data2']], |
||||
} |
||||
}); |
||||
|
||||
var chart2 = c3.generate({ |
||||
bindto: '#chart2', |
||||
data: { |
||||
columns: [ |
||||
['data1', -300, -350, -300, 0, 0, -100], |
||||
['data2', -130, 0, -140, -200, 0, -50] |
||||
], |
||||
type: 'area', |
||||
groups: [['data1', 'data2']], |
||||
} |
||||
}); |
||||
|
||||
var chart3 = c3.generate({ |
||||
bindto: '#chart3', |
||||
data: { |
||||
columns: [ |
||||
['data1', -300, 350, -300, 0, 0, 100], |
||||
['data2', -130, 0, 140, -200, 150, -50] |
||||
], |
||||
type: 'area', |
||||
groups: [['data1', 'data2']], |
||||
} |
||||
}); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,49 @@
|
||||
<html> |
||||
<head> |
||||
<link href="/css/c3.css" rel="stylesheet" type="text/css"> |
||||
</head> |
||||
<body> |
||||
<div id="chart1"></div> |
||||
<div id="chart2"></div> |
||||
<div id="chart3"></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: { |
||||
columns: [ |
||||
['data1', 300, 350, 300, 0, 0, 0], |
||||
['data2', 130, 100, 140, 200, 150, 50] |
||||
], |
||||
type: 'area-step' |
||||
} |
||||
}); |
||||
|
||||
var chart2 = c3.generate({ |
||||
bindto: '#chart2', |
||||
data: { |
||||
columns: [ |
||||
['data1', -300, -350, -300, 0, 0, 0], |
||||
['data2', -130, -100, -140, -200, -150, -50] |
||||
], |
||||
type: 'area-step' |
||||
} |
||||
}); |
||||
|
||||
var chart3 = c3.generate({ |
||||
bindto: '#chart3', |
||||
data: { |
||||
columns: [ |
||||
['data1', -300, 350, -300, 0, 0, 0], |
||||
['data2', -130, -100, 140, -200, 150, -50] |
||||
], |
||||
type: 'area-step' |
||||
} |
||||
}); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,52 @@
|
||||
<html> |
||||
<head> |
||||
<link href="/css/c3.css" rel="stylesheet" type="text/css"> |
||||
</head> |
||||
<body> |
||||
<div id="chart1"></div> |
||||
<div id="chart2"></div> |
||||
<div id="chart3"></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: { |
||||
columns: [ |
||||
['data1', 300, 350, 300, 0, 0, 0], |
||||
['data2', 130, 100, 140, 200, 150, 50] |
||||
], |
||||
type: 'area-step', |
||||
groups: [['data1', 'data2']], |
||||
} |
||||
}); |
||||
|
||||
var chart2 = c3.generate({ |
||||
bindto: '#chart2', |
||||
data: { |
||||
columns: [ |
||||
['data1', -300, -350, -300, 0, 0, 0], |
||||
['data2', -130, -100, -140, -200, -150, -50] |
||||
], |
||||
type: 'area-step', |
||||
groups: [['data1', 'data2']], |
||||
} |
||||
}); |
||||
|
||||
var chart3 = c3.generate({ |
||||
bindto: '#chart3', |
||||
data: { |
||||
columns: [ |
||||
['data1', -300, 350, -300, 0, 0, 0], |
||||
['data2', -130, -100, 140, -200, 150, -50] |
||||
], |
||||
type: 'area-step', |
||||
groups: [['data1', 'data2']], |
||||
} |
||||
}); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,181 @@
|
||||
<html> |
||||
<head> |
||||
<link href="/css/c3.css" rel="stylesheet" type="text/css"> |
||||
</head> |
||||
<body> |
||||
<div id="chart"></div> |
||||
<div id="chart1"></div> |
||||
<div id="chart2"></div> |
||||
<div id="chart3"></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: [ |
||||
[ 'data', 91.4 ] |
||||
], |
||||
type: 'gauge', |
||||
onmouseover: function (d, i) { console.log("onmouseover", d, i, this); }, |
||||
onmouseout: function (d, i) { console.log("onmouseout", d, i, this); }, |
||||
onclick: function (d, i) { console.log("onclick", d, i, this); }, |
||||
}, |
||||
gauge: { |
||||
label: { |
||||
// format: function(value, ratio) { |
||||
// return value; |
||||
// }, |
||||
// show: false // to turn off the min/max labels. |
||||
}, |
||||
// min: 0, // 0 is default, //can handle negative min e.g. vacuum / voltage / current flow / rate of change |
||||
// max: 100, // 100 is default |
||||
// units: ' %', |
||||
// width: 39 // for adjusting arc thickness |
||||
}, |
||||
color: { |
||||
pattern: ['#FF0000', '#F6C600', '#60B044'], // the three color levels for the percentage values. |
||||
threshold: { |
||||
// unit: 'value', // percentage is default |
||||
// max: 200, // 100 is default |
||||
values: [30, 60, 90] // alternate first value is 'value' |
||||
} |
||||
} |
||||
}); |
||||
|
||||
var chart1 = c3.generate({ |
||||
bindto: '#chart1', |
||||
data: { |
||||
columns: [ |
||||
['data', 75.0] |
||||
], |
||||
type: 'gauge', |
||||
}, |
||||
gauge: { |
||||
min: 50, |
||||
max: 100 |
||||
} |
||||
}); |
||||
|
||||
var chart2 = c3.generate({ |
||||
bindto: '#chart2', |
||||
data: { |
||||
columns: [ |
||||
['data', 0.0] |
||||
], |
||||
type: 'gauge', |
||||
}, |
||||
gauge: { |
||||
min: -100, |
||||
max: 100 |
||||
} |
||||
}); |
||||
|
||||
var chart3 = c3.generate({ |
||||
bindto: '#chart3', |
||||
data: { |
||||
columns: [ |
||||
['data', -75.0] |
||||
], |
||||
type: 'gauge', |
||||
}, |
||||
gauge: { |
||||
min: -100, |
||||
max: -50 |
||||
} |
||||
}); |
||||
|
||||
var cycleDemo = function () { |
||||
|
||||
setTimeout(function () { |
||||
d3.select('#chart .c3-chart-arcs-background') |
||||
.transition() |
||||
.style('fill', '#333'); |
||||
}, 1000); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [[ 'data', 10 ]] |
||||
}); |
||||
}, 2000); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [[ 'data', 50 ]] |
||||
}); |
||||
}, 3000); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [[ 'data', 91.4 ]] |
||||
}); |
||||
}, 4000); |
||||
|
||||
setTimeout(function () { |
||||
d3.select('#chart .c3-chart-arcs-background') |
||||
.transition() |
||||
.style('fill', '#e0e0e0'); |
||||
}, 5000); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [[ 'data', 0 ]] |
||||
}); |
||||
}, 6000); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [[ 'data', 50 ]] |
||||
}); |
||||
}, 7000); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [[ 'data', 91.4 ]] |
||||
}); |
||||
}, 8000); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [[ 'data', 0 ]] |
||||
}); |
||||
}, 9000); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [[ 'data', 50 ]] |
||||
}); |
||||
}, 10000); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [[ 'data', 91.4 ]] |
||||
}); |
||||
}, 11000); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [[ 'data', 0 ]] |
||||
}); |
||||
}, 12000); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [[ 'data', 50 ]] |
||||
}); |
||||
}, 13000); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [[ 'data', 91.4 ]] |
||||
}); |
||||
}, 14000); |
||||
|
||||
} |
||||
|
||||
cycleDemo(); |
||||
|
||||
// setInterval(cycleDemo, 30000); |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,52 @@
|
||||
<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: [ |
||||
// ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2], |
||||
["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3], |
||||
["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8], |
||||
["setosa", 30], |
||||
// ["versicolor", 40], |
||||
// ["virginica", 50], |
||||
], |
||||
type : 'pie', |
||||
onmouseover: function (d, i) { console.log("onmouseover", d, i, this); }, |
||||
onmouseout: function (d, i) { console.log("onmouseout", d, i, this); }, |
||||
onclick: function (d, i) { console.log("onclick", d, i, this); }, |
||||
}, |
||||
axis: { |
||||
x: { |
||||
label: 'Sepal.Width' |
||||
}, |
||||
y: { |
||||
label: 'Petal.Width' |
||||
} |
||||
} |
||||
}); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [ |
||||
["setosa", 130], |
||||
] |
||||
}); |
||||
}, 1000); |
||||
|
||||
setTimeout(function () { |
||||
chart.unload({ |
||||
ids: 'virginica' |
||||
}); |
||||
}, 2000); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,38 @@
|
||||
<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', 300, 350, 300, 0, 0, 0], |
||||
// ['data2', 130, 100, 140, 200, 150, 50] |
||||
], |
||||
types: { |
||||
data1: 'step', |
||||
data2: 'area-step' |
||||
}, |
||||
onclick: function (d) { console.log('clicked', d); } |
||||
}, |
||||
subchart: { |
||||
show: true |
||||
}, |
||||
}); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [ |
||||
['data2', 130, 100, 140, 200, 150, 50] |
||||
] |
||||
}); |
||||
}, 1000); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,50 @@
|
||||
<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: { |
||||
x: 'x', |
||||
columns: [ |
||||
['x', 'hogehoge', 'aaa', 'aaaaaa', 'a', 'b'], |
||||
['data1', 300, 350, 300, 0, 0, 0], |
||||
// ['data2', 130, 100, 140, 200, 150, 50] |
||||
], |
||||
types: { |
||||
data1: 'step', |
||||
data2: 'area-step' |
||||
}, |
||||
empty: { |
||||
abort: false, |
||||
label: { |
||||
text: 'hoge' |
||||
} |
||||
} |
||||
}, |
||||
axis: { |
||||
x: { |
||||
type: 'categorized' |
||||
} |
||||
}, |
||||
subchart: { |
||||
show: true |
||||
}, |
||||
}); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [ |
||||
['data2', 130, 100, 140, 200, 150, 50] |
||||
] |
||||
}); |
||||
}, 1000); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -1,40 +0,0 @@
|
||||
<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.min.js"></script> |
||||
<script> |
||||
var chart = c3.generate({ |
||||
bindto: '#chart', |
||||
data: { |
||||
x: 'x', |
||||
columns: [ |
||||
['x', 30, 40, 100, 200, 250, 350], |
||||
['sample', 30, 200, 100, 400, 150, 250] |
||||
] |
||||
} |
||||
}); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [ |
||||
['sample', 100, 300, 200, 300, 150, 300] |
||||
] |
||||
}) |
||||
}, 1000); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [ |
||||
['x', 130, 140, 200, 300, 450, 550], |
||||
['sample', 200, 350, 100, 200, 50, 100] |
||||
] |
||||
}) |
||||
}, 1500); |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,90 @@
|
||||
<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: { |
||||
json: { |
||||
data1: [30, 20, 50, 40, 60, 50], |
||||
data2: [200, 130, 90, 240, 130, 220], |
||||
data3: [300, 200, 160, 400, 250, 250] |
||||
} |
||||
} |
||||
}); |
||||
|
||||
setTimeout(function () { |
||||
chart = c3.generate({ |
||||
data: { |
||||
json: [{ |
||||
"date": "2014-06-03", |
||||
"443": "3000", |
||||
"995": "500" |
||||
}, { |
||||
"date": "2014-06-04", |
||||
"443": "1000", |
||||
}, { |
||||
"date": "2014-06-05", |
||||
"443": "5000", |
||||
"995": "1000" |
||||
}], |
||||
keys: { |
||||
x: 'date', |
||||
value: [ "443", "995" ] |
||||
} |
||||
}, |
||||
axis: { |
||||
x: { |
||||
type: "category" |
||||
} |
||||
} |
||||
}); |
||||
}, 1000); |
||||
|
||||
setTimeout(function () { |
||||
chart = c3.generate({ |
||||
data: { |
||||
// x: 'name', |
||||
json: [ |
||||
{ id: 1, name: 'abc', visits: 200 }, |
||||
{ id: 2, name: 'efg', visits: 400 }, |
||||
{ id: 3, name: 'pqr', visits: 150 }, |
||||
{ id: 4, name: 'xyz', visits: 420 }, |
||||
], |
||||
keys: { |
||||
x: 'name', |
||||
value: ['visits'], |
||||
} |
||||
}, |
||||
axis: { |
||||
x: { |
||||
type: 'categorized' |
||||
} |
||||
} |
||||
}); |
||||
}, 2000); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
json: [ |
||||
{ id: 1, name: 'abc', visits: 1200 }, |
||||
{ id: 2, name: 'efg', visits: 900 }, |
||||
{ id: 3, name: 'pqr', visits: 1150 }, |
||||
{ id: 4, name: 'xyz', visits: 1020 }, |
||||
], |
||||
keys: { |
||||
x: 'name', |
||||
value: ['visits'], |
||||
} |
||||
}); |
||||
}, 3000); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,225 @@
|
||||
<html> |
||||
<head> |
||||
<link href="/css/c3.css" rel="stylesheet" type="text/css"> |
||||
</head> |
||||
<body> |
||||
<div id="chart1"></div> |
||||
<div id="chart2"></div> |
||||
<div id="chart3"></div> |
||||
<div id="chart4"></div> |
||||
<div id="chart5"></div> |
||||
<div id="chart6"></div> |
||||
<div id="chart7"></div> |
||||
<div id="chart8"></div> |
||||
<div id="chart9" style="width:33%;"></div> |
||||
<div id="chart10"></div> |
||||
<div id="chart11"></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: { |
||||
columns: [ |
||||
['data1', 190, 200, 190, null], |
||||
], |
||||
type: 'bar', |
||||
labels: { |
||||
format: function (v, id) { |
||||
if (v === null) { |
||||
return 'Not Applicable'; |
||||
} |
||||
return d3.format('$')(v); |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
|
||||
var chart2 = c3.generate({ |
||||
bindto: '#chart2', |
||||
data: { |
||||
columns: [ |
||||
['data1', -190, -200, -190, null], |
||||
], |
||||
type: 'bar', |
||||
labels: { |
||||
format: function (v, id) { |
||||
if (v === null) { |
||||
return 'Not Applicable'; |
||||
} |
||||
return d3.format('$')(v); |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
|
||||
var chart3 = c3.generate({ |
||||
bindto: '#chart3', |
||||
data: { |
||||
columns: [ |
||||
['data1', -190, 200, 190, null], |
||||
], |
||||
type: 'bar', |
||||
labels: { |
||||
format: function (v, id) { |
||||
if (v === null) { |
||||
return 'Not Applicable'; |
||||
} |
||||
return d3.format('$')(v); |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
|
||||
var chart4 = c3.generate({ |
||||
bindto: '#chart4', |
||||
data: { |
||||
columns: [ |
||||
['data1', 190, 200, 190, null], |
||||
], |
||||
type: 'bar', |
||||
labels: { |
||||
format: function (v, id) { |
||||
if (v === null) { |
||||
return 'Not Applicable'; |
||||
} |
||||
return d3.format('$')(v); |
||||
} |
||||
} |
||||
}, |
||||
axis: { |
||||
rotated: true |
||||
} |
||||
}); |
||||
|
||||
var chart5 = c3.generate({ |
||||
bindto: '#chart5', |
||||
data: { |
||||
columns: [ |
||||
['data1', -190, -200, -190, null], |
||||
], |
||||
type: 'bar', |
||||
labels: { |
||||
format: function (v, id) { |
||||
if (v === null) { |
||||
return 'Not Applicable'; |
||||
} |
||||
return d3.format('$')(v); |
||||
} |
||||
} |
||||
}, |
||||
axis: { |
||||
rotated: true |
||||
} |
||||
}); |
||||
|
||||
var chart6 = c3.generate({ |
||||
bindto: '#chart6', |
||||
data: { |
||||
columns: [ |
||||
['data1', -190, 200, 190, null], |
||||
], |
||||
type: 'bar', |
||||
labels: { |
||||
format: function (v, id) { |
||||
if (v === null) { |
||||
return 'Not Applicable'; |
||||
} |
||||
return d3.format('$')(v); |
||||
} |
||||
} |
||||
}, |
||||
axis: { |
||||
rotated: true |
||||
} |
||||
}); |
||||
|
||||
var chart7 = c3.generate({ |
||||
bindto: '#chart7', |
||||
data: { |
||||
columns: [ |
||||
['data1', 30, 200, 100, 500, 150, 250], |
||||
['data2', 50, 20, 10, 40, 15, 25], |
||||
['data3', 250, 220, 210, 240, 215, 225] |
||||
], |
||||
groups: [['data1', 'data2', 'data3']], |
||||
labels: true, |
||||
type: 'bar', |
||||
}, |
||||
axis: { |
||||
rotated: true |
||||
} |
||||
}); |
||||
|
||||
var chart8 = c3.generate({ |
||||
bindto: '#chart8', |
||||
data: { |
||||
columns: [ |
||||
['data1', -30, -200, -100, -500, -150, -250], |
||||
['data2', -50, -20, -10, -40, -15, -25], |
||||
['data3', -250, -220, -210, -240, -215, -225] |
||||
], |
||||
groups: [['data1', 'data2', 'data3']], |
||||
labels: true, |
||||
type: 'bar', |
||||
}, |
||||
axis: { |
||||
rotated: true |
||||
} |
||||
}); |
||||
|
||||
var chart9 = c3.generate({ |
||||
bindto: '#chart9', |
||||
data: { |
||||
columns: [ |
||||
['data1', -19000000000000, 200, 19000000000000, null], |
||||
], |
||||
type: 'bar', |
||||
labels: { |
||||
format: function (v, id) { |
||||
if (v === null) { |
||||
return 'Not Applicable'; |
||||
} |
||||
return d3.format('$')(v); |
||||
} |
||||
} |
||||
}, |
||||
axis: { |
||||
rotated: true |
||||
} |
||||
}); |
||||
|
||||
var chart10 = c3.generate({ |
||||
bindto: '#chart10', |
||||
data: { |
||||
columns: [ |
||||
['data1', 300, 350, 300, 0, 0, 100], |
||||
['data2', 130, 0, 140, 200, 0, 50], |
||||
['data3', 130, 0, 140, 200, 0, 50], |
||||
['data4', 130, 0, 140, 200, 0, 50], |
||||
], |
||||
type: 'area', |
||||
groups: [['data1', 'data2', 'data3', 'data4']], |
||||
labels: true |
||||
} |
||||
}); |
||||
|
||||
var chart11 = c3.generate({ |
||||
bindto: '#chart11', |
||||
data: { |
||||
columns: [ |
||||
['data1', 300, 350, 300, 0, 0, 100], |
||||
['data2', 130, 0, 140, 200, 0, 50], |
||||
['data3', 130, 0, 140, 200, 0, 50], |
||||
['data4', 130, 0, 140, 200, 0, 50], |
||||
], |
||||
groups: [['data1', 'data2', 'data3', 'data4']], |
||||
labels: true |
||||
} |
||||
}); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,71 @@
|
||||
<html> |
||||
<head> |
||||
<link rel="stylesheet" type="text/css" href="/css/c3.css"> |
||||
</head> |
||||
<body> |
||||
<button id="btn1">Bar</button> |
||||
<button id="btn2">Line</button> |
||||
<button id="btn3">Area</button> |
||||
<div id="chart1"></div> |
||||
<div id="chart2"></div> |
||||
<div id="chart3"></div> |
||||
|
||||
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> |
||||
<script src="/js/c3.js"></script> |
||||
<script> |
||||
|
||||
var normalData = { |
||||
columns: [ |
||||
['data1', -1030, -1200, 1000], |
||||
['data2', -1150, -220, -1110] |
||||
], |
||||
labels: true, |
||||
}, |
||||
allPositiveData = { |
||||
columns: [ |
||||
['data1', 1030, 1200, 1100], |
||||
['data2', 2050, 2020, 2010] |
||||
], |
||||
labels: true, |
||||
}, |
||||
allNegativeData = { |
||||
columns: [ |
||||
['data1', -1030, -2200, -2100], |
||||
['data2', -1150, -2010, -1200] |
||||
], |
||||
labels: true, |
||||
} |
||||
|
||||
var chart1 = c3.generate({ |
||||
bindto: '#chart1', |
||||
data: normalData |
||||
}); |
||||
|
||||
var chart2 = c3.generate({ |
||||
bindto: '#chart2', |
||||
data: allPositiveData |
||||
}); |
||||
|
||||
var chart3 = c3.generate({ |
||||
bindto: '#chart3', |
||||
data: allNegativeData |
||||
}); |
||||
|
||||
d3.select('#btn1').on('click', function () { |
||||
chart1.transform('bar'); |
||||
chart2.transform('bar'); |
||||
chart3.transform('bar'); |
||||
}); |
||||
d3.select('#btn2').on('click', function () { |
||||
chart1.transform('line'); |
||||
chart2.transform('line'); |
||||
chart3.transform('line'); |
||||
}); |
||||
d3.select('#btn3').on('click', function () { |
||||
chart1.transform('area'); |
||||
chart2.transform('area'); |
||||
chart3.transform('area'); |
||||
}); |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,37 @@
|
||||
<html> |
||||
<head> |
||||
<link rel="stylesheet" type="text/css" href="/css/c3.css"> |
||||
</head> |
||||
<body> |
||||
<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 chart1 = c3.generate({ |
||||
data: { |
||||
columns: [ |
||||
['sample', 30, 200, 100, null, 150, 250] |
||||
], |
||||
}, |
||||
}); |
||||
|
||||
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> |
||||
@ -0,0 +1,37 @@
|
||||
<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', 100, 200], |
||||
], |
||||
empty: { |
||||
label: { |
||||
text: 'No Data' |
||||
} |
||||
} |
||||
}, |
||||
subchart: { |
||||
show: true |
||||
} |
||||
}); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [ |
||||
['data1', 100, 200], |
||||
], |
||||
}); |
||||
}, 1000); |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,73 @@
|
||||
<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", |
||||
"axis": { |
||||
"x": { |
||||
"type": "timeseries", |
||||
"tick": { |
||||
format: '%Y-%m-%d %H:%M:%S' |
||||
} |
||||
} |
||||
}, |
||||
"grid": { |
||||
"x": { |
||||
"lines": [ |
||||
{ "value": 1401883200000, "text": new Date(1401883200000), "color": "#f00" }, |
||||
] |
||||
} |
||||
}, |
||||
"data": { |
||||
"type": "line", |
||||
"columns": [ |
||||
["epoch", 1401879600000, 1401883200000, 1401886800000], |
||||
["y", 1955, 2419, 2262] |
||||
], |
||||
"xs": { |
||||
"y": "epoch" |
||||
} |
||||
} |
||||
}); |
||||
|
||||
var chart2 = c3.generate({ |
||||
"bindto": "#chart2", |
||||
"axis": { |
||||
"x": { |
||||
"type": "timeseries", |
||||
"tick": { |
||||
format: '%Y-%m-%d %H:%M:%S' |
||||
} |
||||
} |
||||
}, |
||||
"grid": { |
||||
"x": { |
||||
"lines": [ |
||||
{ "value": new Date(1401883200000), "text": new Date(1401883200000), "color": "#f00" }, |
||||
] |
||||
} |
||||
}, |
||||
"data": { |
||||
"type": "line", |
||||
"columns": [ |
||||
["epoch", 1401879600000, 1401883200000, 1401886800000], |
||||
["y", 1955, 2419, 2262] |
||||
], |
||||
"xs": { |
||||
"y": "epoch" |
||||
} |
||||
} |
||||
}); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,89 @@
|
||||
<html> |
||||
<head> |
||||
<link rel="stylesheet" type="text/css" href="/css/c3.css"> |
||||
</head> |
||||
<body> |
||||
<div id="chart1"></div> |
||||
<div id="chart2"></div> |
||||
<div id="chart3"></div> |
||||
|
||||
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> |
||||
<script src="/js/c3.js"></script> |
||||
<script> |
||||
|
||||
var smallData = [ |
||||
['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01', '2014-06-01'], |
||||
['sample', 30, 200, 100, 400, 150, 250] |
||||
], |
||||
bigData = [ |
||||
['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01', '2014-06-01', '2014-07-01', '2014-08-01', '2014-09-01', '2014-10-01', '2014-11-01', '2014-12-01'], |
||||
['sample', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250] |
||||
]; |
||||
|
||||
c3.generate({ |
||||
bindto: '#chart1', |
||||
data: { |
||||
x: 'x', |
||||
columns: smallData |
||||
}, |
||||
axis: { |
||||
x: { |
||||
type: 'timeseries', |
||||
tick: { |
||||
format: "%Y-%m-%d %H:%M:%S" |
||||
} |
||||
} |
||||
}, |
||||
grid: { |
||||
x: { |
||||
show: true, |
||||
}, |
||||
} |
||||
}); |
||||
|
||||
c3.generate({ |
||||
bindto: '#chart2', |
||||
data: { |
||||
x: 'x', |
||||
columns: smallData |
||||
}, |
||||
axis: { |
||||
rotated: true, |
||||
x: { |
||||
type: 'timeseries', |
||||
tick: { |
||||
format: "%Y-%m-%d %H:%M:%S" |
||||
} |
||||
} |
||||
}, |
||||
grid: { |
||||
x: { |
||||
show: true, |
||||
}, |
||||
} |
||||
}); |
||||
|
||||
c3.generate({ |
||||
bindto: '#chart3', |
||||
data: { |
||||
x: 'x', |
||||
columns: bigData |
||||
}, |
||||
axis: { |
||||
x: { |
||||
type: 'timeseries', |
||||
tick: { |
||||
format: "%Y-%m-%d %H:%M:%S" |
||||
} |
||||
} |
||||
}, |
||||
grid: { |
||||
x: { |
||||
show: true |
||||
} |
||||
} |
||||
}); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -1,23 +0,0 @@
|
||||
<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.min.js"></script> |
||||
<script> |
||||
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 |
||||
} |
||||
}); |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,87 @@
|
||||
<html> |
||||
<head> |
||||
<link rel="stylesheet" type="text/css" href="/css/c3.css"> |
||||
</head> |
||||
<body> |
||||
<div id="chart1"></div> |
||||
<div id="chart2"></div> |
||||
<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> |
||||
<script> |
||||
|
||||
var columns = []; |
||||
for (var i = 0; i < 28; i++ ) { |
||||
columns[i] = ['datahogehogeohgeohoge' + i, 10 * i, 20 * i]; |
||||
} |
||||
|
||||
c3.generate({ |
||||
bindto: '#chart1', |
||||
data: { |
||||
columns: columns, |
||||
}, |
||||
}); |
||||
|
||||
c3.generate({ |
||||
bindto: '#chart2', |
||||
data: { |
||||
columns: columns, |
||||
}, |
||||
legend: { |
||||
position: 'right' |
||||
}, |
||||
}); |
||||
|
||||
c3.generate({ |
||||
bindto: '#chart3', |
||||
data: { |
||||
columns: columns, |
||||
}, |
||||
legend: { |
||||
position: 'inset', |
||||
}, |
||||
}); |
||||
|
||||
c3.generate({ |
||||
bindto: '#chart4', |
||||
data: { |
||||
columns: columns, |
||||
}, |
||||
axis: { |
||||
rotated: true, |
||||
}, |
||||
}); |
||||
|
||||
c3.generate({ |
||||
bindto: '#chart5', |
||||
data: { |
||||
columns: columns, |
||||
}, |
||||
legend: { |
||||
position: 'right' |
||||
}, |
||||
axis: { |
||||
rotated: true, |
||||
}, |
||||
}); |
||||
|
||||
c3.generate({ |
||||
bindto: '#chart6', |
||||
data: { |
||||
columns: columns, |
||||
}, |
||||
legend: { |
||||
position: 'inset' |
||||
}, |
||||
axis: { |
||||
rotated: true, |
||||
}, |
||||
}); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,138 @@
|
||||
<html> |
||||
<head> |
||||
<link rel="stylesheet" type="text/css" href="/css/c3.css"> |
||||
<style type="text/css"> |
||||
<!-- |
||||
.c3 svg { |
||||
/* font-size: 13px;*/ |
||||
} |
||||
--> |
||||
</style> |
||||
</head> |
||||
<body> |
||||
<div id="chart1"></div> |
||||
<div id="chart2"></div> |
||||
<div id="chart3"></div> |
||||
<div id="chart4"></div> |
||||
<div id="chart5"></div> |
||||
<div id="chart6"></div> |
||||
<div id="chart7"></div> |
||||
<div id="chart8"></div> |
||||
<div id="chart9"></div> |
||||
<div id="chart10"></div> |
||||
|
||||
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> |
||||
<script src="/js/c3.js"></script> |
||||
<script> |
||||
|
||||
var option = { |
||||
padding: { |
||||
top: 50, |
||||
right: 200, |
||||
bottom: 50, |
||||
left: 200, |
||||
}, |
||||
data: { |
||||
columns: [ |
||||
['data1', 30, 200, 100, 400, 150, 250], |
||||
['data2', 130, 100, 200, 100, 150, 150] |
||||
], |
||||
axes: { |
||||
data2: 'y2' |
||||
}, |
||||
}, |
||||
axis: { |
||||
rotated: true, |
||||
y: { |
||||
label: { |
||||
text: 'Y Label', |
||||
position: 'outer-center' |
||||
} |
||||
}, |
||||
y2: { |
||||
show: true, |
||||
label: { |
||||
text: 'Y2 Label', |
||||
position: 'outer-center' |
||||
} |
||||
} |
||||
}, |
||||
legend: { |
||||
position: 'bottom' |
||||
}, |
||||
subchart: { |
||||
show: false |
||||
}, |
||||
grid: { |
||||
x: { |
||||
show: true, |
||||
}, |
||||
y: { |
||||
show: true, |
||||
} |
||||
} |
||||
}; |
||||
|
||||
|
||||
option.bindto = '#chart1'; |
||||
var chart1 = c3.generate(option); |
||||
|
||||
option.bindto = '#chart2'; |
||||
option.legend.position = 'right' |
||||
var chart2 = c3.generate(option); |
||||
|
||||
option.bindto = '#chart3'; |
||||
option.legend.position = 'bottom'; |
||||
option.subchart.show = true; |
||||
var chart3 = c3.generate(option); |
||||
|
||||
option.bindto = '#chart4'; |
||||
option.legend.position = 'right'; |
||||
option.subchart.show = true; |
||||
var chart4 = c3.generate(option); |
||||
|
||||
option.bindto = '#chart5'; |
||||
option.padding = { |
||||
top: 0, |
||||
right: 0, |
||||
bottom: 0, |
||||
left: 0, |
||||
}; |
||||
option.subchart.show = false; |
||||
option.legend.position = 'bottom'; |
||||
var chart5 = c3.generate(option); |
||||
|
||||
|
||||
option.axis.rotated = false; |
||||
|
||||
option.bindto = '#chart6'; |
||||
var chart6 = c3.generate(option); |
||||
|
||||
option.bindto = '#chart7'; |
||||
option.legend.position = 'right' |
||||
var chart7 = c3.generate(option); |
||||
|
||||
option.bindto = '#chart8'; |
||||
option.legend.position = 'bottom'; |
||||
option.subchart.show = true; |
||||
var chart8 = c3.generate(option); |
||||
|
||||
option.bindto = '#chart9'; |
||||
option.legend.position = 'right'; |
||||
option.subchart.show = true; |
||||
var chart9 = c3.generate(option); |
||||
|
||||
option.bindto = '#chart10'; |
||||
option.padding = { |
||||
top: 0, |
||||
right: 0, |
||||
bottom: 0, |
||||
left: 0, |
||||
}; |
||||
option.subchart.show = false; |
||||
option.legend.position = 'bottom'; |
||||
var chart10 = c3.generate(option); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,88 @@
|
||||
<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 axis_rotated = true; |
||||
|
||||
var generate = function () { return c3.generate({ |
||||
data: { |
||||
x: 'x', |
||||
columns: [ |
||||
['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01'], |
||||
['data1', 190, 200, 190, null], |
||||
], |
||||
type: 'bar', |
||||
labels: { |
||||
format: function (v, id) { |
||||
if (v === null) { |
||||
return 'Not Applicable'; |
||||
} |
||||
return d3.format('$')(v); |
||||
} |
||||
} |
||||
}, |
||||
axis: { |
||||
x: { |
||||
type: 'categorized' |
||||
}, |
||||
rotated: axis_rotated |
||||
}, |
||||
}); }, chart = generate(); |
||||
|
||||
setTimeout(function () { |
||||
chart.hide(); |
||||
}, 1000); |
||||
|
||||
setTimeout(function () { |
||||
chart.show(); |
||||
}, 2000); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [ |
||||
['data1', 300, 350, 100] |
||||
], |
||||
categories: ['2014-01-01 10:10:10', '2014-02-01 12:30:00', '2014-03-01 16:30:00'] |
||||
}); |
||||
}, 3000); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [ |
||||
['data1', 50, 100, 150] |
||||
], |
||||
categories: ['2014', '2015', '2016'] |
||||
}); |
||||
}, 4000); |
||||
|
||||
setTimeout(function () { |
||||
axis_rotated = false; |
||||
chart = generate(); |
||||
}, 5000); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [ |
||||
['data1', 300, 350, 100000] |
||||
], |
||||
}); |
||||
}, 6000); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [ |
||||
['data1', 50, 100, 150] |
||||
], |
||||
}); |
||||
}, 7000); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,27 @@
|
||||
<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/d3.min.js" charset="utf-8"></script> |
||||
<script src="/js/c3.js"></script> |
||||
<script src="/js/samples/plugin.js"></script> |
||||
<script> |
||||
var chart = c3.generate({ |
||||
data: { |
||||
columns: [ |
||||
['data1', 30, 200, 100, 400, 150, 250], |
||||
['data2', 50, 20, 10, 40, 15, 25] |
||||
], |
||||
onclick: function (d, element) { console.log("onclick", d, element); }, |
||||
onmouseover: function (d) { console.log("onmouseover", d); }, |
||||
onmouseout: function (d) { console.log("onmouseout", d); }, |
||||
}, |
||||
test1: 'TEST1', |
||||
}); |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,49 @@
|
||||
<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: { |
||||
x: 'date', |
||||
columns: [ |
||||
['date', '2014-01-01', '2014-01-10', '2014-01-20', '2014-01-30', '2014-02-01'], |
||||
['sample', 30, 200, 100, 400, 150, 250] |
||||
] |
||||
}, |
||||
axis: { |
||||
x: { |
||||
type: 'timeseries', |
||||
tick: { |
||||
format: '%Y%m%d %H:%M:%S' |
||||
} |
||||
}, |
||||
}, |
||||
regions: [ |
||||
{start: '2014-01-05', end: '2014-01-10'}, |
||||
// {start: new Date('2014-01-10'), end: new Date('2014-01-15')}, |
||||
{start: 1390608000000, end: 1391040000000} |
||||
] |
||||
}); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [ |
||||
['date', +new Date('2014-01-01'), +new Date('2014-01-10'), +new Date('2014-03-01')], |
||||
['sample', 100, 200, 300] |
||||
] |
||||
}); |
||||
chart.regions([ |
||||
{start: +new Date('2014-01-10'), end: +new Date('2014-01-15')} |
||||
]); |
||||
}, 1000); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -1,60 +1,67 @@
|
||||
<html> |
||||
<head> |
||||
<link href="/css/c3.css" rel="stylesheet" type="text/css"> |
||||
<link rel="stylesheet" type="text/css" href="/css/c3.css"> |
||||
</head> |
||||
<body> |
||||
<div id="chart1" style="height:300px;"></div> |
||||
<div id="chart2" style="height:150px;"></div> |
||||
<div id="chart3" style="height:150px;"></div> |
||||
<div id="chart1"></div> |
||||
<div id="chart2"></div> |
||||
<div id="chart3"></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: { |
||||
// xs: { |
||||
// 'data2': 'data1', |
||||
// }, |
||||
columns: [ |
||||
['data1', 130, 210, 120, 440, 250, 350], |
||||
['data1', 30, 200, 100, 400, 150, 250], |
||||
['data2', 50, 20, 10, 40, 15, 25] |
||||
], |
||||
// type: 'scatter' |
||||
// type: 'pie' |
||||
selection: { |
||||
enabled: true |
||||
} |
||||
labels: true |
||||
}, |
||||
zoom: { |
||||
enabled: true |
||||
}, |
||||
subchart : { |
||||
subchart: { |
||||
show: true |
||||
} |
||||
}, |
||||
}); |
||||
|
||||
var chart2 = c3.generate({ |
||||
bindto: '#chart2', |
||||
data: { |
||||
columns: [ |
||||
['data1', 30, 200, 100, 400, 150, 250], |
||||
['data2', 150, 120, 210, 240, 215, 125] |
||||
['data2', 50, 20, 10, 40, 15, 25] |
||||
], |
||||
// type: 'scatter' |
||||
// type: 'pie' |
||||
labels: true |
||||
}, |
||||
subchart: { |
||||
show: true |
||||
}, |
||||
axis: { |
||||
rotated: true |
||||
} |
||||
}); |
||||
|
||||
var chart3 = c3.generate({ |
||||
bindto: '#chart3', |
||||
data: { |
||||
columns: [ |
||||
['data1', 30, 200, 100, 400, 150, 250], |
||||
['data2', 550, 520, 510, 540, 515, 525] |
||||
['data2', 50, 20, 10, 40, 15, 25] |
||||
], |
||||
// type: 'scatter' |
||||
// type: 'pie' |
||||
labels: true |
||||
}, |
||||
axis: { |
||||
x: { |
||||
default: [3, 5] |
||||
} |
||||
}, |
||||
subchart: { |
||||
show: true |
||||
}, |
||||
}); |
||||
|
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,57 @@
|
||||
<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> |
||||
@ -0,0 +1,64 @@
|
||||
<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({ |
||||
bindto: '#chart', |
||||
data: { |
||||
x : 'x', |
||||
xFormat : '%Y%m%d', |
||||
columns: [ |
||||
['x', new Date('2013-01-01 00:00:00'), new Date('2013-01-02 00:00:00'), new Date('2013-01-03 00:00:00'), new Date('2013-01-04 00:00:00'), new Date('2013-01-05 00:00:00'), new Date('2013-01-06 00:00:00')], |
||||
['sample', 30, 200, 100, 400, 150, 250], |
||||
['sample2', 130, 300, 200, 450, 250, 350] |
||||
] |
||||
}, |
||||
axis : { |
||||
x : { |
||||
type : 'timeseries', |
||||
tick : { |
||||
// format : "%m/%d" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format |
||||
format : "%e %b %y" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [ |
||||
['sample', 200, 130, 90, 240, 130, 100], |
||||
['sample2', 300, 200, 160, 400, 250, 250] |
||||
] |
||||
}); |
||||
}, 1000); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [ |
||||
['x', '20140101', '20140201', '20140301', '20140401', '20140501', '20140601'], |
||||
['sample', 500, 630, 690, 440, 630, 900], |
||||
['sample2', 400, 600, 460, 200, 350, 450] |
||||
] |
||||
}); |
||||
}, 2000); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [ |
||||
['x', new Date('2014-01-02 00:00:00'), new Date('2014-02-02 00:00:00'), new Date('2014-03-02 00:00:00'), new Date('2014-04-02 00:00:00'), new Date('2014-05-02 00:00:00'), new Date('2014-06-02 00:00:00')], |
||||
['sample', 500, 630, 690, 440, 630, 900], |
||||
['sample2', 400, 600, 460, 200, 350, 450] |
||||
] |
||||
}); |
||||
}, 3000); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,72 @@
|
||||
<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 src="/js/c3.min.0.1.35.js"></script>--> |
||||
<script> |
||||
|
||||
var dates = ['date', |
||||
1401908040000, |
||||
1401907980000, |
||||
1401907920000, |
||||
1401907860000, |
||||
1401907800000, |
||||
1401907740000, |
||||
1401907680000, |
||||
1401907620000, |
||||
1401907560000, |
||||
1401907500000 |
||||
]; |
||||
|
||||
var chart = c3.generate({ |
||||
bindto: '#chart', |
||||
data: { |
||||
x : 'date', |
||||
columns: [ |
||||
dates, |
||||
['data1', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400], |
||||
['data2', 130, 300, 200, 450, 250, 350, 130, 300, 200, 450] |
||||
], |
||||
types: { |
||||
data1: 'bar', |
||||
} |
||||
}, |
||||
axis : { |
||||
x : { |
||||
type : 'timeseries', |
||||
tick : { |
||||
format : "%Y-%m-%d %H:%M:%S" |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
|
||||
/* |
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [ |
||||
['sample', 200, 130, 90, 240, 130, 100], |
||||
['sample2', 300, 200, 160, 400, 250, 250] |
||||
] |
||||
}); |
||||
}, 1000); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [ |
||||
['date', '20140101', '20140201', '20140301', '20140401', '20140501', '20140601'], |
||||
['sample', 500, 630, 690, 440, 630, 900], |
||||
['sample2', 400, 600, 460, 200, 350, 450] |
||||
] |
||||
}); |
||||
}, 2000); |
||||
|
||||
*/ |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -1,39 +0,0 @@
|
||||
<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.min.js"></script> |
||||
<script> |
||||
var chart = c3.generate({ |
||||
bindto: '#chart', |
||||
data: { |
||||
x : 'date', |
||||
x_format : '%Y%m%d', |
||||
columns: [ |
||||
// ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'], |
||||
['date', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'], |
||||
['sample', 30, 200, 100, 400, 150, 250] |
||||
] |
||||
}, |
||||
axis : { |
||||
x : { |
||||
type : 'timeseries' |
||||
} |
||||
}, |
||||
grid: { |
||||
x: { |
||||
lines: [{ |
||||
value: '20130104', |
||||
text: '2013/01/04', |
||||
class: 'lineFor20130104' |
||||
}] |
||||
} |
||||
} |
||||
}); |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,52 @@
|
||||
<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 rows = [["x","Views","GMV"]]; |
||||
rows = rows.concat([[1398709800000,780,136], |
||||
[1398450600000,812,134], |
||||
[1399401000000,784,154], |
||||
[1399228200000,786,135], |
||||
[1399573800000,802,131], |
||||
[1399487400000,773,166], |
||||
[1399314600000,787,146], |
||||
[1399919400000,1496,309], |
||||
[1399833000000,767,138], |
||||
[1399746600000,797,141], |
||||
[1399660200000,796,146], |
||||
[1398623400000,779,143], |
||||
[1399055400000,794,140], |
||||
[1398969000000,791,140], |
||||
[1398882600000,825,107], |
||||
[1399141800000,786,136], |
||||
[1398537000000,773,143], |
||||
[1398796200000,783,154], |
||||
[1400005800000,1754,284]].sort(function (a, b) { |
||||
return a[0] - b[0]; |
||||
})); |
||||
|
||||
var chart = c3.generate({ |
||||
bindto: '#chart', |
||||
data: { |
||||
x : 'x', |
||||
rows: rows |
||||
}, |
||||
axis : { |
||||
x : { |
||||
type : 'timeseries', |
||||
tick : { |
||||
format : "%Y-%m-%d" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,71 @@
|
||||
<html> |
||||
<head> |
||||
<link rel="stylesheet" type="text/css" href="/css/c3.css"> |
||||
</head> |
||||
<body> |
||||
<div id="chart1"></div> |
||||
<button onclick="load()">Load</button> |
||||
<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: { |
||||
columns: [ |
||||
generateData(100) |
||||
], |
||||
}, |
||||
axis: { |
||||
x: { |
||||
default: [30, 60] |
||||
} |
||||
}, |
||||
zoom: { |
||||
enabled: true, |
||||
onzoomstart: function (event) { |
||||
console.log("onzoomstart", event); |
||||
}, |
||||
onzoomend: function (domain) { |
||||
console.log("onzoomend", domain); |
||||
}, |
||||
}, |
||||
subchart: { show: true } |
||||
}); |
||||
|
||||
var chart2 = c3.generate({ |
||||
bindto: '#chart2', |
||||
data: { |
||||
columns: [ |
||||
generateData(100) |
||||
], |
||||
}, |
||||
axis: { |
||||
x: { |
||||
default: [30, 60] |
||||
} |
||||
}, |
||||
zoom: { enabled: true }, |
||||
}); |
||||
|
||||
function load() { |
||||
chart1.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> |
||||
@ -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> |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue