composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-13 15:34:12 +01:00
Code Issues Packages Projects Releases Wiki Activity
Files
3e9f4df1bfbef33cb591b60cea11cfd39ccf83d1
iTop/node_modules/c3/htdocs/js/test.js
Pierre Goiffon f3fbce7459 N°5621 Move C3 0.4.11 to NPM
2024-03-04 10:31:26 +01:00

6066 lines
154 KiB
JavaScript
Raw Blame History

var chart = c3.generate({
data: {
columns: [
['data1', 100, 100],
['data2', 50, 150]
],
selection: {
enabled: true,
isselectable: function(d) {
return d.id === 'data1';
}
},
onclick: function(d) {
console.log('clicked', d.id);
},
type: 'bar',
types: {
data2: 'line',
}
},
tooltip: {
grouped: false
}
});
/*
var chart = c3.generate({
bindto: '#chart',
data: {
type: 'bar',
columns: [
['data1', 3, 2],
['data2', 10],
['data3', null, 10],
],
groups: [
['data1', 'data2', 'data3'],
]
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
},
regions: [
{
axis: 'y',
start: 300,
end: 400,
class: 'green'
},
{
axis: 'y',
start: 0,
end: 100,
class: 'green'
}
]
});
setTimeout(function(){
var regions = [
{
axis: 'y',
start: 250,
end: 350,
class: 'red'
},
{
axis: 'y',
start: 25,
end: 75,
class: 'red'
}
];
chart.regions(regions);
}, 1000);
*/
/*
setTimeout(function(){
var regions = [
{
axis: 'y',
start: 250,
end: 350,
class: 'red'
},
{
axis: 'y',
start: 25,
end: 75,
class: 'red'
}
];
chart.regions.add(regions);
}, 2000);
*/
/*
var chart = c3.generate({
data: {
x: 'date',
columns: [
['date', '2012-12-24', '2012-12-25', '2012-12-26', '2012-12-27', '2012-12-28', '2012-12-29'],
['data1', 100, 200, 150, 300, 200],
['data2', 0, 500, 250, 700, 300],
// ['data3', 100, 200, 150, 300, 200],
// ['data4', 0, 500, 250, 700, 300],
// ['data6', 100, 200, 150, 300, 200],
// ['data7', 0, 1500, 1250, 1700, 1300],
],
// labels: true,
type: 'bar',
groups: [
['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
]
},
axis: {
x: {
type: 'timeseries',
// height: 200,
},
rotated: true,
},
});
*/
/*
var chart = c3.generate({
data: {
pairs: [
{ x: 'HOGEHOGE_0', y: 'HOGEHOGE_0', value: 10000 },
{ x: 'HOGEHOGE_0', y: 'HOGEHOGE_1', value: 20000 },
{ x: 'HOGEHOGE_0', y: 'HOGEHOGE_2', value: 39990 },
// { x: 'HOGEHOGE_1', y: 'HOGEHOGE_0', value: 50 },
{ x: 'HOGEHOGE_1', y: 'HOGEHOGE_1', value: 6000 },
{ x: 'HOGEHOGE_1', y: 'HOGEHOGE_2', value: 50000 },
{ x: 'HOGEHOGE_2', y: 'HOGEHOGE_0', value: 1000 },
{ x: 'HOGEHOGE_2', y: 'HOGEHOGE_1', value: 2000 },
{ x: 'HOGEHOGE_2', y: 'HOGEHOGE_2', value: 30000 },
],
type: 'bubble'
},
grid: {
x: {
show: true
},
y: {
show: true,
}
}
});
/*
window.grouped = true;
window.toggleGroups = function() {
if(grouped) {
chart.groups([]);
grouped = false;
} else {
chart.groups([['series1_y','series2_y']]);
grouped = true;
}
}
window.chart = c3.generate({
bindto: "#chart",
data: {
columns: [
['series0_x',2,3,4], //missing item
['series0_y',1,2,5], //missing item, breaks
['series1_x',0,2,3,4,5], //works
['series1_y',0,1,2,3,12], //works
['series2_x',1,2,3,4,6],
['series2_y',0,10,12,13,12],
],
type: "area",
xs: {
series0_y: "series0_x",
series1_y: "series1_x",
series2_y: "series2_x"
},
groups: [[
'series0_y',
'series1_y',
'series2_y'
]]
}
});
*/
/*
var limit = 8;
var charts = [];
for (var i = 1; i <= limit; i++) {
var el = document.createElement('div');
el.id = 'chart' + i;
$('body').append(el);
}
for (var i = 1; i <= limit; i++) {
var chart = c3.generate({
bindto: '#chart' + i,
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'area',
data2: 'area-spline'
}
}
});
charts.push(chart);
}
function update() {
for (var i = 0; i < limit; i++) {
charts[i].load({
columns: [
getRandomNum('data1'),
getRandomNum('data2'), ]
});
}
}
function getRandomNum(name) {
var datapoints = 60;
var data = [];
data.push(name)
for (var i = 0; i < datapoints; i++) {
data.push((Math.floor(Math.random() * (400 - 0)) + 0));
};
return data;
}
setInterval(function () {
update();
}, 1000);
*/
/*
var generateData = function() {
var data = [];
for (var i = 0; i < 5; i++) {
var datum = [];
datum.push('dataset ' + i);
for (var j = 0; j < 20; j++) {
datum.push(Math.random() * 1000);
}
data.push(datum);
}
return data;
};
var int, c;
var toggleTest = function() {
if (!int) {
int = setInterval(function(){
if (c) { c.destroy(); }
c = c3.generate({
data: {
columns: generateData()
}
});
}, 1000);
} else {
clearInterval(int);
}
};
d3.select('#redraw').on('click', toggleTest);
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', -100, -200, -150, -300, -200],
['data2', 0, -500, -250, -700, -300], ],
// labels: true,
// type: 'bar'
},
axis: {
rotated: true,
x: {
}
}
});
setTimeout(function () {
chart.load({
columns: [
['data3', -100, -200, -150, -300, -200],
],
});
}, 1000);
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 100, 200, 50, 100, 200, 50, 100, 200, 50, 100, 200, 50],
['data2', 300, 400, 100],
],
// type: 'pie',
},
pie: {
// expand: {
// duration: 300
// }
},
legend: {
padding: 100,
item: {
tile: {
width: 20,
height: 2
}
}
},
// zoom: {
// enabled: true,
// x: {
// min: -10,
// max: 20
// }
// },
subchart: {
show: true,
axis: {
x: {
show: false
}
}
}
});
*/
/*
var chart = c3.generate({
padding: {
left: 200,
},
legend: {
show: false
},
data: {
type: 'bar',
columns: [
['foo', 2621.73, 30260.59, 53622.22, -9.03, 816.62, 0, 58.33, 0, 0, 0, 35106.75]
]
},
axis: {
rotated: true,
x: {
type: 'category',
categories: ['Anthoney Schneider', 'Brenton Streich', 'Brigette Stehr',
'Caitlyn Gulgowski', 'Dr. Shaniya Little', 'Jax Rath',
'Leonor Stanton DDS', 'Miss Hazelle Kunze PhD', 'Mr. Landon Emmerich',
'Nicole Gleichner', 'Odelia Kozey']
}
}
});
*/
/*
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', 1, 2, 4, 5],
['data1', 30, 200, 100, 400, 150],
['data2', 100, 30, 200, 320, 50],
]
},
axis: {
rotated: true,
x: {
type: 'category',
tick: {
format: function () {
return 'FORMATTED FORMATTED aaaaaaaaaaaaaaaaaaaaa FORMATTED ';
}
}
},
y: {
}
}
});
setTimeout(function () {
chart.load({
columns: [['data1', 300, 230, 400, 520, 230, 250, 330, 280, 250]]
});
}, 1000);
*/
/*
var args = {
data: {
columns: [
['data1', -1030, -2200, -2100],
['data2', -1150, -2010, -1200],
['data3', 1030, 2200, 2100],
['data4', 1150, 2010, 1200]
],
type: 'bar',
labels: true,
groups: [['data1', 'data2'], ['data3', 'data4']]
},
padding: {
// left: 100
}
};
function draw() {
args.bindto = '#chart';
var chart = c3.generate(args);
args.bindto = '#chart1';
var chart1 = c3.generate(args);
args.bindto = '#chart2';
var chart2 = c3.generate(args);
args.bindto = '#chart3';
var chart3 = c3.generate(args);
args.bindto = '#chart4';
var chart4 = c3.generate(args);
args.bindto = '#chart5';
var chart5 = c3.generate(args);
args.bindto = '#chart6';
var chart6 = c3.generate(args);
args.bindto = '#chart7';
var chart7 = c3.generate(args);
args.bindto = '#chart8';
var chart8 = c3.generate(args);
}
//d3.select('#redraw').on('click', function () {
draw();
//});
*/
/*
var chart = c3.generate({
axis: { x: { type: "categorized", } },
data: {
type: "bar",
types: {"ddd": "line"},
columns: [
["aaa", "a", "b", "c"],
["bbb", 10,20,30],
["ccc", 40,50,60],
["ddd", 70,80,90],
],
x: "aaa",
groups: [["aaa", "bbb", "ccc"]],
},
});
window.setTimeout(function(){
chart.load({
type: "bar",
types: {"ddd": "line"},
columns: [
["aaa", "a", "b", "c"],
["bbb", 30,20,30],
["ccc", 80,50,60],
["ddd", 20,80,90],
],
x: "aaa",
groups: [["aaa", "bbb", "ccc"]],
});
}, 1000);
*/
/*
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', 'category 1 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', 'category 2', 'category 3', 'category 4', 'category 5', 'category 6'],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
},
axis: {
x: {
type: 'category',
tick: {
// rotate: 30
}
}
}
});
*/
/*
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '2012-12-24', '2012-12-25', '2012-12-26', '2012-12-27', '2012-12-28', '2012-12-29', '2012-12-30', '2012-12-31'],
['data1', parseInt(Math.random() * 100), parseInt(Math.random() * 100), parseInt(Math.random() * 100), parseInt(Math.random() * 100), parseInt(Math.random() * 100), parseInt(Math.random() * 100), parseInt(Math.random() * 100), parseInt(Math.random() * 100)], ]
},
axis: {
x: {
type: 'timeseries',
tick: {
rotate: 75,
fit: false
}
}
}
});
var format = d3.time.format("%Y-%m-%d");
var date = new Date(2013, 0, 1);
setTimeout(function () {
chart.flow({
columns: [
['x', format(date)],
['data1', parseInt(Math.random() * 100)]
]
});
date.setDate(date.getDate() + 1);
}, 1000);
*/
/*
var generateData = function() {
var data = [];
for (var i = 0; i < 3; i++) {
var datum = [];
datum.push('dataset ' + i);
for (var j = 0; j < 20; j++) {
datum.push(Math.random() * 1000);
}
data.push(datum);
}
return data;
};
var chart = c3.generate({
bindto: null,
data: {
// columns: generateData(),
columns: [
['data1', 100, 200, 50],
['data2', 300, 400, 100],
],
labels: true
}
});
setTimeout(function () {
$('#chart').append(chart.element);
}, 1000);
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1'],
['data2'],
],
labels: true
},
bar: {
width: 10
},
axis: {
x: {
},
y: {
}
},
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'},
],
});
setTimeout(function () {
console.log("flow");
chart.flow({
rows: [
['data1', 'data2', 'data3'],
[500, 100, 200],
[200, null, null],
[100, 50, null]
],
});
}, 1000);
*/
/*
var chart1 = c3.generate({
data: {
columns: [
['data1', -1030, -2200, -2100],
['data2', -1150, -2010, -1200]
// ['data1', 1030],
// ['data2', 1150]
],
type: 'area',
labels: true,
groups: [['data1', 'data2']]
},
axis: {
}
});
*/
/*
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'
}
},
regions: [
{start: '2014-01-05', end: '2014-01-10'},
{start: new Date('2014/01/15'), end: new Date('20 Jan 2014')},
{start: 1390575600000, end: 1391007600000} // start => 2014-01-25 00:00:00, end => 2014-01-30 00:00:00
]
});
*/
/*
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: {
y: {
label: 'Y Axis Label'
},
y2: {
// show: true,
label: 'Y2 Axis Label'
}
}
});
*/
/*
setTimeout(function () {
chart.axis.labels({y2: 'New Y2 Axis Label'});
}, 1000);
setTimeout(function () {
chart.axis.labels({y: 'New Y Axis Label', y2: 'New Y2 Axis Label Again'});
}, 2000);
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 30, -200, -100, 400, 150, 250],
['data2', -50, 150, -150, 150, -50, -150],
['data3', -100, 100, -40, 100, -150, -50]
],
groups: [
['data1', 'data2']
],
type: 'bar',
labels: {
// format: function (v, id, i, j) { return "Default Format"; }
format: {
y: d3.format('$'),
// y: function (v, id, i, j) { return "Y Format"; },
// y2: function (v, id, i, j) { return "Y2 Format"; }
}
}
},
grid: {
y: {
lines: [{value: 0}]
}
}
});
*/
/*
var chart = c3.generate({
legend: {
show:false
},
data: {
x:'x',
columns: [
['x','aaa','bbbs','abcdefgh','ddd','e','f','gggg12'],
['Cost1', 3,0,8,34,6,8,4],
['Cost', 3,0,8,34,6,8,4],
],
type: 'bar',
labels:{
format: {
y: function (v,id,i,j){ return '$'+v;}
}
},
groups:[]
},
axis: {
// rotated: true,
x:{
type:'category',
label:{
text: 'Users',
position: 'outer-middle'
}
},
y:{
label:{
text: 'Cost ($)',
position: 'outer-center',
},
},
},
legend: {
// position: 'right'
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250],
['data2', 100, 30, 200, 320, 50, 150, 230, 80, 150],
],
selection: {
// enabled: true
}
}
});
*/
/*
setTimeout(function () {
chart.focus('data1');
}, 1000);
setTimeout(function () {
chart.revert('data2');
}, 2000);
*/
/*
setTimeout(function () {
chart.load({
columns: [['data1', 300, 230, 400, 520, 230, 250, 330, 280, 250]]
});
}, 1000);
*/
/*
setTimeout(function () {
chart.flow({
columns: [
['data1', 390, 400, 200, 500]
],
duration: 1000,
});
}, 1000);
*/
/*
var chart = c3.generate({
data: {
url: 'hoge'
// columns: [
// ['sample', 30, 200, 100, 400, 150, 250]
// ]
},
axis: {
rotated: true
},
grid: {
x: {
lines: [
{value: 3, text: 'Lable 3', position: 'start'},
{value: 4.5, text: 'Lable 4.5'},
{value: 1, text: 'Lable 1', position: 'middle'}
]
},
y: {
lines: [
{value: 30, text: 'Lable 30', position: 'start'},
{value: 145, text: 'Lable 145'},
{value: 225, text: 'Lable 225', position: 'middle'}
]
}
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 30],
],
type: 'gauge',
},
gauge: {
max: 100
}
});
setTimeout(function () {
chart.internal.config.gauge_max = 200;
chart.flush();
chart.load({
columns: [
['data1', 30]
]
});
}, 1000);
*/
/*
var chart = c3.generate({
size:{width:450, height: 250},
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
var nextLoad = 0;
var load = [
function () {
chart.load({
columns: [
['data1', 230, 190, 300, 500, 300, 400]
]
});
},
function () {
chart.unload({
ids: 'data3'
});
},
function () {
chart.load({
columns: [
['data2', 230, 190, 300, 500, 300, 400]
]
});
},
function(){
chart.load({
columns: [
['data3', 130, 150, 200, 300, 200, 100]
]
});
},
function () {
chart.unload({
ids: 'data1'
});
},
function(){
chart.load({
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
});
}
];
setInterval(function(){
load[nextLoad%load.length]();
nextLoad++;
}, 500);
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', null],
['data2', null],
['data3', null]
],
type: 'pie',
}
});
setTimeout(function () {
chart.load({
columns: [
['data1', 10],
['data2', 100],
['data3', 100],
]
});
}, 1000);
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 30, 20, 50, 40, 60, 50],
['data2', 200, 130, 90, 240, 130, 220],
['data3', 300, 200, 160, 400, 250, 250]
],
type: 'bar',
colors: {
data1: '#ff0000',
data2: '#00ff00',
data3: '#0000ff'
},
color: function (color, d) {
// d will be 'id' when called for legends
return d.id && d.id === 'data3' ? d3.rgb(color).darker(d.value / 150) : color;
}
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 10, 200],
['data2', 20, 300],
['data3', 120, 330],
['data4', 220, 310],
['data5', 320, 350],
['data6', 420, 370],
],
names: {
new_data: 'New Data',
data1: 'Data 1',
data2: 'Data 2',
data3: 'Data 3',
data4: 'Data 4',
data5: 'Data 5',
data6: 'Data 6',
}
// type: 'bar'
},
axis: {
x: {
// type: 'category',
// min: 0,
// max: 5,
tick: {
// values: [0, 1, 2, 3, 4, 5],
// fit: false
}
}
}
});
setTimeout(function () {
chart.unload({
ids: 'data3'
});
}, 1000);
setTimeout(function () {
chart.load({
columns: [
['new_data', 100, 100],
]
});
}, 2000);
*/
/*
var chart = c3.generate({
height: 300,
data: {
x: 'date',
xFormat: '%Y%m%d',
rows: [
['date', 'price'],
['20140915', 50],
['20140916', 20],
['20140917', 10],
['20140918', 40],
['20140919', 15],
['20140920', 25]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
}
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 30],
['data2', 120],
],
type : 'donut',
onclick: function (d, i) { console.log("onclick", d, i); },
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
},
donut: {
title: "Iris Petal Width"
},
});
setTimeout(function () {
chart.load({
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],
]
});
}, 1500);
setTimeout(function () {
chart.unload({
ids: 'data1'
});
chart.unload({
ids: 'data2'
});
}, 2500);
*/
/*
var generateData = function() {
var data = [];
for (var i = 0; i < 5; i++) {
var datum = [];
datum.push('dataset ' + i);
for (var j = 0; j < 20; j++) {
datum.push(Math.random() * 1000);
}
data.push(datum);
}
return data;
};
var int, chart;
var toggleTest = function() {
if (!int) {
int = setInterval(function(){
if (chart) {
chart = chart.destroy();
}
chart = c3.generate({
data: {
columns: generateData()
}
});
}, 500);
} else {
clearInterval(int);
}
};
d3.select('#load').on('click', toggleTest);
*/
/*
var cols = [["x","2014-01-01T00:00:00.000Z","2014-01-01T03:37:26.004Z","2014-01-01T07:14:52.008Z","2014-01-01T10:52:19.002Z","2014-01-01T14:29:45.006Z"], ["num1",7.753290000000037,7.753290000000037,7.753290000000037,7.753290000000037,7.753290000000037], ["num2",1.6549999999999927,1.654999999999993,1.6549999999999927,1.654999999999993,1.6549999999999927], "num3",100,10,40,90,90];
cols[0] = _.map(cols[0], function(d) {
if (d !== 'x') {
var date = d;
if (!/.*\.\d+$/.test(date)) {
date += '.0';
}
return d3.time.format('%Y-%m-%dT%H:%M:%S.%LZ').parse(d);
} else {
return d;
}
});
var types = {"types":{"num1":"scatter","num2":"area","num3":"line"},"axes":{"num1":"y2","num2":"y2","num3":"y"}};
var chart = c3.generate({
data: {
x: 'x',
// types: types.types,
columns: cols,
selection: {
// enabled: false
},
type: 'pie'
},
subchart: {
// show: true
},
axis: {
type: 'timeseries'
},
legend: {
// show: false
},
point: {
r: function(item) {
var val = item.value;
console.log("item =>", item);
if (val === null || val === undefined || val === 0) {
return 0;
} else {
return 4.5;
}
}
},
tooltip: {
// grouped: false
}
});
*/
/*
var chart;
$(function () {
function redraw() {
chart = c3.generate({
title: "As of 2\/4\/2014 @ 1:19 PM CST",
padding: {
left: 30
},
data: {
x: 'date',
x_format: '%b %y',
columns: [
['date', "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", "2015-01-01"],
['Value', 0.077500000000000568, 0.084999999999993747, 0.090000000000003411, 0.090000000000003411, 0.094999999999998863, 0.094999999999998863, 0.099999999999994316, 0.10999999999999943, 0.10999999999999943, 0.12000000000000455, 0.12999999999999545, 0.14000000000000057]
],
types: {
Value: 'area'
}
},
legend: {
show: false
},
axis: {
y: {
min: 0,
max: 0.2,
padding: {
top: 0,
bottom: 0
}
},
x: {
type: 'timeseries',
tick: {
format: '%m/%y'
}
}
},
tooltip : {
format : {
title: d3.time.format('%B %Y'),
value: d3.format(".3r")
}
},
grid: {
y: {
show: true
}
}
});
}
$('#hide').click(function() {
$('.overlay').show();
$('.widget').hide();
});
$('#show').click(function() {
$('.overlay').hide();
$('.widget').show();
});
$('#resize').click(function() {
$('#widget').resize();
});
$('#redraw').click(function(){
redraw();
});
redraw();
});
*/
/*
c3.generate({
data: {
x: 'categories',
columns: [
['categories', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',],
['data1', 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
['data2', 4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19],
]
},
axis: {
x: {
type: 'category',
tick: {
count: 4
}
}
}
});
*/
/*
c3.chart.internal.fn.xForRotatedTickText = function () {
return -10;
};
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]
],
type: 'donut'
},
donut: {
title: 'HogeHoge'
},
axis: {
x: {
type: 'categories',
tick: {
rotate: 60
}
}
},
});
*/
/*
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'
}
},
regions: [
{start: '2014-01-05', end: '2014-01-10'},
{start: new Date('2014-01-15 00:00:00'), end: new Date('2014-01-20 00:00:00')},
{start: 1390575600000, end: 1391007600000} // start => 2014-01-25 00:00:00, end => 2014-01-30 00:00:00
],
onrendered: function () {
console.log('rendered');
}
});
setTimeout(function () {
chart.load({
json: {
data4: [130, 220, 350, 140, 360, 250, 100, 300]
}
});
}, 1000);
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 30000, 20000, 10000, 40000, 15000, 250000],
['data2', 100, 200, 100, 40, 150, 250]
],
axes: {
data2: 'y2'
}
},
axis : {
y : {
tick: {
format: d3.format("s")
}
},
y2: {
show: true,
tick: {
format: d3.format("$")
}
}
},
tooltip: {
format: {
title: function (d) { return 'Data ' + d; },
value: function (value, ratio, id) {
var format = id === 'data1' ? d3.format(',') : d3.format('$');
return format(value);
}
// value: d3.format(',') // apply this format to both y and y2
}
}
});
*/
/*
var categories = [];
var count = [];
for (var i = 0; i < 20; i++) {
categories.push('ABC-DEFG');
count.push(5);
}
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x'].concat(categories),
['count'].concat(count)
],
groups: [
['count']
],
type: 'bar'
},
axis: {
x: {
type: 'category',
tick: {
format: function (x) {
var category = this.categoryName(x);
return category.substr(0, 2) + '..';
}
}
}
}
});
*/
/*
setTimeout(function () {
chart.focus('data1');
}, 1000);
setTimeout(function () {
chart.revert();
}, 2000);
setTimeout(function () {
chart.load({
json: {
data4: [130, 220, 350, 140, 360, 250, 100, 300]
}
});
}, 3000);
*/
/*
c3.chart.fn.subchart = function () {};
c3.chart.fn.subchart.show = function () {
var $$ = this.internal;
$$.config.subchart_show = true;
$$.updateSizes();
$$.updateTargetsForSubchart(chart.internal.data.targets);
$$.showTargets();
this.flush();
};
c3.chart.fn.subchart.hide = function () {
var $$ = this.internal;
$$.config.subchart_show = false;
this.flush();
};
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [['1', 1, 2, 2, 1, 4]]
},
subchart: {
// show: true
},
// padding: {top: 50}
});
*/
//chart.xgrids.add({value: 3, text: "why so low"});
/*
setTimeout(function () {
chart.subchart.show();
}, 1000);
setTimeout(function () {
chart.subchart.hide();
}, 2000);
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 190, 200, 190, null],
['data2', 90, 20, -19, 50],
['data3', 490, 300, 490, null],
],
type: 'bar'
},
axis: {
y: {
inverted: true
// max: -100,
// min: 600,
}
}
});
*/
/*
var values = [];
for (var j=0; j< 40; j++){
values.push('s'+j)
}
var series = [];
for (var i=0; i < 365; i++){
var point = {
"x": (1388620800 + i*86400) * 1000
};
for (var j=0; j< Math.random()*10; j++){
point['s'+j] = Math.random()*10
}
series.push(point);
}
var chart = c3.generate({
bindto: '#chart',
data: {
json: [],
keys: {
x: 'x',
value: values
},
type: 'bar',
groups: [values]
},
padding: {
left: 50
},
axis: {
x: {
type: 'timeseries',
padding: {
left: 0,
right: 0,
},
tick: {
format: '%Y-%m-%d'
}
},
y: {
tick: {
count: 5,
format: d3.format('.2s')
}
}
},
subchart: {
show: true,
size: {
height: 20
}
},
size: {
// height: 650
},
zoom: {
rescale: true
},
grid: {
x: {
show: true
},
y: {
show: true
}
},
tooltip: {
format: {
title: function(d) {
return '' + d;
},
value: function(v) {
return v
}
}
},
transition: {
duration: null
},
onrendered: function () {
console.log('rendered!!', d3.selectAll('.c3-chart-lines g').size());
}
});
//document.getElementById('loading').innerHTML = 'LOADING';
// now leats simulate loading via ajax
//setTimeout(function(){
d3.select('#load').on('click', function(){
var startDate = performance.now();
chart.load({
json: series,
keys: {
x: 'x',
value: values
}
});
var taken = performance.now() - startDate;
document.getElementById('timeTaken').innerHTML = taken + 'ms';
//},20);
});
*/
/*
var chart = c3.generate({
data: {
x : 'Station',
columns: [
["Station","Hydration Station 1","Hydration Station 2","Hydration Station 3","Hydration Station 4","Hydration Station 5","Hydration Station 6","Hydration Station 7","Hydration Station 8","Hydration Station 9","Hydration Station 10",
"Hydration Station 11","Hydration Station 12","Hydration Station 13","Hydration Station 14","Hydration Station 15","Hydration Station 16","Hydration Station 17","Hydration Station 18","Hydration Station 19","Hydration Station 20"],
["Drip Rate",2.72,1.53,1.67,1.22,0.92,0.78,1.13,1.20,2.53,1.16,2.18,1.58,1.96,1.19,1.50,1.59,0.71,1.30,1.42],
["Flow Rate",2.39,1.47,0.33,1.14,0.61,0.10,0.97,0.89,2.50,0.73,2.00,1.57,1.85,1.16,1.49,1.31,0.61,1.27,1.33,1.87],
["Loss Rate",0.00,0.00,0.00,0.02,0.03,0.03,0.03,0.03,0.04,0.05,0.06,0.06,0.07,0.08,0.10,0.10,0.12,0.12,0.12,0.13]],
type: 'bar'
},
axis: {
x: {
type: 'category',
tick: {
rotate: 30,
multiline:false
},
}
}
});
*/
/*
var chart = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', 190, 200, 190, null],
['data2', 90, 20, -19, 50],
['data3', 490, 300, 490, null],
],
},
axis: {
x: {
padding: 0
}
}
});
*/
/*
var dataa = {"xs":{"yHUM-1111":"xHUM-1111"},
"types":{"yHUM-1111":"area"},
"columns":[["xHUM-1111",1421006366616,1421005781613,1421005184171,1421004576704],
["yHUM-1111",31.109,30.804,30.651,30]
]
};
var chart = c3.generate({
bindto: "#chart",
data: dataa,
axis : {
x : {
type : 'timeseries',
tick: {
format: '%d-%b %H:%M',
culling: { min : 5 },
fit:false,
rotate: 35
}
},
y2: {
show: false
}
},
legend: {
position: "inset",
inset: {
anchor: 'top-right',
x: 20,
y: 10,
step: 1
}
},
zoom: {
enabled: false
},
tooltip: {
show: true,
grouped: true
},
point: {
show: false
}
});
*/
/*
var test_array_JSONs = [
{"Label 1": 20, "Label 2": 50, "Label 3": 30},
];
var donutChart = c3.generate ({
data: {
json: test_array_JSONs,
keys: {
value: ['Label 1', 'Label 2', 'Label 3']
},
type: 'bar',
selection: {
enabled: true,
multiple: false
}
},
pie: {
label: {
show: false
}
}
});
*/
/*
var chart = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', 190, 200, 190, null],
['data2', 90, 20, -19, 50],
['data3', 490, 300, 490, null],
],
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', 190, 200, 190, null],
['data2', 90, 20, -19, 50],
['data3', 490, 300, 490, null],
],
selection: {
draggable: true
}
}
});
*/
/*
var chart = c3.generate({
"data":{
"rows":[
[
"positive",
"negative"
],
[
0.1,
-0.1
],
[
0.10000000000000026,
-0.1
]
],
"type":"bar"
},
"axis":{
"x":{
"type":"category",
"show":true,
"categories":[
"E_Num_customers[2018] (E2)",
"E_Num_Seats[2018] (E3)"
],
"tick":{
"multiline":false
}
},
"rotated":true
},
"color":{
"pattern":[
"#084594",
"#2171B5",
"#4292C6",
"#6BAED6",
"#9ECAE1",
"#C6DBEF",
"#DEEBF7",
"#F7FBFF"
]
}
});
*/
/*
var chart = c3.generate({
data: {
type: 'area-spline',
x: 'date',
url: '/data/c3_test_ms.csv'
// rows: [
// ["date", "eth0-rx", "eth0-tx", "eth1-rx", "eth1-tx"],
// [1417622461000, 37, 2, 68, 33],
// [1417622522000, 39, 2, 57, 23],
// [1417622581000, 41, 3, 61, 23],
// ],
},
axis: {
x : {
type : 'timeseries',
tick : {
format : "%m-%d %H:%M"
}
}
},
zoom: {
// enabled: true
}
});
*/
/*
function generateData() {
var dataName, columns = [], column, i, j;
for (i = 0; i < 10; i++) {
dataName = 'data' + i;
column = [dataName];
for (j = 0; j < 36; j++) {
column.push(Math.random() * i * j);
}
columns.push(column);
}
return columns;
}
var columns = generateData();
var chart;
//d3.select('#generate').on('click', function () {
chart = c3.generate({
data: {
columns: columns,
// type: 'pie'
},
padding: {
left: 100
},
legend: {
// show: false
}
});
//});
setTimeout(function () {
// chart = chart.destroy();
}, 2000);
*/
/*
*/
/*
var chartValues = [
['Category First Type Of Thing', 2],
['Category Second Type Of Thing', 6],
['Category Third Type Of Thing', 1],
['Category Fourth Type Of Thing', 4],
['Category Fifth Type Of Thing', 4],
];
var chart = c3.generate({
bindto: '#chart',
legend: {
// position: 'right'
},
data: {
columns: chartValues,
// type: 'pie'
}
});
*/
//c3.chart.internal.fn.getAreaBaseValue = function () {
// return -100;
//};
/*
var chart = c3.generate({
data: {
columns: [
['data1', 190, 200, 190, null],
['data2', 90, 20, -19, 50],
['data3', 490, 300, 490, null],
],
labels: {
// format: function (v, id, i, j) {
// return v;
// }
// it's possible to set for each data
format: {
data1: function (v, id, i, j) {
return v;
}
}
}
// type: 'pie'
}
});
*/
/*
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '2013-01-01', '2013-02-02', '2013-02-10 aaaaaaaaaaaaa aaaaaaa'],
['data1', 25, 2, 45],
['data2', 25, 25, 22],
['data3', 25, 55, 101]
],
type: 'area',
groups: [
['data1', 'data2', 'data3']
]
},
axis: {
// rotated: true,
x: {
tick: {
centered: true
},
type: 'category'
}
}
});
*/
/*
var chart = c3.generate({
data: {
x: 'x',
columns: [
["x", 'a', 'b', 'c', 'd', 'e', 'f'],
['sample', 30, 200, 100, 400, 150, 250]
]
},
axis: {
x: {
type: 'category',
// categories: ['a', 'b', 'c', 'd', 'e', 'f'],
}
},
grid: {
x: {
lines: [{value: 3, text: 'Label 3'}] // This "works," but probably isn't what you want
// lines: [{value: 'd', text: 'Label d'}] // This does not work as of 56d9d450f1
}
}
});
*/
/*
var chart = c3.generate({
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 chart = c3.generate({
data: {
columns: [
['% Women CS', 0.036, 0.095, 0.105, 0.182, 0.121],
// ['% Women Math', 0.182, 0.077, 0.182, 0.026, 0.097],
// ['% Women Comp Eng /EE', 0.039, 0.074, 0.032, 0.095, 0.087]
// ['% Women CS', 36000, 95000, 105000, 182000, 121000],
],
type: 'bar',
labels: true
},
axis : {
x: {
type: 'category',
categories: ['Carleton', 'Alberta', 'Sherbrooke', 'McGill', 'Laval']
}
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 100, 200, 150, 300, 200, 100, 200, 300, 200, 100],
['data2', 400, 500, 250, 700, 300, 400, 100, 800, 600, 200],
],
axes: {
data1: 'y',
data2: 'y2'
}
},
axis: {
y: {
inner: true
},
y2: {
show: true,
inner: true,
label: {
text: 'Y2 Label',
position: 'outer-middle'
}
}
}
});
*/
/*
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', new Date()],
['data1', 100],
['data2', 400]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y%m%d'
}
}
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 100, 200, 150, 300, 200, 100, 200, 300, 200, 100],
['data2', 400, 500, 250, 700, 300, 400, 100, 800, 600, 200],
]
},
axis: {
x: {
extent: [0, 4],
label: {
text: 'HogeHoge',
position: 'outer-center'
}
}
},
// zoom: {
// enabled: true,
// }
legend: {
show: false
}
});
setTimeout(function () {
chart.focus('data2');
}, 500);
setTimeout(function () {
chart.revert();
}, 1000);
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25],
['data3', 150, 120, 110, 140, 115, 125]
]
}
});
setTimeout(function () {
chart.defocus('data1');
}, 1000);
*/
/*
var chart = c3.generate({
data: {
x: 'x',
columns: [
[
'x',
'2013-01-01',
'2013-01-02',
'2013-01-03',
'2013-01-04',
'2013-01-05',
'2013-01-06',
'2013-01-07',
'2013-01-08',
'2013-01-09',
'2013-01-10',
],
[
'data1',
230,
300,
330,
123,
350,
230,
330,
123,
350,
230,
350
],
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%m/%d',
values: ['2013-01-01', '2013-01-10', '2013-01-20', '2013-02-01', '2013-02-10']
}
}
}
});
setTimeout(function () {
chart.flow({
columns: [
[
'x',
'2013-01-11',
'2013-01-12',
'2013-01-13',
'2013-01-14',
'2013-01-15',
'2013-01-16',
'2013-01-17',
'2013-01-18',
'2013-01-19',
'2013-01-20',
'2013-01-21',
'2013-01-22',
'2013-01-23',
'2013-01-24',
'2013-01-25',
'2013-01-26',
'2013-01-27',
'2013-01-28',
'2013-01-29',
],
[
'data1',
230,
300,
330,
123,
350,
230,
330,
123,
350,
230,
230,
300,
330,
123,
350,
230,
330,
123,
350
],
],
duration: 1500,
to: '2013-01-05'
});
}, 1000);
setTimeout(function () {
chart.flow({
columns: [
[
'x',
'2013-02-11',
'2013-02-12',
'2013-02-13',
'2013-02-14',
'2013-02-15',
'2013-02-16',
'2013-02-17',
'2013-02-18',
'2013-02-19',
'2013-02-20',
'2013-02-21',
'2013-02-22',
'2013-02-23',
'2013-02-24',
'2013-02-25',
'2013-02-26',
'2013-02-27',
'2013-02-28',
'2013-02-29',
],
[
'data1',
230,
300,
330,
123,
350,
230,
330,
123,
350,
230,
230,
300,
330,
123,
350,
230,
330,
123,
350
],
],
duration: 1500,
to: '2013-01-15'
});
}, 4000);
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 30],
['data2', 120],
],
type : 'donut',
onclick: function (d, i) { console.log("onclick", d, i); },
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
},
donut: {
title: "Iris Petal Width"
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
classes: {
data1: 'additional-data1-class'
}
},
axis: {
rotated: true,
x: {
categories: [
'some long long long long long category name 1',
'some long long long long long category name 2'],
type: 'category'
}
},
interaction: {
enabled: false
}
});
*/
/*
var data = [
['x', generateRandomAxis(), generateRandomAxis()],
['data1', generateRandomNumber(), generateRandomNumber()],
['data2', generateRandomNumber(), generateRandomNumber()]
];
console.log(data);
var chart = c3.generate({
data: {
x: 'x',
columns: data,
},
axis: {
x: {
type: 'category'
}
}
});
function generateRandomAxis() {
var words = ['Rock', 'Paper', 'Scissor'];
return words[Math.floor(Math.random()*words.length)];
}
function generateRandomNumber() {
return Math.floor((Math.random() * 10) + 1);
}
setTimeout(function () {
chart.load({
columns: [
['x', 'new 1', 'long long long long long long long long long long long long long long long long long long long long long long long long long long long long '],
['data1', generateRandomNumber(), generateRandomNumber()],
['data2', generateRandomNumber(), generateRandomNumber()]
]
});
}, 1000);
setTimeout(function () {
chart.load({
columns: [
['x', 'HOGE 1', 'HOGE 2'],
['data1', generateRandomNumber(), generateRandomNumber()],
['data2', generateRandomNumber(), generateRandomNumber()]
]
});
}, 2000);
*/
/*
function generateData(name, n) {
var column = [name];
for (var i = 0; i < n; i++) {
column.push(Math.random() * 500);
}
return column;
}
function generateTime(name, n) {
var column = [name],
now = new Date();
for (var i = 0; i < n; i++) {
column.push(+now + 1000*3600*i);
}
return column;
}
var n = 10;
var chart = c3.generate({
data: {
oninit: function () {
this.hideLegend('data2');
},
x: 'x',
columns: [
generateTime("x", n),
generateData("data1", n),
generateData("data2", n),
// generateData("data3", 2000),
// generateData("data4", 2000),
// generateData("data5", 2000)
],
// labels: true,
ys: {
// data2: 'y2'
}
// hide: 'data2'
},
legend: {
hide: true
},
padding: {
// left: 50,
// right: 50
},
axis: {
x: {
type: 'timeseries',
tick: {
// multiline: false,
// format: "%Y%m%d %H:%M:%S",
format: function () {
return "very long tick text on x axis";
},
// rotate: 60,
// width: 30
// fit: false,
// count: 3
}
// default: [30, 60]
},
},
point: {
show :false
},
transition: {
duration: 0
},
// zoom: {
// enabled: true,
// onzoomstart: function (event) {
// console.log("onzoomstart", event);
// },
// onzoomend: function (domain) {
// console.log("onzoomend", domain);
// },
// rescale: true
// },
// subchart: {
// show: true
// }
});
*/
/*
function generate() {
var start = new Date().getTime();
for (var i = 0; i < 100; i++) {
var chart = c3.generate({
data: {
json: [{
date: '2014-01-01',
upload: 200,
download: 200,
total: 400
}, {
date: '2014-01-02',
upload: 100,
download: 300,
total: 400
}, {
date: '2014-02-01',
upload: 300,
download: 200,
total: 500
}, {
date: '2014-02-02',
upload: 400,
download: 100,
total: 500
}],
keys: {
x: 'date',
value: ['upload', 'download']
}
},
axis: {
x: {
type: 'timeseries',
tick: {
format: function (x) {
if (x.getDate() === 1) {
return x.toLocaleDateString();
}
}
}
}
},
padding: {
left: 100
},
size: {
width: 720,
height: 480
}
});
}
var end = new Date().getTime();
var time = end - start;
console.log(time);
}
*/
/*
setTimeout(function () {
chart.load({
columns: [
generateTime("x", 10),
generateData("data1", 10),
generateData("data2", 10),
]
});
}, 1000);
*/
/*
// graph shows some data.
var chart = c3.generate({
data: {
json: [
{
x: '2013-01-01',
data1: 30
}
],
keys: {
x: 'x',
value: ["data1"]
},
type: 'line',
},
bar: {
width: 2
},
subchart: {
show: true
},
zoom: {
enabled: true,
rescale: true
},
grid: {
y: {
show: true,
// ticks: 6
}
},
point: {
show: false
},
transition: {
duration: 0
},
legend: {
show: false
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
},
y: {
tick: {
// count: 6
}
}
},
padding: {
bottom: 100
}
});
// load some new data
function update() {
// chart.internal.config.axis_y_min = 0;
// chart.internal.config.axis_y_max = 2000;
chart.internal.config.axis_y_tick_values = [-250, 0, 250, 500, 750, 2000];
chart.load({ // does a redraw
json: [{
x: '2013-01-01',
data1: 30
}, {
x: '2013-01-02',
data1: 200
}, {
x: '2013-01-03',
data1: 100
}, {
x: '2013-01-04',
data1: 320
}, {
x: '2013-01-05',
data1: 1500
}, {
x: '2013-01-06',
data1: 250
}, {
x: '2013-01-07',
data1: -10
}, {
x: '2013-01-08',
data1: 750
}],
keys: {
x: 'x',
value: ['data1']
}
});
};
setTimeout(function () {
update();
// chart.flush();
}, 500);
*/
/*
var chart = c3.generate({
data: {
json: [
]
// columns: [
// ['data1']
// ]
},
padding: {
top: 10
}
});
*/
/*
var newNoteLine, chart = c3.generate({
axis: {
x: {
// type: 'timeseries'
}
},
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 340, 200, 500, 250, 350]
],
type: 'area',
// types: {
// data1: 'area',
// data2: 'area'
// },
groups: [
// ['data1', 'data2']
],
selection: {
// enabled: true
},
onclick: function (d) {
if (newNoteLine) {
chart.xgrids.remove({ value: newNoteLine.value });
}
newNoteLine = { value: d.x, class: 'new-note-line' };
setTimeout(function () {
chart.xgrids.add(newNoteLine);
}, 500);
}
},
zoom: {
enabled: true
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['sample1', 30, 200, 0, 250, 3150, 250],
['sample2', 130, 100, 200, 400, 6500, 250]
],
// type: 'bar'
},
zoom: {
// rescale: true
},
subchart: {
// show: true
},
legend: {
position: 'right'
},
axis: {
x: {
// extent: [0,2]
},
y: {
min: 0,
padding: {
bottom: 0
}
}
},
});
*/
/*
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: {
}
},
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'},
],
});
};
chart = generate();
setTimeout(function () {
// Load only one data
chart.flow({
rows: [
['data1', 'data2', 'data3'],
[500, 100, 200],
[200, null, null],
[10000, 50, null]
],
duration: 1500,
});
}, 1000);
*/
/*
var chart = c3.generate({
data: {
columns: [
['sample1', 30, 200, 0, 250, 3150, 250],
['sample2', 130, 100, 200, 400, 6500, 250]
],
// type: 'bar'
},
zoom: {
rescale: true
},
subchart: {
show: true
},
axis: {
x: {
extent: [0,2]
}
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, null, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'area',
onclick: function () {
console.log('onclick from data');
}
},
area: {
zerobased: false
},
zoom: {
// enabled: true
},
onmouseover: function () {
console.log("mouseover");
},
onmouseout: function () {
console.log("mouseout");
},
size: {
width: 350
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
["times", 60000, 120000, 180000, 240000]
]
},
axis: {
y: {
type : 'timeseries',
tick: {
values: null,
count: undefined,
},
time : {
// value : 'seconds',
// interval : 60
}
}
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['sample1', 30, 200, 0, 250, 150, 250],
['sample2', 430, 300, 500, 400, 650, 250]
],
onclick: function (d) {
alert("id =>" + d.id + ", value =>" + d.value);
}
// type: 'bar'
},
zoom: {
rescale: true
},
subchart: {
show: true
}
});
*/
/*
c3.generate({
"data":{
"empty":{
"label":{
"text":"No hay datos para mostrar en las fechas seleccionadas"
}
},
"x":"fecha",
"xFormat":"%Y-%m-%dT%H:%M:%S%Z",
"type":"bar",
"labels":true,
"columns":[
[
"fecha",
"2014-04-10T00:00:00-0500",
"2014-04-12T00:00:00-0500",
"2014-05-10T00:00:00-0500"
],
[
"b85b2dfb-6863-11e4-92a5-1867b083cd22",
76,
0,
0
],
[
"b85b13c8-6863-11e4-92a5-1867b083cd22",
25,
3,
30
]
],
"names":{
"b85b2dfb-6863-11e4-92a5-1867b083cd22":"Desayunos",
"b85b13c8-6863-11e4-92a5-1867b083cd22":"Almuerzos"
}
},
bar: {
// width: { max: 10 }
width: 10
},
"axis":{
"x":{
"type":"timeseries",
"tick":{
"format":"%d/%m/%Y",
fit: false
}
}
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['data', 95.0]
],
type: 'gauge',
},
gauge: {
min: 0,
max: 100
},
color: {
},
});
*/
/*
c3.chart.internal.fn.redrawCircle = function () {};
c3.chart.internal.fn.addTransitionForCircle = function () {};
var chart = c3.generate({
data: {
columns: [
['sample1', 30, 200, 0, 250, 150, 250],
['sample2', 430, 300, 500, 400, 650, 250]
],
onclick: function (d) {
alert("id =>" + d.id + ", value =>" + d.value);
},
// type: 'bar'
},
});
*/
/*
c3.generate({
bindto: '#chart',
data: {
// type: 'bar',
columns: [
["data1", 1251400, 1445000, 1721200, 1406600, 1581600, 1833400, 1220200, 1448400, 1643800, 1436400, 1381800, 1284400],
["data2", 161600, 219600, 462000, 323800, 436000, 442000, 142600, 283600, 354600, 71800, 230600, 281400]
]
},
grid: {
y: {
show: true,
}
},
axis: {
y: {
tick: {
count: 5
}
}
}
});
*/
/*
var xaxis= new Array();
for (var i=0;i<14;i++){
xaxis[i]=2000+i;
}
var chart = c3.generate({
data: {
x: 'xaxis',
json: {
xaxis: xaxis,
data2: [200, 130, 90, 240, 130, 220],
data3: [300, 200, 160, 400, 250, 250],
data4: [100, 430, 140, 300, 220, 210]
}
},
axis: {
y: {
label: 'Y Label'
}
}
});
*/
/*
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]
['date'],
['sample']
]
},
axis: {
// rotated: true,
x: {
type: 'timeseries',
tick: {
format: '%Y%m%d %H:%M:%S'
}
},
y2: {
// show: true,
}
},
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', 1415530121836, 1415530122836, 1415530123836],
['sample', 1, 2, 3]
]
});
chart.regions([
{start: 1415530121836, end: 1415530122836}
]);
// chart.load({
// columns: [
// ['date', +new Date('2014-01-01'), +new Date('2014-01-10'), +new Date('2014-03-01')],
// ['sample', 1, 2, 3]
// ]
// });
// chart.regions([
// {start: +new Date('2014-01-10'), end: +new Date('2014-01-15')}
// ]);
}, 500);
*/
/*
var data = {"x":["x","(No store found for this ID)","Preston","Moorabbin","Smith Street","Croydon","Head Office","Brisbane","Essendon","Spencer","Jindalee","Torquay","Canberra","(No store found for this ID)","Spare Store2","Gold Coast HT","South Wharf","Adelaide HT","Melbourne Central","Highpoint","Prahran","Prahran Reserve"],"y":["total",405,131,203,157,139,129,90,74,59,86,68,67,69,67,62,50,43,50,32,20,7]};
window.chart = c3.generate({
size: {
height: 500
},
data: {
x: "x",
columns: [
data.x,
data.y
],
type: 'bar'
},
axis: {
x: {
type: 'category',
tick: {
rotate: 60,
multiline: false
},
// height: 200
}
},
grid: {
y: {
show: true
}
},
legend: {
show: false
}
});
*/
/*
c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
},
grid: {
y: {
show: true,
// ticks: 5
}
},
axis: {
y: {
tick: {
// count: 3
values: [100, 200]
}
},
x: {
tick: {
count: 3
}
}
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'line'
},
zoom: {
enabled: true
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 120],
['data2', 130, 100, 140, 200, 150, 50],
['data3', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'area',
data2: 'area',
data3: 'area'
// 'line', 'spline', 'step', 'area', 'area-step' are also available to stack
},
groups: [['data1', 'data2', 'data3']],
// order: 'asc'
// order: function (t1, t2) { return t1.id < t2.id; }
},
legend: {
// position: 'inset'
},
axis: {
x: {
tick: {
format: function () {
// return ["aaaaa", "1111"]
return "aaaaaaaaaaabbbbbbbccccccccc"
}
}
}
}
});
setTimeout(function () {
chart.load({
json: {
data4: [130, 220, 350, 140, 360, 250, 100, 300]
}
});
}, 500);
setTimeout(function () {
chart.unload('data2');
}, 1000);
*/
/*
c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar'
},
axis: {
y: {
tick: {
count: 3
}
}
}
});
*/
/*
var chart1 = c3.generate({
data: {
// x: 'x',
columns: [
// ['x', '0123456789 abcdefghijk 99999 999 9999 abbbabbccc', '1e-2', '1', 'hgoehoge', 'a', 'b', 'd', 'c', 'aa', 'b', 'aa', '3000000000000000'],
['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250, 100, 20, 10],
['data2', 3, 20, 10, 40, 15, 25, 5, 10, 25, 10, 2, 1]
]
},
axis: {
// rotated: true,
x: {
// type: 'categorized',
tick: {
format: function () {
return "aaaaaaaaaaaaaaaaaaaaaaaa";
}
// width: null,
// rotate: 60
}
},
y2: {
show: true
}
},
padding: {
// bottom: 50
},
size: {
// height: 800
}
});
*/
/*
var chart = c3.generate({
bindto: null,
data: {
columns: [
['data1 hoge', 1030, 1200, 1100, 1400, 1150, 1250],
['data2_aaaa', 2130, 2100, 2140, 2200, 2150, 1850],
["data3", 2130, 21000, 2140, 22000, 2150, 18500]
],
onclick: function (d) {
console.log("onclick", d);
},
onmouseover: function (d) {
console.log("onmouseover", d);
},
onmouseout: function (d) {
console.log("onmouseout", d);
}
},
point: {
show: false
}
});
*/
/*
var chart1 = c3.generate({
bindto: '#chart1',
data: {
xs: {'data1':'x1','data2':'x2', 'data3':'x3', 'data4':'x4'},
columns: [
['x1', 1, 2, 3, 4, 5, 6],
['x2', 1, 2, 3, 4.5, 5, 7],
['x3', 1, 2, 3, 4, 5, 6],
['x4', 1, 2, 3.5, 4, 5.5, 6],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 90, 40, 140, 150, 55],
['data3', 50, 90, 40, 140, 150, 55],
['data4', 50, 90, 40, 140, 150, 55]
],
groups: [['data1','data3']],
onclick: function (d) {
console.log('onclick', d); ///////// SHOULD WORK, BUT DOESN'T..
},
onmouseover: function (d) {
console.log('onmouseover', d);
},
onmouseout: function (d) {
console.log('onmouseout', d);
},
type: "bar",
types: {
data4: 'line'
}
}
});
*/
/*
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 90, 40, 140, 150, 55]
],
groups: [['data1','data2']],
onclick: function (d) {
console.log('click! ', d); ///////// SHOULD WORK...
},
types: {"data1":"bar","data2":"bar"}
}
});
*/
/*
// 662
var data = [
[ "watch", 5 ],
[ "def", 4 ],
[ "ghi", 4 ],
[ "jkl", 3 ],
[ "mno", 3 ]
];
var chart = c3.generate({
bindto: '#chart',
data: {
columns: data,
type: 'donut'
},
color: {
pattern: ["#a2d47f", "#ffb377", "#ff7676", "#99e0fc", "#e7acdc"]
},
transition: {
duration: 500
},
legend: {
show: true
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 3000, 20000, 10000, 40000, -15000, 2500],
],
type: 'bar'
},
axis: {
y: {
max: 100000,
min: 10000
}
},
bar: {
zerobased: false
},
zoom: {
// enabled: true
},
subchart: {
show: true
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['x1', 10 ,40, 100, 110, 200, 320],
['x2', 10 ,40, 100, 210, 400, 1320],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
xs: {
data1: 'x1',
data2: 'x2'
}
},
tooltip: {
grouped: false
},
point: {
show: false
}
});
*/
/*
function generateData(n) {
var column = ['sample'];
for (var i = 0; i < n; i++) {
// column.push(Math.random() * 500);
column.push(i * 500);
}
return column;
}
var chart1 = c3.generate({
data: {
columns: [
generateData(100)
]
},
axis: {
x: {
default: [30, 60]
}
},
zoom: {
enabled: true,
// rescale: true,
onzoomstart: function (event) {
console.log("onzoomstart", event);
},
onzoom: function (domain) {
console.log("onzoom", domain);
},
onzoomend: function (domain) {
console.log("onzoomend", domain);
},
},
subchart: { show: true }
});
*/
/*
var chart1 = c3.generate({
bindto: '.' + $('#chart').attr('class'),
data: {
x: 'x',
columns: [
['x', '1e-3', '1e-2', '1'],
['data1', 50, 200, 100, 400, 150, 250, 50, 100, 250],
['data2', 50, 200, 100, 400, 150, 250, 50, 100, 250]
],
// type: 'bar',
groups: [['data1', 'data2']],
onclick: function (d) {
console.log("onclick", d);
},
onmouseout: function (d) {
console.log('onmouseout', d);
}
},
axis: {
x: {
type: 'categorized'
}
}
});
*/
/*
setTimeout(function () {
chart1.destroy();
}, 1000);
*/
/*
var chart = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250]
],
type: 'step'
},
grid: {
x: {
show: true,
lines: [{
value: 2,
text: 'Label 2',
class: 'lineFor2'
}]
},
y: {
show: true,
}
}
});
*/
/*
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: {
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,
}
}
};
var chart1 = c3.generate(option);
option.bindto = '#chart1';
option.data.columns[0][1] = 20000;
var chart2 = c3.generate(option);
*/
/*
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 ticks = d3.select('.c3-chart-arcs')
.append('g')
.selectAll("line")
.data([0,25,50,75,100]).enter()
.append("line")
.attr("x1", 0)
.attr("x2", 0)
.attr("y1", -chart.internal.radius+8)
.attr("y2", -chart.internal.radius)
.attr("transform", function (d) {
var min = chart.internal.config.gauge_min,
max = chart.internal.config.gauge_max,
ratio = d / (max - min),
rotate = (d - 2) * 45;
return "rotate(" + rotate + ")";
});
*/
/*
var date = ["Data e Ora","2014-05-20 17:25:00.123", "2014-05-20 17:30:00.345", "2014-05-20 17:35:00.456"]; // SORTED
var valori = ["Inverter","4883","5079","5321"];
var chart = c3.generate({
data: {
x: 'Data e Ora',
xFormat: '%Y-%m-%d %H:%M:%S.%L', // ADDED
columns: [
date,
valori,
],
type: 'spline'
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%H:%M:%S.%L'
},
},
},
transition: {
duration: 1000
}
});
*/
/*
var columns = [
['data1', 100, 200, 150, 300, 1200],
['data2', 400, 500, 250, 700, 300]
];
var chart = c3.generate({
data: {
columns: columns,
type: 'bar',
color: function (color, d) {
if (typeof d.index === 'undefined') { return color; }
return columns[0][d.index + 1] > columns[1][d.index + 1] ? '#F00' : '#00F';
}
}
});
*/
/*
var chart = c3.generate({
data: {
columns:[
['data1', 30, 20, 50, 40, 60, 50, 100, 200],
['data2', 230, 220, 250, 240, 260, 250, 300, 400],
['data3', 130, 220, 350, 140, 360, 250, 100, 300]
],
labels: true,
axes: {
data1: 'y',
data2: 'y',
data3: 'y2'
}
},
axis: {
y: {
},
y2: {
show: true
}
}
});
setTimeout(function () {
chart.load({
json: {
data4: [123, 32, 43, 654, 123, 65, 87, 7560]
},
axes: {
data4: 'y2'
}
});
}, 1000);
*/
/*
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
columns: [
['x', 0, 1000, 3000, 10000],
['data', 10, 10, 10, 10]
// ['x', 0, 10000],
// ['data', 10, 10]
],
type: 'bar'
},
bar: {
width: {
ratio: 0.1
}
}
});
*/
/*
var data = {"hourly":{"x":['x', "2014-09-24T16:00:00.000Z","2014-09-24T17:00:00.000Z","2014-09-24T18:00:00.000Z","2014-09-24T19:00:00.000Z","2014-09-24T20:00:00.000Z","2014-09-24T21:00:00.000Z","2014-09-24T22:00:00.000Z","2014-09-24T23:00:00.000Z","2014-09-25T00:00:00.000Z","2014-09-25T01:00:00.000Z","2014-09-25T02:00:00.000Z","2014-09-25T03:00:00.000Z","2014-09-25T04:00:00.000Z","2014-09-25T05:00:00.000Z","2014-09-25T06:00:00.000Z","2014-09-25T07:00:00.000Z","2014-09-25T08:00:00.000Z","2014-09-25T09:00:00.000Z","2014-09-25T10:00:00.000Z","2014-09-25T11:00:00.000Z","2014-09-25T12:00:00.000Z","2014-09-25T13:00:00.000Z","2014-09-25T14:00:00.000Z","2014-09-25T15:00:00.000Z"],"sold":['Sold Tickets', 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"revenue":['Revenue', 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]},"daily":{"x":['x', "2014-08-27T00:00:00.000Z","2014-08-28T00:00:00.000Z","2014-08-29T00:00:00.000Z","2014-08-30T00:00:00.000Z","2014-08-31T00:00:00.000Z","2014-09-01T00:00:00.000Z","2014-09-02T00:00:00.000Z","2014-09-03T00:00:00.000Z","2014-09-04T00:00:00.000Z","2014-09-05T00:00:00.000Z","2014-09-06T00:00:00.000Z","2014-09-07T00:00:00.000Z","2014-09-08T00:00:00.000Z","2014-09-09T00:00:00.000Z","2014-09-10T00:00:00.000Z","2014-09-11T00:00:00.000Z","2014-09-12T00:00:00.000Z","2014-09-13T00:00:00.000Z","2014-09-14T00:00:00.000Z","2014-09-15T00:00:00.000Z","2014-09-16T00:00:00.000Z","2014-09-17T00:00:00.000Z","2014-09-18T00:00:00.000Z","2014-09-19T00:00:00.000Z","2014-09-20T00:00:00.000Z","2014-09-21T00:00:00.000Z","2014-09-22T00:00:00.000Z","2014-09-23T00:00:00.000Z","2014-09-24T00:00:00.000Z","2014-09-25T00:00:00.000Z"],"sold":['Sold Tickets', 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"revenue":['Revenue', 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]},"weekly":{"x":['x', "2014-04-14T00:00:00.000Z","2014-04-21T00:00:00.000Z","2014-04-28T00:00:00.000Z","2014-05-05T00:00:00.000Z","2014-05-12T00:00:00.000Z","2014-05-19T00:00:00.000Z","2014-05-26T00:00:00.000Z","2014-06-02T00:00:00.000Z","2014-06-09T00:00:00.000Z","2014-06-16T00:00:00.000Z","2014-06-23T00:00:00.000Z","2014-06-30T00:00:00.000Z","2014-07-07T00:00:00.000Z","2014-07-14T00:00:00.000Z","2014-07-21T00:00:00.000Z","2014-07-28T00:00:00.000Z","2014-08-04T00:00:00.000Z","2014-08-11T00:00:00.000Z","2014-08-18T00:00:00.000Z","2014-08-25T00:00:00.000Z","2014-09-01T00:00:00.000Z","2014-09-08T00:00:00.000Z","2014-09-15T00:00:00.000Z","2014-09-22T00:00:00.000Z"],"sold":['Sold Tickets', 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0],"revenue":['Revenue', 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,"42.42",0,0,0,0,0,0,0]},"monthly":{"x":['x', "2013-10-01T00:00:00.000Z","2013-11-01T00:00:00.000Z","2013-12-01T00:00:00.000Z","2014-01-01T00:00:00.000Z","2014-02-01T00:00:00.000Z","2014-03-01T00:00:00.000Z","2014-04-01T00:00:00.000Z","2014-05-01T00:00:00.000Z","2014-06-01T00:00:00.000Z","2014-07-01T00:00:00.000Z","2014-08-01T00:00:00.000Z","2014-09-01T00:00:00.000Z"],"sold":['Sold Tickets', 0,0,0,0,0,0,0,0,0,0,1,0],"revenue":['Revenue', 0,0,0,0,0,0,0,0,0,0,"42.42",0]}};
var chart = c3.generate({
axis: {
x: {
type: 'timeseries',
tick: {
format: function(x) { return d3.time.format('%b %e')(x); }
}
},
y: {tick: {format: d3.format('d')}},
y2: {show: true}
},
data: {
x: 'x',
xFormat: '%Y-%m-%dT%H:%M:%S.%LZ',
columns: [],
types: {'Sold Tickets': 'bar', 'Revenue': 'area-spline'},
axes: {'Revenue': 'y2'},
colors: {'Sold Tickets': '#a2e1d4', 'Revenue': '#464f88'}
},
point: {show: false},
legend: {
position: 'inset',
inset: {step: 2}
},
grid: {y: {show: true}}
});
setTimeout(function () {
chart.load({columns: [data.monthly.x, data.monthly.sold, data.monthly.revenue]});
}, 1000);
setTimeout(function () {
chart.load({columns: [data.weekly.x, data.weekly.sold, data.weekly.revenue]});
}, 2000);
setTimeout(function () {
chart.load({columns: [data.daily.x, data.daily.sold, data.daily.revenue]});
}, 3000);
setTimeout(function () {
chart.load({columns: [data.monthly.x, data.monthly.sold, data.monthly.revenue]});
}, 4000);
*/
/*
// 590
c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', 1, 3, 2, 3, 6, 1],
['data2', 1, 4, 4, 3, 2, 5]
],
type: 'bar'
},
axis : {
y : {
tick : {
format: function(d) {
return "xx xxxxx xxxxxxxx";
}
},
label: {
text: "test",
position: "outer-middle"
}
}
}
});
c3.generate({
bindto: '#chart2',
data: {
columns: [
['data3', 2, 4, 1, 1, 0, 1],
['data4', 4, 2, 3, 1, 5, 5]
],
type: 'bar'
},
axis : {
y : {
tick : {
format: function(d) {
return d;
}
},
label: {
text: "test",
position: "outer-middle"
}
}
}
});
c3.generate({
bindto: '#chart3',
data: {
columns: [
['data3', 1, 1,7, 8, 8, 2],
['data4', 4, 4, 2, 3,1, 8]
],
type: 'bar'
},
axis : {
y : {
tick : {
format: function(d) {
return "xxxxxxxxxx";
}
},
label: {
text: "test",
position: "outer-middle"
}
}
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
],
type: 'scatter'
},
subchart: {
show: true
}
});
*/
/*
var chart = c3.generate({
// size: { width: 300, height: 300 },
data: {
columns: [
['data1', 100, 300],
['data2', 200, 500]
],
type: 'area'
},
axis: {
x: {
// show: false
}
},
legend: {
position: "inset",
inset: {
anchor: "top-left",
x: 10,
y: 10,
step: 1
}
}
});
*/
/*
// 557
var jsonfile = [{
"xvariable": "100",
"valuevariable": "500"
}, {
"xvariable": "200",
"valuevariable": "1500"
}, {
"xvariable": "300",
"valuevariable": "3500"
}];
var differentjsonfile = [{
"xvariable": "200",
"valuevariable": "3500"
}, {
"xvariable": "300",
"valuevariable": "4500"
}, {
"xvariable": "400",
"valuevariable": "5500"
}];
var chart_scatterplot = c3.generate({
data: {
json: jsonfile,
keys: {
x: 'xvariable',
value: ['valuevariable'],
},
type: 'scatter',
},
});
setTimeout(function () {
chart_scatterplot.load({
json: jsonfile.concat(differentjsonfile),
keys: {
x: 'xvariable',
value: ['valuevariable'],
},
});
}, 1000);
*/
/*
var chart = c3.generate({
data: {
xs: {
setosa: 'setosa_x',
versicolor: 'versicolor_x',
virginica: 'virginica_x'
},
columns: [
["setosa_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3],
["versicolor_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8],
["virginica_x", 3.3, 2.7, 3.0, 2.9, 3.0, 3.0, 2.5, 2.9, 2.5, 3.6, 3.2, 2.7, 3.0, 2.5, 2.8, 3.2, 3.0, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8, 3.0, 2.8, 3.0, 2.8, 3.8, 2.8, 2.8, 2.6, 3.0, 3.4, 3.1, 3.0, 3.1, 3.1, 3.1, 2.7, 3.2, 3.3, 3.0, 2.5, 3.0, 3.4, 3.0],
["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]
],
type : 'scatter',
},
point: {
r: function (d) {
console.log(d);
return d.value * 10;
}
},
axis: {
x: {
label: 'Sepal.Width',
tick: {
fit: false
}
},
y: {
label: 'Petal.Width'
}
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1',1,2,3],
['data2',2,3,4]
],
types: {
data1: 'area-spline',
data2: 'area-spline'
},
onclick: function (d, i) { console.log("onclick", d, i); },
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
},
// point: {show: false}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 1],
['data2', 2],
['data3', 3],
['data4', 4],
['data5', 5],
['data40', 40]
],
type: 'bar',
onclick: function (d, element) {
console.log("onclick", d, element);
},
},
tooltip: {
grouped : false
}
});
*/
/*
// want to get name in callback
var chart = c3.generate({
data: {
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: 'id',
value: ['visits']
}
}
});
*/
/*
var chart = c3.generate({
bindto: '#chart',
data: {
x : 'x',
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
['sample', 30, 200, 100, 400, 150, 250],
['sample2', 130, 300, 200, 450, 250, 350]
]
},
axis : {
// rotated: true,
x : {
type : 'timeseries',
tick : {
format : "%e %b %y 01234567890123456789"
}
}
},
padding: {
right: 100,
left: 100
}
});
*/
//d3.select('.c3-axis.c3-axis-x').attr('clip-path', "")
/*
chart = c3.generate({
data: {
x: 'date',
xFormat: '%Y-%m-%d %H:%M:%S',
json: [{
"date": "2014-06-03 12:00:00",
"data1": "3000",
"data2": "500"
}, {
"date": "2014-06-04 12:00:00",
"data1": "1000"
}, {
"date": "2014-06-05 12:00:00",
"data1": "5000",
"data2": "1000"
}],
keys: {
x: 'date',
value: [ "data1", "data2" ]
},
types: {
data1: 'step',
data2: 'bar'
}
},
axis: {
x: {
type: "category"
}
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
},
axis: {
y: {
min:500
// max: 0
}
}
});
*/
/*
var drdata = [
["x", "John", "Fred", "Mary", "You", "Me", "Tom", "Jim"],
["Promises not kept", -50, 63, 90, 55, 60, 63, 52]
];
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
columns: drdata,
type: 'bar',
onclick: function (d, i) {
console.log(d, i, d.index);
},
},
axis: {
rotated: true,
x: {
type: 'category' // this needed to load string x value
},
y: {
max: 100,
min: -100,
}
},
bar: {
width: {
ratio: 0.8 // this makes bar width 50% of length between ticks
}
// or
//width: 100 // this makes bar width 100px
},
color: {
pattern: ['orangered', 'royalblue']
},
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 1, 2, 1, 3, 4],
// ['data3', 40000, 50000, 25000, 70010, 30000],
['data2', 4000000000, 5000000000, 2500000000, 7001000000, 3000000000]
]
}
});
*/
/*
// X axis in a scatterplot ignores range minimum of zero #457
var chart = c3.generate({
data: {
xs: {
'x1': 'data1',
},
columns: [
["data1", 5],
["x1", 7],
],
type: "scatter",
},
point: {
r: 10
},
axis: {
x: {
min: 0,
},
y: {
min: 0,
}
}
});
*/
/*
var chart1 = c3.generate({
bindto: "#chart1",
data: {
columns: [
['data1', 100, 200, 150, 300, 200],
['data2', 400, 500, 250, 700, 300], ]
}
});
var chart2 = c3.generate({
bindto: "#chart2",
data: {
columns: [
['data1', 100, 200, 150, 300, 200],
['data2', 400, 500, 250, 700, 300],
],
labels: true
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25],
['data3', 350, 320, 310, 340, 315, 325],
['data4', 550, 520, 510, 540, 515, 525]
]
}
});
*/
/*
setTimeout(function () {
chart.hide();
}, 1000);
setTimeout(function () {
chart.show();
}, 2000);
*/
/*
// Scatter chart with only one point #548
var chart = c3.generate({
data: {
xs: {
setosa: 'setosa_x'
},
// iris data from R
columns: [
["setosa_x", 3.5],
["setosa", 0.2]
],
// type: 'scatter'
},
axis: {
x: {
label: 'Sepal.Width',
tick: {
fit: false
}
},
y: {
label: 'Petal.Width'
}
}
});
*/
/*
//Animate left-to-right on x-axis #502
var chart = c3.generate({
data: {
columns: [
['data1', 100, 200, 150, 300, 200],
['data2', 400, 500, 250, 700, 300]
],
type: 'area'
},
grid: {
x: {
show: true
}
},
oninit: function () {
this.clipChart
.attr('width', 0)
.attr('height', this.height)
.transition().duration(1000)
.attr('width', this.width);
}
});
*/
/*
// x.tick.centered when axis are rotated #539
var chart2 = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
types: {
data1: 'bar',
}
},
axis: {
rotated: true,
x: {
type: "category",
label: {
text: 'X Label',
position: 'outer-middle'
},
tick: {
// centered: true
}
},
y: {
label: {
text: 'Y Label',
position: 'outer-center'
},
tick: {
centered: true
}
}
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 100, 200, 150, 300, 200],
['data2', 400, 500, 250, 700, 300]
]
},
axis: {
y: {
min: 100,
max: 700
}
}
});
*/
/*
window.chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
xFormat: '%Y-%m-%d %H:%M:%S', // 'xFormat' can be used as custom format of 'x'
columns: [
['x', '2013-01-01 12:00:00', '2013-01-02 12:00:00', '2013-01-03 12:00:00', '2013-01-04 12:00:00', '2013-01-05 12:00:00', '2013-01-10 12:00:00'],
// ['x', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 340, 200, 500, 250, 350],
['data3', 230, 400, 500, 600, 450, 950],
['data4', 1000, 1200, 1100, 1400, 1150, 1250]
],
type: 'pie'
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d %H:%M:%S'
}
}
}
});
var targetIds = ['data2', 'data3'];
setTimeout(function () {
chart.focus(targetIds);
}, 1000);
setTimeout(function () {
window.chart.load({
columns: [
['x', '2013-01-01 12:00:00', '2013-01-02 12:00:00', '2013-01-03 12:00:00', '2013-01-04 12:00:00', '2013-01-05 12:00:00', '2013-01-10 12:00:00', '2013-01-15 12:00:00', '2013-02-15 12:00:00'],
['data3', 400, 500, 450, 700, 600, 500, 200, 900]
]
});
}, 2000);
*/
/*
var chart = c3.generate({
// bindto : '#ch',
data : {
x : 'x',
// xSort: false,
rows : [
[ 'x', 'data1', 'data2' ],
[ 11, 120, 300 ],
[ 22, 160, 240 ],
[ -33, 200, 290 ], // <----- note shuffled x point
[ 44, 160, 230 ],
[ 55, 130, 300 ],
],
onclick: function (d) { console.log("clicked =>", d); }
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 30],
['data2', 120],
],
type : 'donut',
selection: {
enabled: true,
grouped: true,
multiple: true
},
onselected: function(d, i) {
console.log('selected', d, i);
}
},
donut: {
title: "Iris Petal Width"
}
});
*/
/*
var chart = c3.generate({
data: {
x: 'setosa_x',
// xs: {
// setosa: 'setosa_x',
// versicolor: 'versicolor_x'
// },
// iris data from R
columns: [
["setosa", 3.0, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3],
["setosa_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8]
],
type: 'scatter'
},
axis: {
x: {
label: 'Sepal.Width',
tick: {
fit: false
}
},
y: {
label: 'Petal.Width'
}
},
});
*/
/*
function generateData(n) {
var column = ['sample'];
for (var i = 0; i < n; i++) {
column.push(Math.random() * 500);
}
return column;
}
function load() {
chart1.load({
columns: [
generateData(Math.random() * 1000)
]
});
}
var chart = c3.generate({
data: {
columns: [
generateData(100)
],
selection: {
enabled: true
}
},
axis: {
x: {
// type: 'category',
default: [30, 60]
}
},
zoom: { enabled: true },
subchart: { show: true }
});
*/
/*
var chart = c3.generate({
data: {
xs: {
A: 'x1',
B: 'x2',
C: 'x2',
D: 'x2',
E: 'x2'
},
xFormat: '%Y-%m-%d %H:%M:%S',
json: {
x1: ['2013-11-10 12:27:08', '2013-11-10 12:37:08', '2013-11-10 12:47:08', '2013-11-10 12:57:08'],
x2: ['2013-11-10 12:27:08', '2013-11-10 13:27:08', '2013-11-10 14:27:08', '2013-11-10 15:27:08', '2013-11-10 16:27:08'],
A: [0, 10, 20, 50],
B: [0, 0, 0, 0, 0],
C: [10, 10, 10, 5, 5],
D: [20, 20, 20, 10, 10],
E: [40, 40, 40, 30, 30]
},
type: 'step',
types: {
A: 'scatter'
}
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%H:%M:%S'
}
}
}
});
*/
/*
var chart = c3.generate({
data: {
x: "x",
columns: [
["x", "one", "two", "three", "four", "five"],
["Random", 1, 2, 3, 4, 5]
],
type: "area"
},
axis: {
x: {
type: "categorized",
tick: {
rotate: 90
},
height: 100
}
},
oninit: function () {
this.main.append('rect')
.style('fill', 'white')
.attr('x', 0.5)
.attr('y', -0.5)
.attr('width', this.width)
.attr('height', this.height)
.transition().duration(1000)
.attr('x', this.width)
.attr('width', 0)
.remove();
}
});
*/
/*
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '2010-01-01'],
['sample', 30]
]
},
axis : {
x : {
type : 'timeseries',
tick: {
format: function (x) { return x.getFullYear(); }
//format: '%Y' // format string is also available for timeseries data
},
// default: [new Date('2012-01-01'), new Date('2013-01-01')]
default: ['2012-01-01', '2013-01-01']
}
},
subchart: {
show: true
}
});
*/
/*
var data1 = ['data1'];
generateData(data1, 100);
var data2 = ['data2'];
generateData(data2, 100);
var chart = c3.generate({
data: {
columns: [data1, data2],
type: 'bar'
},
subchart: {
show: true
}
});
function generateData(array, numberOfPoints) {
for (var i = 0; i < numberOfPoints; i++) {
array.push(Math.random() * i + i);
}
}
*/
/*
var data1 = ['data1'];
generateData(data1, 500);
var data2 = ['data2'];
generateData(data2, 500);
var chart = c3.generate({
data: {
columns: [data1, data2],
},
subchart: {
show: true
}
});
function generateData(array, numberOfPoints) {
for (var i = 0; i < numberOfPoints; i++) {
array.push(Math.random() * i + i);
}
}
*/
/*
var chart = c3.generate({
data: {
columns:[
['data1', 30, 20, 50, 40, 60, 50, 100, 200],
['data2', 230, 220, 250, 240, 260, 250, 300, 400]
],
labels: true,
axes: {
data1: 'y',
data2: 'y',
data3: 'y2'
}
},
axis: {
y: {
},
y2: {
show: true
}
},
legend: {
item: {
onclick: function () {},
}
}
});
setTimeout(function () {
chart.load({
json: {
data3: [130, 220, 350, 140, 360, 250, 100, 300]
}
});
}, 1000);
*/
/*
data_test_original = ['data3', 0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,10,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,3,2,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,7,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,15,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,12,0,41,0,4,0,5,0,29,0,0,0,0,0,0,0,0,0,0,0,11,0,19,23,87,0,83,0,17,13,36,0,10,1,6,0,2,0,1,3,0,0,9,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,7,0,0,0,0,3,0,0,0,1,0,0,1,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,1,0,1,0,0,0,0,1,0,0,1,0,0,0,2,0,0,0,43,9,10,9,2,0,0,0,0,1,4,0,0,2,0,9,2,0,0,0,0,0,1,0,0,3,0,0,0,0,0,0,0,1,0,0,0,0,0,2,0,4,0,0,0,6,0,8,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,30,50,100]
data_logscale_tweet = ['data3'];
for(var i=1; i<data_test_original.length; i++){
if (data_test_original[i] === 0){
data_logscale_tweet[i] = null;
}
else {
data_logscale_tweet[i] = Math.log(data_test_original[i]) / Math.LN10;
}
}
var chart = c3.generate({
bindto: '#chart',
point: {
show: false
},
bar: {
width: {
ratio: 1 // this makes bar width 50% of length between ticks
}
// or
//width: 100 // this makes bar width 100px
},
data: {
hide:['data3'],
//labels: true,
x: 'x',
columns: [
['x', "2012-06-26","2012-06-27","2012-06-28","2012-06-29","2012-06-30","2012-07-01","2012-07-02","2012-07-03","2012-07-04","2012-07-05","2012-07-06","2012-07-07","2012-07-08","2012-07-09","2012-07-10","2012-07-11","2012-07-12","2012-07-13","2012-07-14","2012-07-15","2012-07-16","2012-07-17","2012-07-18","2012-07-19","2012-07-20","2012-07-21","2012-07-22","2012-07-23","2012-07-24","2012-07-25","2012-07-26","2012-07-27","2012-07-28","2012-07-29","2012-07-30","2012-07-31","2012-08-01","2012-08-02","2012-08-03","2012-08-04","2012-08-05","2012-08-06","2012-08-07","2012-08-08","2012-08-09","2012-08-10","2012-08-11","2012-08-12","2012-08-13","2012-08-14","2012-08-15","2012-08-16","2012-08-17","2012-08-18","2012-08-19","2012-08-20","2012-08-21","2012-08-22","2012-08-23","2012-08-24","2012-08-25","2012-08-26","2012-08-27","2012-08-28","2012-08-29","2012-08-30","2012-08-31","2012-09-01","2012-09-02","2012-09-03","2012-09-04","2012-09-05","2012-09-06","2012-09-07","2012-09-08","2012-09-09","2012-09-10","2012-09-11","2012-09-12","2012-09-13","2012-09-14","2012-09-15","2012-09-16","2012-09-17","2012-09-18","2012-09-19","2012-09-20","2012-09-21","2012-09-22","2012-09-23","2012-09-24","2012-09-25","2012-09-26","2012-09-27","2012-09-28","2012-09-29","2012-09-30","2012-10-01","2012-10-02","2012-10-03","2012-10-04","2012-10-05","2012-10-06","2012-10-07","2012-10-08","2012-10-09","2012-10-10","2012-10-11","2012-10-12","2012-10-13","2012-10-14","2012-10-15","2012-10-16","2012-10-17","2012-10-18","2012-10-19","2012-10-20","2012-10-21","2012-10-22","2012-10-23","2012-10-24","2012-10-25","2012-10-26","2012-10-27","2012-10-28","2012-10-29","2012-10-30","2012-10-31","2012-11-01","2012-11-02","2012-11-03","2012-11-04","2012-11-05","2012-11-06","2012-11-07","2012-11-08","2012-11-09","2012-11-10","2012-11-11","2012-11-12","2012-11-13","2012-11-14","2012-11-15","2012-11-16","2012-11-17","2012-11-18","2012-11-19","2012-11-20","2012-11-21","2012-11-22","2012-11-23","2012-11-24","2012-11-25","2012-11-26","2012-11-27","2012-11-28","2012-11-29","2012-11-30","2012-12-01","2012-12-02","2012-12-03","2012-12-04","2012-12-05","2012-12-06","2012-12-07","2012-12-08","2012-12-09","2012-12-10","2012-12-11","2012-12-12","2012-12-13","2012-12-14","2012-12-15","2012-12-16","2012-12-17","2012-12-18","2012-12-19","2012-12-20","2012-12-21","2012-12-22","2012-12-23","2012-12-24","2012-12-25","2012-12-26","2012-12-27","2012-12-28","2012-12-29","2012-12-30","2012-12-31","2013-01-01","2013-01-02","2013-01-03","2013-01-04","2013-01-05","2013-01-06","2013-01-07","2013-01-08","2013-01-09","2013-01-10","2013-01-11","2013-01-12","2013-01-13","2013-01-14","2013-01-15","2013-01-16","2013-01-17","2013-01-18","2013-01-19","2013-01-20","2013-01-21","2013-01-22","2013-01-23","2013-01-24","2013-01-25","2013-01-26","2013-01-27","2013-01-28","2013-01-29","2013-01-30","2013-01-31","2013-02-01","2013-02-02","2013-02-03","2013-02-04","2013-02-05","2013-02-06","2013-02-07","2013-02-08","2013-02-09","2013-02-10","2013-02-11","2013-02-12","2013-02-13","2013-02-14","2013-02-15","2013-02-16","2013-02-17","2013-02-18","2013-02-19","2013-02-20","2013-02-21","2013-02-22","2013-02-23","2013-02-24","2013-02-25","2013-02-26","2013-02-27","2013-02-28","2013-03-01","2013-03-02","2013-03-03","2013-03-04","2013-03-05","2013-03-06","2013-03-07","2013-03-08","2013-03-09","2013-03-10","2013-03-11","2013-03-12","2013-03-13","2013-03-14","2013-03-15","2013-03-16","2013-03-17","2013-03-18","2013-03-19","2013-03-20","2013-03-21","2013-03-22","2013-03-23","2013-03-24","2013-03-25","2013-03-26","2013-03-27","2013-03-28","2013-03-29","2013-03-30","2013-03-31","2013-04-01","2013-04-02","2013-04-03","2013-04-04","2013-04-05","2013-04-06","2013-04-07","2013-04-08","2013-04-09","2013-04-10","2013-04-11","2013-04-12","2013-04-13","2013-04-14","2013-04-15","2013-04-16","2013-04-17","2013-04-18","2013-04-19","2013-04-20","2013-04-21","2013-04-22","2013-04-23","2013-04-24","2013-04-25","2013-04-26","2013-04-27","2013-04-28","2013-04-29","2013-04-30","2013-05-01","2013-05-02","2013-05-03","2013-05-04","2013-05-05","2013-05-06","2013-05-07","2013-05-08","2013-05-09","2013-05-10","2013-05-11","2013-05-12","2013-05-13","2013-05-14","2013-05-15","2013-05-16","2013-05-17","2013-05-18","2013-05-19","2013-05-20","2013-05-21","2013-05-22","2013-05-23","2013-05-24","2013-05-25","2013-05-26","2013-05-27","2013-05-28","2013-05-29","2013-05-30","2013-05-31","2013-06-01","2013-06-02","2013-06-03","2013-06-04","2013-06-05","2013-06-06","2013-06-07","2013-06-08","2013-06-09","2013-06-10","2013-06-11","2013-06-12","2013-06-13","2013-06-14","2013-06-15","2013-06-16","2013-06-17","2013-06-18","2013-06-19","2013-06-20","2013-06-21","2013-06-22","2013-06-23","2013-06-24","2013-06-25","2013-06-26","2013-06-27","2013-06-28","2013-06-29","2013-06-30","2013-07-01","2013-07-02","2013-07-03","2013-07-04","2013-07-05","2013-07-06","2013-07-07","2013-07-08","2013-07-09","2013-07-10","2013-07-11","2013-07-12","2013-07-13","2013-07-14","2013-07-15","2013-07-16","2013-07-17","2013-07-18","2013-07-19","2013-07-20","2013-07-21","2013-07-22","2013-07-23","2013-07-24","2013-07-25","2013-07-26","2013-07-27","2013-07-28","2013-07-29","2013-07-30","2013-07-31","2013-08-01","2013-08-02","2013-08-03","2013-08-04","2013-08-05","2013-08-06","2013-08-07","2013-08-08","2013-08-09","2013-08-10","2013-08-11","2013-08-12","2013-08-13","2013-08-14","2013-08-15","2013-08-16","2013-08-17","2013-08-18","2013-08-19","2013-08-20","2013-08-21","2013-08-22","2013-08-23","2013-08-24","2013-08-25","2013-08-26","2013-08-27","2013-08-28","2013-08-29","2013-08-30","2013-08-31","2013-09-01","2013-09-02","2013-09-03","2013-09-04","2013-09-05","2013-09-06","2013-09-07","2013-09-08","2013-09-09","2013-09-10","2013-09-11","2013-09-12","2013-09-13","2013-09-14","2013-09-15","2013-09-16","2013-09-17","2013-09-18","2013-09-19","2013-09-20","2013-09-21","2013-09-22","2013-09-23","2013-09-24","2013-09-25","2013-09-26","2013-09-27"],
['data1', 15000,15000,15000,15000,15000,15000,15927.245117077,15927.245117077,15927.245117077,15927.245117077,15927.245117077,15755.288415648,15755.288415648,15755.288415648,15755.288415648,15755.288415648,15755.288415648,15755.288415648,15755.288415648,15755.288415648,15755.288415648,15755.288415648,15769.738173005,15769.738173005,15769.738173005,15769.738173005,15769.738173005,15769.738173005,15769.738173005,15769.738173005,15769.738173005,15769.738173005,15769.738173005,15769.738173005,15769.738173005,15769.738173005,15769.738173005,15769.738173005,15769.738173005,15769.738173005,15669.99213179,15669.99213179,15669.99213179,17400.232979407,17400.232979407,17400.232979407,17511.459187653,19854.440712839,21218.860418753,21218.860418753,21218.860418753,21218.860418753,21218.860418753,21218.860418753,21218.860418753,21218.860418753,20807.374921,20807.374921,20807.374921,20807.374921,20807.374921,20807.374921,20807.374921,20657.648030371,20657.648030371,20657.648030371,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20483.263112791,20094.490800289,20094.490800289,20094.490800289,20094.490800289,20094.490800289,20094.490800289,20094.490800289,20094.490800289,20565.55836209,20565.55836209,20367.951604448,20367.951604448,20367.951604448,20367.951604448,20367.951604448,19812.800279277,19812.800279277,19812.800279277,19812.800279277,19812.800279277,19812.800279277,19812.800279277,19812.800279277,19812.800279277,20332.710507924,20332.710507924,22125.499903303,22125.499903303,22125.499903303,22125.499903303,22125.499903303,22125.499903303,22125.499903303,22125.499903303,22125.499903303,22125.499903303,22125.499903303,22125.499903303,20647.420199985,20647.420199985,20063.73419762,20063.73419762,20063.73419762,20063.73419762,20063.73419762,20063.73419762,20063.73419762,20063.73419762,20063.73419762,20063.73419762,20063.73419762,20063.73419762,17914.660445699,17914.660445699,18301.384629534,18301.384629534,18301.384629534,18301.384629534,18301.384629534,18301.384629534,18301.384629534,18301.384629534,18301.384629534,18301.384629534,18301.384629534,18301.384629534,20085.867765553,20085.867765553,20085.867765553,20085.867765553,20085.867765553,20085.867765553,20085.867765553,20085.867765553,20085.867765553,20085.867765553,20085.867765553,20085.867765553,20085.867765553,20085.867765553,20085.867765553,20085.867765553,20085.867765553,20085.867765553,20085.867765553,20085.867765553,20078.815689465,20078.815689465,20078.815689465,20078.815689465,20078.815689465,20078.815689465,20078.815689465,20078.815689465,20078.815689465,20078.815689465,19737.701653826,19737.701653826,19737.701653826,19737.701653826,19737.701653826,19737.701653826,19737.701653826,19737.701653826,22715.863780784,22715.863780784,22715.863780784,22715.863780784,22715.863780784,22715.863780784,22715.863780784,22715.863780784,22715.863780784,22715.863780784,22715.863780784,22715.863780784,22715.863780784,22715.863780784,22715.863780784,22715.863780784,22715.863780784,22715.863780784,20708.303533476,20708.303533476,20708.303533476,20708.303533476,21504.194451988,21504.194451988,21504.194451988,21504.194451988,21504.194451988,21504.194451988,21504.194451988,21504.194451988,21504.194451988,21504.194451988,25172.350703437,25172.350703437,25202.004805018,25202.004805018,26404.971853459,26404.971853459,27170.177165329,27170.177165329,28663.382933737,28663.382933737,28663.382933737,28663.382933737,28663.382933737,28663.382933737,28663.382933737,28663.382933737,28663.382933737,28663.382933737,28663.382933737,28663.382933737,26817.322565229,26817.322565229,34541.980229008,33571.083717099,41577.825873725,41577.825873725,46894.928502596,46894.928502596,51581.870532529,52848.306461127,57077.922813436,57077.922813436,51890.761676227,55249.102238167,49303.048004743,49303.048004743,47842.58415498,47842.58415498,48242.67481654,50356.876830157,50356.876830157,50356.876830157,46900.891797973,46900.891797973,46900.891797973,46900.891797973,46900.891797973,46900.891797973,46900.891797973,46900.891797973,46900.891797973,46900.891797973,46900.891797973,46900.891797973,46900.891797973,46900.891797973,49330.108621652,49330.108621652,49330.108621652,49330.108621652,49330.108621652,49330.108621652,52236.074674791,52236.074674791,52236.074674791,52236.074674791,52236.074674791,52236.074674791,52236.074674791,52236.074674791,43178.901841529,43178.901841529,43178.901841529,43178.901841529,43178.901841529,43178.901841529,43178.901841529,43178.901841529,43178.901841529,43178.901841529,43178.901841529,43917.952150513,43917.952150513,43917.952150513,43917.952150513,43917.952150513,39406.927056817,39406.927056817,39406.927056817,39406.927056817,38589.666737867,38589.666737867,38589.666737867,42560.192132327,42560.192132327,42560.192132327,42560.192132327,42560.192132327,42560.192132327,38169.016903728,38169.016903728,38169.016903728,38169.016903728,38169.016903728,38169.016903728,38169.016903728,38169.016903728,38169.016903728,38169.016903728,42217.551399129,42217.551399129,40879.06354071,40879.06354071,40879.06354071,40879.06354071,40879.06354071,40879.06354071,40879.06354071,40879.06354071,40879.06354071,40879.06354071,40716.042065566,40716.042065566,37801.517412552,37801.517412552,37801.517412552,37801.517412552,37801.517412552,35983.835580405,35983.835580405,35983.835580405,33575.995951833,33575.995951833,33575.995951833,33575.995951833,39256.881482749,39256.881482749,39256.881482749,39256.881482749,39572.042341289,39985.864580795,43052.811003259,46265.984891392,44879.409967854,44879.409967854,44879.409967854,44879.409967854,44879.409967854,47683.50862278,51942.811813877,51942.811813877,51942.811813877,51467.452928262,51467.452928262,59624.450559155,59467.863783826,59467.863783826,59467.863783826,59467.863783826,59467.863783826,59467.863783826,59566.547925439,59566.547925439,59566.547925439,65959.676026915,65959.676026915,65959.676026915,65959.676026915,65959.676026915,65959.676026915,65959.676026915,65959.676026915,51810.581817449,51810.581817449,51810.581817449,51810.581817449,51810.581817449,51810.581817449,48678.834679632,48678.834679632,54323.038812315,54323.038812315,54323.038812315,54323.038812315,68234.490305818,68234.490305818,72351.20171588,72351.20171588,72351.20171588,72351.20171588,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,73055.760187597,66135.685586341,66135.685586341,66135.685586341,66135.685586341,66135.685586341,66135.685586341,66135.685586341], //model
['data2', 17276,17235,17147,17013,16943.666666667,16874.333333333,16805,16414,16294,16086,16042,15950.666666667,15859.333333333,15768,15776,15682.5,15589,15608,15532.666666667,15457.333333333,15382,15252,15210,15139,14969,14872.666666667,14776.333333333,14680,14528,14376,14341,14250,14199,14148,14097,13719,13845,13686,13617,13582.666666667,13548.333333333,13514,13633,13491,13504,13426,13504.666666667,13583.333333333,13662,13619,13297,13154,13159.857142857,13165.714285714,13171.571428571,13177.428571429,13183.285714286,13189.142857143,13195,13160,13195.333333333,13230.666666667,13266,13401,13331,13356,13382,13303,13224,13145,13131,12847,12923,12996,12991.333333333,12986.666666667,12982,12864,12855,12841,12981,12948.333333333,12915.666666667,12883,12718,12644,12614,12584,12618.333333333,12652.666666667,12687,12680,12530,12234,12343,12315.666666667,12288.333333333,12261,12183,11927,11930,11925,11947,11969,11991,11892,11949,12020,12013,12051.333333333,12089.666666667,12128,12151,11978,11927,12038,12041.666666667,12045.333333333,12049,12184,12162,12611,12646.75,12682.5,12718.25,12754,12750,12607,12679,12558,12642,12726,12810,13021,13115,13290,13368,13511.333333333,13654.666666667,13798,14045,14147.5,14250,14352.5,14455,14557.5,14660,14985,15039,15051,15069.5,15088,15106.5,15125,15246,15564,15762,15993,16047.333333333,16101.666666667,16156,16214,16244,16266,16345,16337.333333333,16329.666666667,16322,16304,16474,16535,16503,16515,16527,16539,16838,16815,16745,16811,16788.2,16765.4,16742.6,16719.8,16697,16736,16584,16683.666666667,16783.333333333,16883,16982.666666667,17082.333333333,17182,17524,18404,18450,18496,18542,18685,19007,18953,19119,19285,19451,19932,20385,20902,21053,21410.333333333,21767.666666667,22125,22438,22569,22692.5,22816,22712,22608,22504,22547,22089,22365,22238,22206.333333333,22174.666666667,22143,22271,22442,22519,22273,22347,22421,22495,22307,22404,22365,22209,22236.666666667,22264.333333333,22292,22064,22374,22383,22419,22583.666666667,22748.333333333,22913,23620,23817,24235,24758,24904.666666667,25051.333333333,25198,25560,25415,25884,26600,28335.333333333,30070.666666667,31806,34139.5,36473,41987,41987,42836.666666667,43686.333333333,44536,43943,43341,41864,40549,40727.333333333,40905.666666667,41084,42273,42251,42288,42748.5,43209,43669.5,44130,44630,45191,44876,44661,44748,44835,44922,44231,43915,44579,44376,43953,43530,43107,42479,42060,41926,41178,40431,39684,38937,38714,37402,36855,36812,36245,35678,35111,34111,33370,33093,32690,32496.666666667,32303.333333333,32110,32195,31816,31723,31630,31547,31464,31381,31267,31348,31339,30931,30909.333333333,30887.666666667,30866,30730,30569,30581,30461,30636.666666667,30812.333333333,30988,30830,30756,30465,30538,30354,30170,29986,29585,29398,29333.5,29269,29045,28821,28597,28279,28193,28617,28461,28305,28149,27993,28111,28331,28563,28839,29333.666666667,29828.333333333,30323,30844,31512,31865,32641,33456,34271,35086,36804,38014,39712,40017,41426.333333333,42835.666666667,44245,46576,45289,47067,48880,49730.666666667,50581.333333333,51432,52133,53193,53870,53392,53837,54282,54727,55241,55959,55474,55603,55902,56201,56500,56310,55986,57024,57785.272727273,58546.545454545,59307.818181818,60069.090909091,60830.363636364,61591.636363636,62352.909090909,63114.181818182,63875.454545455,64636.727272727,65398,66407,67855,67935,67522,67109,66696,66283,63970,63108,62062,59657,58545,57433,56321,53984,53351,51422,49996,48351.333333333,46706.666666667,45062,43805,41883,40434,39195,38342.666666667,37490.333333333,36638,35503,35047,33850,33469.8,33089.6,32709.4,32329.2,31949,31823,31138,30988,30489.333333333,29990.666666667,29492,29212,28434,27551,27276], //official
data_logscale_tweet //number of tweet
],
types: {
data3: 'bar' // ADD
},
names: {
data1: 'Model',
data2: 'Official',
data3: 'Number of Tweets'
},
axes: {
data3: 'y2'
},
colors: {
data1: '#0000FF',
data2: '#FF0000',
data3: '#808080'
}
},
zoom: {
enabled: true
},
legend: {
position: 'right'
},
axis: {
x: {
type: 'timeseries',
tick: {
format: "%Y-%m",
// count: 4
// values: ['2013-06-01'],
count: 3
},
height: 80,
label: {
text: 'X Label',
position: 'outer-center'
}
},
y: {
min: 0,
tick: {
format: function (d) {
return Math.round(d/1000) + 'K';
}
},
padding: {top: 100, bottom: 100},
label: { // ADD
text: 'Price (IDR)',
position: 'outer-middle'
}
},
y2: {
//max: 100,
//min: 0
show: true,
tick: {
format: function (d) { return Math.pow(10,d).toFixed(0); }
},
//padding: {top: 0, bottom: 10},
//show: true,
label: { // ADD
text: 'Number Of Tweets',
position: 'outer-middle'
}
}
}
});
function log10(val) {
return parseFloat(Math.log(val) / Math.LN10).toFixed(2);
}
//for add title of this chart
d3.select('#chart svg').append('text')
.attr('x', d3.select('#chart svg').node().getBoundingClientRect().width / 2)
.attr('y', 16)
.attr('text-anchor', 'middle')
.style('font-size', '1.4em')
.text('Title of this chart');
*/
/*
var myjson = [{"value":569,"timestamp":"2014-01-01 08:27:36"},
{"value":499,"timestamp":"2014-01-01 10:25:37"},
{"value":639,"timestamp":"2014-01-01 20:00:44"},
{"value":569,"timestamp":"2014-01-02 06:36:32"},
{"value":559,"timestamp":"2014-01-02 06:58:33"},
{"value":539,"timestamp":"2014-01-02 08:13:33"}
];
//http://c3js.org/samples/data_json.html
//https://github.com/masayuki0812/c3/issues/364
chart_value = c3.generate({
data: {
json: myjson,
keys: {
value: ['value']
},
type: 'step',
onclick: function(d) { console.log(d); }
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1',null,null],
['data2',null,null]
// ['data1'],
// ['data2']
]
}
});
*/
/*
var chart1 = c3.generate({
bindto: "#chart1",
data: {
columns: [
['data1', 100, 200, 150, 300, 200],
['data2', 400, 500, 250, 700, 300], ]
}
});
var chart2 = c3.generate({
bindto: "#chart2",
data: {
columns: [
['data1', 100, 200, 150, 300, 200],
['data2', 400, 500, 250, 700, 300], ]
}
});
*/
/**
* innerHTML property for SVGElement
* Copyright(c) 2010, Jeff Schiller
*
* Licensed under the Apache License, Version 2
*
* Works in a SVG document in Chrome 6+, Safari 5+, Firefox 4+ and IE9+.
* Works in a HTML5 document in Chrome 7+, Firefox 4+ and IE9+.
* Does not work in Opera since it doesn't support the SVGElement interface yet.
*
* I haven't decided on the best name for this property - thus the duplication.
*/
/*
(function() {
var serializeXML = function(node, output) {
var nodeType = node.nodeType;
if (nodeType == 3) { // TEXT nodes.
// Replace special XML characters with their entities.
output.push(node.textContent.replace(/&/, '&amp;').replace(/</, '&lt;').replace('>', '&gt;'));
} else if (nodeType == 1) { // ELEMENT nodes.
// Serialize Element nodes.
output.push('<', node.tagName);
if (node.hasAttributes()) {
var attrMap = node.attributes;
for (var i = 0, len = attrMap.length; i < len; ++i) {
var attrNode = attrMap.item(i);
output.push(' ', attrNode.name, '=\'', attrNode.value, '\'');
}
}
if (node.hasChildNodes()) {
output.push('>');
var childNodes = node.childNodes;
for (var i = 0, len = childNodes.length; i < len; ++i) {
serializeXML(childNodes.item(i), output);
}
output.push('</', node.tagName, '>');
} else {
output.push('/>');
}
} else if (nodeType == 8) {
// TODO(codedread): Replace special characters with XML entities?
output.push('<!--', node.nodeValue, '-->');
} else {
// TODO: Handle CDATA nodes.
// TODO: Handle ENTITY nodes.
// TODO: Handle DOCUMENT nodes.
throw 'Error serializing XML. Unhandled node of type: ' + nodeType;
}
}
// The innerHTML DOM property for SVGElement.
Object.defineProperty(SVGElement.prototype, 'innerHTML', {
get: function() {
var output = [];
var childNode = this.firstChild;
while (childNode) {
serializeXML(childNode, output);
childNode = childNode.nextSibling;
}
return output.join('');
},
set: function(markupText) {
// Wipe out the current contents of the element.
while (this.firstChild) {
this.removeChild(this.firstChild);
}
try {
// Parse the markup into valid nodes.
var dXML = new DOMParser();
dXML.async = false;
// Wrap the markup into a SVG node to ensure parsing works.
sXML = '<svg xmlns=\'http://www.w3.org/2000/svg\'>' + markupText + '</svg>';
var svgDocElement = dXML.parseFromString(sXML, 'text/xml').documentElement;
// Now take each node, import it and append to this element.
var childNode = svgDocElement.firstChild;
while(childNode) {
this.appendChild(this.ownerDocument.importNode(childNode, true));
childNode = childNode.nextSibling;
}
} catch(e) {
throw new Error('Error parsing XML string');
};
}
});
// The innerSVG DOM property for SVGElement.
Object.defineProperty(SVGElement.prototype, 'innerSVG', {
get: function() {
return this.innerHTML;
},
set: function(markupText) {
this.innerHTML = markupText;
}
});
})();
d3.selection.prototype.text = d3.selection.prototype.html;
var chart = c3.generate({
data: {
xs: {
'x1': 'data1',
'x2': 'data2',
'x3': 'data3',
},
columns: [
["data1", 5],
["x1", 7],
["data2", 15],
["x2", 17],
["data3", 25],
["x3", 27],
],
type: "scatter",
},
point: {
r: 15
},
axis: {
x: {
tick: {
values: [0, 10, 20, 30, 40],
format: function(d) {
var date = '2014-01-01';
var weekday = d;
return '<tspan x="0" dy="1.2em">' + date + '</tspan><tspan x="0" dy="1.2em">' + weekday + '</tspan>';
}
},
min: 0,
max: 50
},
y: {
min: 0,
}
}
});
*/
/*
var chart = c3.generate({
data: {
xs: {
'x1': 'data1',
},
columns: [
["data1", 5],
["x1", 7],
],
type: "scatter",
},
point: {
r: 10
},
axis: {
x: {
min: 0,
max: 10
},
y: {
min: 0,
}
}
});
*/
/*
function A(id) {
this.id = id;
this.config = {};
this.config.value = id;
bindThis(fn, this, this);
function bindThis(fn, target, argThis) {
console.log(fn ,target);
for (var key in fn) {
if (typeof fn[key] === 'object') {
target[key] = {};
bindThis(fn[key], target[key], argThis);
} else {
target[key] = fn[key].bind(argThis);
}
}
};
}
var fn = A.prototype = {};
fn.func = {};
fn.func.hoge = function () {
console.log("func.hoge =>", this.id);
};
fn.func.cat1 = {};
fn.func.cat1.hoge = function () {
console.log("func.cat1.hoge =>", this.id);
};
//fn.config = {};
//fn.config.value = undefined;
fn.api = function () {
console.log("api", this);
};
var a1 = new A(1), a2 = new A(2);
console.log(a1.id, a1.config.value);
console.log(a2.id, a2.config.value);
a1.func.hoge();
a2.func.hoge();
a1.func.cat1.hoge();
a2.func.cat1.hoge();
*/
/*
var chart = c3.generate({
data: {
url: '/data/test_1.json',
mimeType: 'json',
keys: {
x: 'fecha_hora',
value: ['lgcom', 'fravegacom', 'mercadolibrecomar']
},
},
axis : {
x : {
type : 'timeseries',
tick : {
format : "%Y-%m-%d %H:%M:%S"
}
}
}
});
*/
/*
var chart = c3.generate({
data: {
x: 'x',
x_format: '%Y-%m-%dT%H:%M:%S',
url: "/data/timeseries.json",
mimeType: 'json'
},
axis: {
x: {
type: 'timeseries',
tick: {
format: "%Y-%m-%d"
}
}
},
});
*/
/*
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', 10, 20, 30],
['data2', 400, 500, 250]
]
}
});
setTimeout(function(){
chart.flow({
columns: [
['x', 40, 50],
['data2', 700, 300]
]
});
}, 1000);
*/
/*
var chart = c3.generate({
"data": {
"x_format": "%Y-%m-%dT%H:%M:%S.%LZ",
"xs": {
"xxx #0": "x504s0",
"yyy #0": "x15575s0",
"zzz #0": "x17521s0"
},
"columns": [
[
"x504s0",
"2014-06-20T00:16:52.000Z",
"2014-06-24T15:38:54.000Z",
"2014-06-24T15:39:30.000Z",
"2014-06-24T15:40:00.000Z",
"2014-06-27T06:39:21.000Z",
"2014-06-27T06:39:53.000Z"
],
[
"xxx #0",
1,
1,
1,
1
],
[
"x15575s0",
"2014-06-21T16:35:17.000Z"
],
[
"yyy #0",
2
],
[
"x17521s0",
"2014-06-21T18:14:34.000Z",
"2014-06-21T20:05:42.000Z",
"2014-06-22T05:34:16.000Z",
"2014-06-22T21:48:58.000Z",
"2014-06-24T11:42:07.000Z",
"2014-06-24T13:11:48.000Z",
"2014-06-24T14:01:13.000Z"
],
[
"zzz #0",
3,
3,
3,
3
]
]
},
"axis": {
"x": {
"type": "timeseries",
"tick": {
"rotate": 45,
// "count": 20,
fit: false,
"format": "%m-%d",
values: [new Date("2014-06-20"), new Date("2014-06-22")]
}
}
}
});
*/
/*
var start = moment("2013-01-01", "YYYY-MM-DD"),
end = moment("2014-01-01", "YYYY-MM-DD"),
range = moment().range(start, end);
var dates = ['x'];
var sample = ['sample'];
var sample2 = ['sample2'];
range.by('days', function(moment) {
dates.push(moment.toDate());
sample.push(Math.floor(Math.random() * 250) + 1);
sample2.push(Math.floor(Math.random() * 250) + 1);
});
var chart = c3.generate({
bindto: '#chart',
data: {
x : 'x',
x_format : '%Y%m%d',
columns: [
dates, sample, sample2
]
},
axis : {
x : {
type : 'timeseries',
tick : {
format : "%e %b %y" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
}
}
}
});
*/
/*
var chart = c3.generate({
size: {
height: 500,
width: 1100,
},
data: {
x: 'Company',
columns: [
['Company', 'AAA', 'BBB', 'CCC', 'DDD'],
['c1', 100, 200, 100, 150],
['c2', 200, 100, 100, 150],
['c3', 300, 200, 200, 250],
],
type: 'scatter',
},
grid: {
x: {
// show: true
lines: [
{value:0, class:'dotted'},
{value:1, class:'dotted'},
{value:2, class:'dotted'},
{value:3, class:'dotted'},
]
}
},
axis: {
x: {
type: 'categories',
tick: {
rotate: 75,
centered: true
},
height: 200
},
y: {
tick: {
format: d3.format("$,")
}
}
}
});
*/
/*
var countyVals = ['Population',1737046,1755487,1777514,1788082,1800783,1814999,1845209,1871098,1891125,1909205,1931249,1942600,1957000,1981900,2169381];
var yearCats = ['2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013'];
var usPopChart = c3.generate({
padding: {
top: 0,
right: 15,
bottom: 0,
left: 15,
},
size: {
height: 105,
width: 285
},
data: {
columns: [
countyVals
],
type: 'area'
},
area : {
zerobased: false,
},
axis : {
x : {
type: 'categorized',
categories: yearCats,
tick: {
count: 4,
format: function(d) { return yearCats[d.toFixed(0)]; }
}
},
y : {
min: 1700000,
max: 2000000,
show: false
}
},
legend: {
show: false
},
tooltip: {
format: {
value: d3.format(',')
}
}
});
*/
/*
time = ["x",
"2013-01-01T12:00:00",
"2013-01-02T12:00:00",
"2013-01-03T12:00:00",
"2013-01-04T12:00:00",
"2013-01-05T12:00:00",
"2013-01-06T12:00:00"];
data = ['data1', 30, 200, 100, 400, 150, 250];
var chart = c3.generate({
data: {
x: 'x',
x_format: '%Y-%m-%dT%H:%M:%S',
columns: [
time,
data
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%dT%H:%M:%S'
}
}
}
});
*/
/*
var chart1 = c3.generate({
bindto: "#weight",
data: {
columns: [
["weight", 10, 4, 5, 3, 2, 5]
],
colors: {
weight: "#6ab153"
},
types: {
weight: "area"
}
}
});
var chart2 = c3.generate({
bindto: "#bodyfat",
data: {
columns: [
["bodyfat", 1,2,3,4,5,10 ]
],
colors: {
bodyfat: "#018aa1"
},
types: {
bodyfat: "area"
}
}
});
var chart3 = c3.generate({
bindto: "#bloodpressure",
data: {
columns: [
["systolic", 1, 3.5, 4.5, 2, 3.5],
["diastolic", 0.5, 2, 3, 0.5, 2.5]
],
colors: {
systolic: "#6ab153",
diastolic: "#018aa1"
},
types: {
systolic: "line",
diastolic: "area"
}
}
});
var chart4 = c3.generate({
bindto: "#glucose",
data: {
columns: [
["glucose", 80, 80, 90, 100, 40]
],
colors: {
glucose: "#6ab153"
},
types: {
glucose: "area"
}
}
});
*/
/*
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
x_format: '%Y-%m-%d %H:%M:%S',
columns: [
['x', '2013-01-01 23:10:12', '2013-01-02 23:10:12', '2013-01-03 23:10:12', '2013-01-04 23:10:12', '2013-01-05 23:10:12', '2013-01-06 23:10:12'],
['data1', 300, 300, 600, 400, 350, 250]
],
types : { data1: 'area'} , colors : {data1:'#000000'}
},
axis: {
x: {
show : false,
type: 'timeseries',
tick: {
format: '%Y-%m-%d %H:%M:%S'
}
},
y: {
min: 150 //CAN SUCCESSFULLY SET TO BELOW 0, BUT NUMBERS ABOVE ZERO DON'T WORK
}
},
axes: {
data1: 'y'
},
point : {
show: false
},
grid: {
x: {
show: true
},
y : {
show: true
}
}
});
*/
/*
function generate(){
var __tickFormat = "%H:%M";
var __datas = [["date","12:05","12:06","12:07"],["ages",32,32,34]];
var __tickCount = 3;
var __chartSeriesColors = ["#3aa4c4"];
var __chartSeries = ["ages"];
var __chartTypes = ["donut"];
var chart = c3.generate({
data : {
x : 'date',
x_format : __tickFormat,
columns : __datas
},
type : 'timeseries',
axis: {
x: {
type: 'timeseries',
tick: {
count : __tickCount,
format: __tickFormat
}
}
},
color: {
pattern: __chartSeriesColors
}
});
for(var i = 0;i < __chartSeries.length; i++){
var dataName = __chartSeries[i];
var chartType = __chartTypes[i];
chart.transform(chartType);
}
}
generate();
*/
/*
function makeChart(){
return c3.generate({
data: {
columns: [
['AA', 30, 50, 80]
],
type: 'bar',
labels: true,
},
axis: {
x: {
type: "category",
categories: ["cat1", "cat2", "cat3"]
}
}
});
};
var chart = makeChart();
var data = {
columns: [
['BB', 100, 20, 40, 30, 10]
],
categories: ["cat1", "cat2", "cat3", "cat4", "cat5"]
};
setTimeout(function () {
chart.load(data);
}, 1000);
setTimeout(function(){
//$("#chart").children().remove();
chart.unload(['BB'])
chart.destroy();
$("#caption").html("Restarting...")
$("#data").html("");
chart = makeChart();
}, 2000);
*/
/*
c3.generate({
size: {
height: 130,
},
data: {
x: 'x',
json: {
x:['2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01', '2013-06-01', '2013-07-01', '2013-08-01', '2013-09-01', '2013-10-01', '2013-11-01', '2013-12-01'],
data: [25000, 18000, 19500, 20250, 22000, 30000, 24500, 22000, 24500, 25000, 21500, 19000]
},
names: {
data: "bounty"
},
types: {
data: 'area'
},
colors: {
data: '#6a8da7'
}
},
tooltip: {
show: true
},
grid: {
y: {
lines: [
{value: 60}
]
}
},
axis: {
y: {
show: false,
tick: {
format: function (d) {
return d + " " + "kWh"
}
}
},
x: {
show: false,
type: 'timeseries',
tick: {
format: '%b'
}
}
},
legend: {
show: false
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
["Cost", 70, 130 , 160, 140, 140, 130],
["Company_Impact", 20, 50, 60 , 30, 40, 90, 0 , 0 , 0 , 0 , 0 , 0],
["Suppliers", 30, 60, 80 , 90, 80, 20, 0 , 0 , 0 , 0 , 0 , 0]
],
axes: {
Cost: 'y2'
},
groups: [
["Company_Impact", "Suppliers"]
],
names: {
Company_Impact: "Company Impact"
},
type: "bar",
colors: {
Company_Impact: "#e5603b",
Suppliers: "#B8C2BB",
Cost: "#6a8da7"
},
types: {
Cost: "line"
}
},
axis: {
x: {
type: 'categorized',
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
y: {
label: {
text: 'lbs CO2e / unit',
position: 'outer-middle'
}
},
y2: {
min: 0,
show: true,
label: {
text: 'Cost',
position: 'outer-middle'
},
tick: {
format: function (d) {
return "$ " + d
}
}
}
},
grid: {
x: {
show: true
},
y: {
show: true
}
},
bar: {
width: 10
},
tooltip: {
show: true,
format: {
value: function (value, ratio, id) {
var format = id === 'Cost' ? d3.format('$') : function (d) {
return d + " lbs CO2e / unit"
};
return format(value);
}
}
}
});
$('#chart1').append(chart.element);
*/
/*
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '2014-01-01', '2014-02-01', '2014-03-01'],
['data1', 190, 200, 190],
],
type: 'bar',
},
axis: {
x: {
type: 'categorized'
},
rotated:true
},
});
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']
});
setTimeout(function () {
chart.load({
columns: [['data1', 50, 100, 150]],
categories:['2014', '2015', '2016']
});
}, 2000);
}, 2000);
*/
/*
var chart = c3.generate({
// "bindto": "#chart",
"axis": {
"x": {
"type": "timeseries",
"min": 1401879600000,
"max": 1401969600000,
}
},
"grid": {
"x": {
"lines": [
{ "value": 1401880524000, "text": "a", "color": "#f00" },
{ "value": 1401880566000, "text": "b", "color": "#f00" }
]
}
},
"data": {
"type": "line",
"columns": [
["epoch", 1401879600000, 1401883200000, 1401886800000],
["y", 1955, 2419, 2262]
],
"xs": {
"y": "epoch"
}
}
});
*/
/*
c3.generate({
padding: {
top: 100,
right: 0,
bottom: 100,
left: 40
},
size: {
height: 400
},
data: {
columns: [
['sample', 1000, 2000, 1500, 3000, 2500, 1500],
]
}
})
*/
/*
var xAxisData = ['EMP1','EMP2','EMP3','EMP4','EMP5','EMP6'];
var chart = c3.generate({
data: {
columns: [
['sample', 1000, 2000, 1500, 3000, 2500, 1500],
['sample1', 1562, 3654, 1478, 3654, 987, 78],
['sample2', 59, 2364, 2785, 369, 698, 6987],
['sample3', 654, 6987, 4112, 6210, 412, 202],
['sample4', 22, 252, 275, 3136, 159, 2636],
],
type : 'bar',
labels: {
format: {
y: d3.format('')
}
},
groups: [
['sample', 'sample1','sample2','sample3','sample4']
]
},
axis: {
x: {
type: 'categorized',
categories: xAxisData,
label: {
text: 'Employee name',
position: 'outer-center'
}
},
y: {
label: {
text: ' Count',
position: 'outer-middle'
}
},
rotated : true
}
});
*/
/*
var config_fuelecon = {
data: {
x: 'x',
x_format: '%Y-%m-%d %I:%M:%S %p',
columns: [
[ 'x','2014-06-01 21:44:15 PM','2014-06-01 21:44:45 PM','2014-06-01 21:45:15 PM','2014-06-01 21:45:45 PM','2014-06-01 21:46:15 PM','2014-06-01 21:46:45 PM','2014-06-01 21:47:16 PM','2014-06-01 21:47:45 PM','2014-06-01 21:48:15 PM','2014-06-01 21:48:45 PM','2014-06-01 21:48:56 PM','2014-06-01 21:49:15 PM','2014-06-01 21:49:17 PM','2014-06-01 21:49:19 PM','2014-06-01 21:49:38 PM','2014-06-01 21:49:50 PM','2014-06-01 21:49:52 PM','2014-06-01 21:49:54 PM','2014-06-01 21:50:15 PM','2014-06-01 21:50:22 PM','2014-06-01 21:50:45 PM','2014-06-01 21:51:22 PM','2014-06-01 21:51:44 PM','2014-06-01 21:51:46 PM','2014-06-01 21:52:15 PM','2014-06-01 21:52:47 PM','2014-06-01 21:53:15 PM','2014-06-01 21:53:45 PM','2014-06-01 21:54:15 PM','2014-06-01 21:54:45 PM','2014-06-01 21:55:15 PM','2014-06-01 21:55:45 PM','2014-06-01 21:56:15 PM','2014-06-01 21:56:45 PM','2014-06-01 21:57:15 PM','2014-06-01 21:57:45 PM','2014-06-01 21:58:58 PM','2014-06-01 21:58:59 PM','2014-06-01 21:59:15 PM','2014-06-01 21:59:45 PM','2014-06-01 22:00:22 PM','2014-06-01 22:00:53 PM','2014-06-01 22:01:15 PM','2014-06-01 22:01:45 PM','2014-06-01 22:02:15 PM','2014-06-01 22:02:45 PM','2014-06-01 22:03:15 PM','2014-06-01 22:03:47 PM','2014-06-01 22:04:15 PM','2014-06-01 22:04:45 PM','2014-06-01 22:05:15 PM','2014-06-01 22:05:45 PM','2014-06-01 22:06:15 PM','2014-06-01 22:06:30 PM','2014-06-01 22:06:45 PM','2014-06-01 22:07:15 PM','2014-06-01 22:07:52 PM','2014-06-01 22:08:14 PM','2014-06-01 22:08:16 PM','2014-06-01 22:08:52 PM','2014-06-01 22:09:15 PM','2014-06-01 22:09:42 PM','2014-06-01 22:10:15 PM','2014-06-01 22:10:17 PM','2014-06-01 22:10:45 PM','2014-06-01 22:10:47 PM','2014-06-01 22:10:49 PM','2014-06-01 22:11:15 PM','2014-06-01 22:11:32 PM','2014-06-01 22:11:34 PM','2014-06-01 22:11:45 PM','2014-06-01 22:12:15 PM','2014-06-01 22:12:45 PM','2014-06-01 22:13:15 PM','2014-06-01 22:13:17 PM','2014-06-01 22:13:45 PM','2014-06-01 22:14:15 PM','2014-06-01 22:14:45 PM','2014-06-01 22:15:03 PM','2014-06-02 00:05:16 AM','2014-06-02 00:05:46 AM','2014-06-02 00:05:48 AM','2014-06-02 00:06:02 AM','2014-06-02 00:06:15 AM','2014-06-02 00:06:17 AM','2014-06-02 00:06:46 AM','2014-06-02 00:07:15 AM','2014-06-02 00:07:17 AM','2014-06-02 00:07:46 AM','2014-06-02 00:07:48 AM','2014-06-02 00:08:20 AM','2014-06-02 00:08:31 AM','2014-06-02 00:08:33 AM','2014-06-02 00:08:46 AM','2014-06-02 00:09:16 AM','2014-06-02 00:09:46 AM','2014-06-02 00:10:16 AM','2014-06-02 00:10:46 AM','2014-06-02 00:11:16 AM','2014-06-02 00:11:49 AM','2014-06-02 00:11:57 AM','2014-06-02 00:12:16 AM','2014-06-02 00:12:46 AM','2014-06-02 00:13:16 AM','2014-06-02 00:13:46 AM','2014-06-02 00:14:16 AM','2014-06-02 00:14:46 AM','2014-06-02 00:15:26 AM','2014-06-02 00:15:49 AM','2014-06-02 00:16:16 AM','2014-06-02 00:16:46 AM','2014-06-02 00:17:16 AM','2014-06-02 00:17:46 AM','2014-06-02 00:18:21 AM','2014-06-02 00:18:50 AM','2014-06-02 00:19:16 AM','2014-06-02 00:19:46 AM','2014-06-02 00:20:16 AM','2014-06-02 00:20:47 AM','2014-06-02 00:21:59 AM','2014-06-02 00:22:01 AM','2014-06-02 00:22:17 AM','2014-06-02 00:22:46 AM','2014-06-02 00:23:16 AM','2014-06-02 00:23:46 AM','2014-06-02 00:24:16 AM','2014-06-02 00:24:46 AM','2014-06-02 00:25:16 AM','2014-06-02 00:25:46 AM','2014-06-02 00:26:16 AM','2014-06-02 00:26:46 AM','2014-06-02 00:27:16 AM','2014-06-02 00:27:25 AM','2014-06-02 00:27:46 AM','2014-06-02 00:27:48 AM','2014-06-02 00:28:16 AM','2014-06-02 00:28:18 AM','2014-06-02 00:28:20 AM','2014-06-02 00:28:46 AM','2014-06-02 00:29:17 AM','2014-06-02 00:29:46 AM','2014-06-02 00:30:16 AM','2014-06-02 00:30:46 AM','2014-06-02 00:31:16 AM','2014-06-02 00:31:18 AM','2014-06-02 00:31:46 AM','2014-06-02 00:32:16 AM','2014-06-02 00:32:46 AM','2014-06-02 00:33:16 AM','2014-06-02 00:33:46 AM','2014-06-02 00:34:12 AM','2014-06-02 00:34:47 AM','2014-06-02 00:34:50 AM','2014-06-02 00:34:58 AM','2014-06-02 00:35:16 AM','2014-06-02 00:35:46 AM','2014-06-02 00:36:08 AM','2014-06-02 00:36:30 AM','2014-06-02 00:36:31 AM','2014-06-02 00:36:31 AM','2014-06-02 00:36:49 AM','2014-06-02 00:36:50 AM','2014-06-02 00:37:16 AM','2014-06-02 00:37:49 AM','2014-06-02 00:37:59 AM','2014-06-02 00:38:16 AM','2014-06-02 00:38:46 AM','2014-06-02 00:39:52 AM','2014-06-02 00:47:29 AM','2014-06-02 00:47:50 AM','2014-06-02 00:47:51 AM','2014-06-02 00:48:16 AM','2014-06-02 00:48:26 AM','2014-06-02 00:48:44 AM','2014-06-02 00:48:46 AM','2014-06-02 00:49:16 AM','2014-06-02 00:49:38 AM','2014-06-02 00:49:46 AM','2014-06-02 00:50:12 AM','2014-06-02 00:50:47 AM','2014-06-02 00:50:49 AM','2014-06-02 00:51:09 AM','2014-06-02 00:51:35 AM','2014-06-02 00:51:37 AM','2014-06-02 00:51:46 AM','2014-06-02 00:52:16 AM','2014-06-02 00:52:46 AM','2014-06-02 00:53:10 AM','2014-06-02 00:53:52 AM','2014-06-02 00:53:52 AM','2014-06-02 00:53:52 AM','2014-06-02 00:54:10 AM','2014-06-02 00:54:46 AM','2014-06-02 00:54:48 AM','2014-06-02 00:55:16 AM','2014-06-02 00:55:46 AM','2014-06-02 00:56:08 AM','2014-06-02 00:56:16 AM','2014-06-02 00:56:46 AM','2014-06-02 00:56:55 AM' ],
[ 'MPG',11,10,9,10,11,13,12,12,13,13,14,13,14,14,14,14,14,14,14,14,14,15,15,15,16,16,17,17,17,18,18,18,18,18,18,18,18,19,19,19,19,19,19,19,19,19,19,19,19,19,20,20,20,19,19,19,19,19,19,20,19,19,19,20,20,19,19,19,19,19,19,0,0,0,0,0,0,0,19,0,2,2,4,6,6,12,15,15,13,12,15,15,14,14,14,15,16,17,17,17,18,18,18,18,18,19,19,19,19,20,20,20,20,20,20,20,20,20,20,21,21,21,21,21,21,21,21,21,21,21,21,21,22,22,22,22,22,21,22,22,22,22,22,22,22,22,22,22,22,22,22,21,22,22,21,21,21,21,21,21,21,21,21,0,0,0,0,21,0,2,4,5,7,11,11,11,12,13,12,12,14,15,14,15,15,18,17,17,16,17,17,17,16,17,16,0,0,0,0,16 ]
],
empty: {
label: {
text: "No Data"
}
},
type: 'area-step'
},
axis: {
x: {
type: 'timeseries',
tick: {
count: 5,
fit: false,
format: function (x) { if (x !== undefined) { var parts = x.toString().split(' '); return parts[1]+parts[2]+' '+parts[4].slice(0,8); } }
},
padding: { left: 100000, right: 100000 }
},
y: {
max: 22, ticks: 3,
padding: { top: 0, bottom: 0 }
}
},
legend: {
show: false
},
color: {
pattern: ['#758eab']
}
};
var graph_fuelecon = c3.generate(config_fuelecon);
*/
/*
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01'],
['data1', 190, 200, 190, null],
// ['data1', -190, -200, -190, null],
],
type: 'bar',
// labels: true
labels: {
format: function (v, id) {
if (v === null) {
return 'Not Applicable';
}
return d3.format('$')(v);
}
}
},
axis: {
x: {
type: 'categorized'
},
rotated: true
},
});
*/
/*
var chart = c3.generate({
data: {
x : 'date',
// x_format: '%Y-%m-%d',
columns: [
['date', '2013-01-01', '2013-11-02', '2013-12-01', '2014-01-01'],
['sample', 30, -200, 100, 400],
['sample2', -130, 300, 200, 450]
],
type: 'bar',
},
bar: {
width: 10,
},
axis : {
x : {
type : 'timeseries',
tick : {
format : "%Y-%m-%d %H:%M:%S"
}
}
}
});
*/
/*
function generateBarChart() {
return c3.generate({
data: {
columns: [
['data1', 30, 300, 140, 190, 50, 90],
['data2', 130, 200, 90, 300, 250, 150],
['data3', 90, 100, 180, 190, 150, 250]
],
type: 'bar',
groups: [['data1', 'data2', 'data3']],
onclick: function (d, element) {
var data = {};
chart.data.targets.forEach(function (t) {
data[t.id] = t.values.filter(function (v) {
return v.index === d.index;
}).map(function (v) {
return v.value;
});
});
chart = generatePieChart(data);
}
}
});
}
function generatePieChart(data) {
return c3.generate({
data: {
json: data,
type: 'pie',
onclick: function () {
chart = generateBarChart();
}
},
});
}
var chart = generateBarChart();
*/
/*
var popYears = ['x','2000-01-02','2001-01-02','2002-01-02','2003-01-02','2004-01-02','2005-01-02','2006-01-02','2007-01-02','2008-01-02','2009-01-02','2010-01-02','2011-01-02','2012-01-02','2013-01-02','2020-01-02'];
var countyVals = ['Population',1737046,1755487,1777514,1788082,1800783,1814999,1845209,1871098,1891125,1909205,1931249,1942600,1957000,1981900,2169381];
var popChart = c3.generate({
padding: {
top: 0,
right: 10,
bottom: 0,
left: 10,
},
size: {
// height: 50,
// width: 185
},
data: {
x: 'x',
columns: [
popYears,
countyVals
],
regions: {
'Population': [{'start':"2013-01-02",'end':"2020-01-02",'style':'dashed'}]
}
},
axis : {
x : {
type : 'timeseries',
tick: {
count: 4,
fit: true,
format: "%Y"
}
},
y: {
show:false
}
},
legend: {
show: false
},
tooltip: {
format: {
value: d3.format(',')
}
}
});
*/
/*
var chart = c3.generate({
data: {
columns: [
['data1', 100, 200, 150, 400],
],
type: 'bar'
},
onresized: updateErrorBars
});
var errors = [50, 20, 100, 150];
var errorBars = d3.select('#chart svg .c3-chart').append('g');
errorBars.selectAll('circle')
.data(errors)
.enter().append('circle')
.attr('class', function (d, i) { return 'error-circle-' + i; })
.attr('r', 5);
errorBars.selectAll('path')
.data(errors)
.enter().append('path')
.attr('class', function (d, i) { return 'error-line-' + i; });
function updateErrorBars() {
d3.selectAll('.c3-bar').each(function (d, i) {
var segList = this.pathSegList,
yPos = segList.getItem(1).y,
xPos = (segList.getItem(2).x + segList.getItem(0).x) / 2;
errorBars.select('.error-circle-' + i)
.attr('cx', xPos)
.attr('cy', yPos);
errorBars.select('.error-line-' + i)
.attr('d', function (d) {
return 'M' + xPos + ',' + (yPos + d/2) + ' ' +
'L' + xPos + ',' + (yPos - d/2) + ' ' +
'M' + (xPos - 5) + ',' + (yPos + d/2) + ' ' +
'L' + (xPos + 5) + ',' + (yPos + d/2) + ' ' +
'M' + (xPos - 5) + ',' + (yPos - d/2) + ' ' +
'L' + (xPos + 5) + ',' + (yPos - d/2) + ' ' +
'z';
});
});
};
setTimeout(updateErrorBars, 500);
*/
/*
var x_data = ["x","Apr22","Apr23","Apr24","Apr26","Apr27","Apr28","Apr29","Apr30","May01","May02","May03","May04","May05","May06","May07","May08","May09","May10","May11","May12","May13","May14","May15","May16","May17","May18","May19","May20","May21"];
var connect_data = ["Connected",6,6,6,6,5,5,6,6,6,5,5,5,5,5,4,4,5,6,7,7,7,7,6,6,6,12,12,13,13];
var disconnect_data = ["Disconnected",8,8,8,11,12,12,11,11,11,12,12,12,12,12,13,13,12,11,10,10,10,10,11,11,11,1,1,1,1];
for (var i = 1; i < x_data.length; i++) {
x_data[i] = x_data[i] + '1930';
}
c3.generate({
data: {
x: 'x',
x_format: '%b%d%Y',
columns: [
x_data,
connect_data,
disconnect_data
],
type: 'area',
groups: [
["Connected","Disconnected"]
]
},
axis: {
// rotated: true,
x: {
type: 'timeseries',
tick: {
count: 29,
fit: false,
format: function (x) { var parts = x.toString().split(' '); return parts[1]+parts[2]; }
},
padding: { left: 0, right: 0}
},
y: {
ticks: 10,
padding: { bottom: 0 },
max: 17,
min: 1
}
},
legend: {
show: false
},
color: {
pattern: ['#F6C600','#00253C'],
// opacity: 0.3
},
zoom: {
// enabled: true
}
});
*/
/*
var chart = c3.generate({
bindto:"#chart",
data: {
// x: "x",
columns: [
// ["x", "A", "B", "C"],
['data1', 130, 120, 150],
['data4', 30, 20, 50]
],
// type: 'bar'
},
axis: {
x: {
// type: 'categorized'
}
},
zoom: {
enabled: true
}
});
*/
/*
setTimeout(function () {
chart.load({
columns: [
["x", "A", "B", "C", "D", "E", "F", "G", "H"],
['data1', 130, 120, 150, 140, 160, 150, 200, 300],
['data4', 30, 20, 50, 40, 60, 50, 100, 120]
]
});
}, 1000);
*/
/*
var chart = c3.generate({
size: { width: 300, height: 300 },
data: {
columns: [
],
type : 'donut',
},
donut: {
title: "Owner"
}
});
*/
/*
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'date',
x_format : '%d/%m/%Y',
columns: [
['date',"17/03/2014","07/04/2014","08/04/2014","14/04/2014","25/04/2014","26/04/2014","08/05/2014"],
["Dilma Roussef", 42, 41, 40, 39, 38, 37, 36],
["Aécio Neves", 15, 15, 15, 15, 16, 17, 18],
["Eduardo Campos", 7, 7, 8, 7, 9, 8, 9],
["Pastor Everaldo", 2, 2, 2, 2, 2, 2, 2],
["Outros", 1, 2, 2, 2, 3, 2, 3]
],
},
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
}
}
}
});
*/
Reference in New Issue View Git Blame Copy Permalink