| Server IP : 108.170.25.35 / Your IP : 18.227.111.18 Web Server : Apache/2 System : Linux gains.winzonesoftech.com 4.18.0-513.24.1.el8_9.x86_64 #1 SMP Mon Apr 8 11:23:13 EDT 2024 x86_64 User : studio ( 1434) PHP Version : 8.1.28 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/studio/domains/studio7eleven.com/public_html/admin/js/plugins-init/ |
Upload File : |
$(document).ready(function () {
$(function () {
var chart = c3.generate({
bindto: '#c3-chart',
data: {
columns: [
['data1', 100, 200, 150, 300, 200],
['data2', 400, 500, 250, 700, 300],
],
colors: {
data1: '#34C73B',
data2: '#00A2FF'
//data3: '#0000ff'
},
axes: {
data2: 'y2' // ADD
}
},
axis: {
y2: {
show: true // ADD
}
}
});
});
$(function () {
var chart = c3.generate({
bindto: '#c3-combination',
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: '#34C73B',
data2: '#00A2FF',
data3: '#0000FF'
},
types: {
data3: 'spline',
data4: 'line',
data6: 'area'
},
groups: [
['data1', 'data2']
]
}
});
});
$(function () {
var chart = c3.generate({
bindto: '#c3-area',
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
colors: {
data1: '#34C73B',
data3: '#00A2FF'
},
types: {
data1: 'area',
data2: 'area-spline'
}
}
});
});
$(function () {
var chart = c3.generate({
bindto: '#c3-rotated_axis',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
colors: {
data1: '#34C73B',
data3: '#0000FF',
},
types: {
data1: 'bar'
}
},
axis: {
rotated: true
}
});
});
$(function () {
var chart = c3.generate({
bindto: '#c3-spline',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
colors: {
data1: '#00A2FF',
data2: '#0000FF'
},
type: 'spline'
}
});
});
$(function () {
var chart = c3.generate({
bindto: '#c3-simple-xy-line',
data: {
x: 'x',
columns: [
['x', 30, 50, 100, 230, 300, 310],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 300, 200, 300, 250, 450]
],
colors: {
data1: '#00A2FF',
data2: '#0000FF',
data3: '#F44336'
}
}
});
setTimeout(function () {
chart.load({
columns: [
['data1', 100, 250, 150, 200, 100, 350]
]
});
}, 1000);
setTimeout(function () {
chart.load({
columns: [
['data3', 80, 150, 100, 180, 80, 150]
]
});
}, 1500);
setTimeout(function () {
chart.unload({
ids: 'data2'
});
}, 2000);
});
$(function () {
var chart = c3.generate({
bindto: '#c3-line-with-region',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
colors: {
data1: '#00A2FF',
data2: '#0000FF'
},
regions: {
'data1': [{ 'start': 1, 'end': 2, 'style': 'dashed' }, { 'start': 3 }], // currently 'dashed' style only
'data2': [{ 'end': 3 }]
}
}
});
});
$(function () {
var chart = c3.generate({
bindto: '#c3-step-chart',
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 100],
['data2', 130, 100, 140, 200, 150, 50]
],
colors: {
data1: '#0000FF',
data2: '#00A2FF'
},
types: {
data1: 'step',
data2: 'area-step'
}
}
});
});
$(function () {
var chart = c3.generate({
bindto: '#c3-stacked-area-chart',
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 120],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'area-spline',
data2: 'area-spline'
// 'line', 'spline', 'step', 'area', 'area-step' are also available to stack
},
colors: {
data1: '#00A2FF',
data2: '#0000FF'
},
groups: [['data1', 'data2']]
}
});
});
$(function () {
var chart = c3.generate({
bindto: '#c3-bar-chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
colors: {
data1: '#34C73B',
data2: '#00A2FF',
data3: '#0000FF'
},
type: 'bar'
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
// or
//width: 100 // this makes bar width 100px
}
});
setTimeout(function () {
chart.load({
columns: [
['data3', 130, -150, 200, 300, -200, 100]
]
});
}, 1000);
});
$(function () {
var chart = c3.generate({
bindto: '#c3-stacked-bar-chart',
data: {
columns: [
['data1', -30, 200, 200, 400, -150, 250],
['data2', 130, 100, -100, 200, -150, 50],
['data3', -230, 200, 200, -300, 250, 250]
],
colors: {
data1: '#34C73B',
data2: '#00A2FF',
data3: '#0000FF',
data4: '#F44336'
},
type: 'bar',
groups: [
['data1', 'data2']
]
},
grid: {
y: {
lines: [{ value: 0 }]
}
}
});
setTimeout(function () {
chart.groups([['data1', 'data2', 'data3']])
}, 1000);
setTimeout(function () {
chart.load({
columns: [['data4', 100, -50, 150, 200, -300, -100]]
});
}, 1500);
setTimeout(function () {
chart.groups([['data1', 'data2', 'data3', 'data4']])
}, 2000);
});
$(function () {
var chart = c3.generate({
bindto: '#c3-scatter-plot',
data: {
xs: {
setosa: 'setosa_x',
versicolor: 'versicolor_x'
},
// iris data from R
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],
["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],
],
colors: {
setosa: '#F44336',
versicolor: '#34C73B',
versicolor_x: '#00A2FF',
setosa_x: '#0000FF'
},
type: 'scatter'
},
axis: {
x: {
label: 'Sepal.Width',
tick: {
fit: false
}
},
y: {
label: 'Petal.Width'
}
}
});
setTimeout(function () {
chart.load({
xs: {
virginica: 'virginica_x'
},
columns: [
["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],
["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],
]
});
}, 1000);
setTimeout(function () {
chart.unload({
ids: 'setosa'
});
}, 2000);
setTimeout(function () {
chart.load({
columns: [
["virginica", 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],
]
});
}, 3000);
});
$(function () {
var chart = c3.generate({
bindto: '#c3-pie-chart',
data: {
// iris data from R
columns: [
['data1', 30],
['data2', 120],
],
type: 'pie',
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); }
}
});
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],
],
colors: {
setosa: '#F44336',
versicolor: '#34C73B',
virginica: '#00A2FF'
}
});
}, 1500);
setTimeout(function () {
chart.unload({
ids: 'data1'
});
chart.unload({
ids: 'data2'
});
}, 2500);
});
$(function () {
var chart = c3.generate({
bindto: '#c3-donut-chart',
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: "Donut title"
}
});
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],
],
colors: {
setosa: '#F44336',
versicolor: '#34C73B',
virginica: '#00A2FF'
}
});
}, 1500);
setTimeout(function () {
chart.unload({
ids: 'data1'
});
chart.unload({
ids: 'data2'
});
}, 2500);
});
$(function () {
var chart = c3.generate({
bindto: '#c3-gauge-chart',
data: {
columns: [
['data', 91.4]
],
type: 'gauge',
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); }
},
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: ['#F44336', '#00A2FF', '#0000FF', '#34C73B'], // the three color levels for the percentage values.
threshold: {
unit: 'value', // percentage is default
max: 200, // 100 is default
values: [30, 60, 90, 100]
}
},
size: {
height: 180
}
});
setTimeout(function () {
chart.load({
columns: [['data', 10]]
});
}, 1000);
setTimeout(function () {
chart.load({
columns: [['data', 50]]
});
}, 2000);
setTimeout(function () {
chart.load({
columns: [['data', 70]]
});
}, 3000);
setTimeout(function () {
chart.load({
columns: [['data', 0]]
});
}, 4000);
setTimeout(function () {
chart.load({
columns: [['data', 100]]
});
}, 5000);
});
$(function () {
var chart = c3.generate({
bindto: '#c3-category-axis',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
],
colors: {
data1: '#34C73B'
}
},
axis: {
x: {
type: 'category',
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6', 'cat7', 'cat8', 'cat9']
}
}
});
});
$(function () {
var chart = c3.generate({
bindto: '#c3-additional-y-axis',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
colors: {
data1: '#34C73B',
data2: '#00A2FF'
},
axes: {
data1: 'y',
data2: 'y2'
}
},
axis: {
y2: {
show: true
}
}
});
});
$(function () {
var chart = c3.generate({
bindto: '#c3-tick-format',
data: {
x: 'x',
columns: [
['x', '2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01'],
['sample', 30, 200, 100, 400, 150, 250]
],
colors: {
sample: '#34C73B'
}
},
axis: {
x: {
type: 'timeseries',
tick: {
format: function (x) { return x.getFullYear(); }
//format: '%Y' // format string is also available for timeseries data
}
}
}
});
});
$(function () {
var chart = c3.generate({
bindto: '#c3-tick-count',
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', '2013-01-11', '2013-01-12'],
['sample', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250]
],
colors: {
sample: '#34C73B'
}
},
axis: {
x: {
type: 'timeseries',
tick: {
count: 4,
format: '%Y-%m-%d'
}
}
}
});
});
$(function () {
var chart = c3.generate({
bindto: '#c3-tick-values',
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', '2013-01-11', '2013-01-12'],
['sample', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250]
],
colors: {
sample: '#00A2FF'
}
},
axis: {
x: {
type: 'timeseries',
tick: {
// this also works for non timeseries data
values: ['2013-01-05', '2013-01-10']
}
}
}
});
});
$(function () {
var chart = c3.generate({
bindto: '#c3-tick-culling',
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250]
],
colors: {
sample: '#34C73B'
}
},
axis: {
x: {
type: 'category',
tick: {
culling: {
max: 4 // the number of tick texts will be adjusted to less than this value
}
// for normal axis, default on
// for category axis, default off
}
}
}
});
});
$(function () {
var chart = c3.generate({
bindto: '#c3-tick-fitting',
data: {
x: 'x',
columns: [
['x', '2013-10-31', '2013-12-31', '2014-01-31', '2014-02-28'],
['sample', 30, 100, 400, 150],
],
colors: {
sample: '#00A2FF'
}
},
axis: {
x: {
type: 'timeseries',
tick: {
fit: true,
format: "%e %b %y"
}
}
}
});
});
$(function () {
var chart = c3.generate({
bindto: '#c3-tick-timezone',
data: {
x: 'x',
xFormat: '%Y',
columns: [
// ['x', '2012-12-31', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05'],
['x', '2010', '2011', '2012', '2013', '2014', '2015'],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 340, 200, 500, 250, 350]
],
colors: {
data1: '#00A2FF',
data2: '#34C73B'
}
},
axis: {
x: {
type: 'timeseries',
// if true, treat x value as localtime (Default)
// if false, convert to UTC internally
localtime: false,
tick: {
format: '%Y-%m-%d %H:%M:%S'
}
}
}
});
});
$(function () {
var chart = c3.generate({
bindto: '#c3-tick-text',
data: {
x: 'x',
columns: [
['x', 'www.somesitename1.com', 'www.somesitename2.com', 'www.somesitename3.com', 'www.somesitename4.com', 'www.somesitename5.com', 'www.somesitename6.com', 'www.somesitename7.com', 'www.somesitename8.com', 'www.somesitename9.com', 'www.somesitename10.com', 'www.somesitename11.com', 'www.somesitename12.com'],
['pv', 90, 100, 140, 200, 100, 400, 90, 100, 140, 200, 100, 400],
],
colors: {
pv: '#00A2FF'
},
type: 'bar'
},
axis: {
x: {
type: 'category',
tick: {
rotate: 75,
multiline: false
},
height: 130
}
}
});
});
$(function () {
var chart = c3.generate({
bindto: '#c3-y-axis-tick-timezone',
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 2500]
],
colors: {
sample: '#00A2FF'
},
},
axis: {
y: {
tick: {
format: d3.format("$,")
// format: function (d) { return "$" + d; }
}
}
}
});
});
$(function () {
var chart = c3.generate({
bindto: '#c3-padding-y-axis',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
axes: {
data1: 'y',
data2: 'y2'
},
colors: {
'data1': '#34C73B',
'data2': '#00A2FF'
},
},
axis: {
y: {
padding: {top: 200, bottom: 0}
},
y2: {
padding: {top: 100, bottom: 100},
show: true
}
}
});
});
$(function () {
var chart = c3.generate({
bindto: '#c3-range-y-axis',
data: {
columns: [
['sample', 30, 200, 400, -400, 150, 250]
],
colors: {
'sample': '#00A2FF'
}
},
axis: {
y: {
max: 400,
min: -400,
// Range includes padding, set 0 if no padding needed
// padding: {top:0, bottom:0}
}
}
});
});
$(function () {
var chart = c3.generate({
bindto: '#c3-axis-label',
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250],
['sample2', 130, 300, 200, 500, 250, 350]
],
axes: {
sample2: 'y2'
},
colors: {
'sample': '#34C73B',
'sample2': '#00A2FF'
}
},
axis: {
x: {
label: 'X Label'
},
y: {
label: 'Y Label'
},
y2: {
show: true,
label: 'Y2 Label'
}
}
});
});
$(function () {
var chart = c3.generate({
bindto: '#c3-axis-label-position',
data: {
columns: [
['sample1', 30, 200, 100, 400, 150, 250],
['sample2', 430, 300, 500, 400, 650, 250]
],
colors: {
'sample1': '#34C73B',
'sample2': '#00A2FF'
},
axes: {
sample1: 'y',
sample2: 'y2'
}
},
axis: {
x: {
label: {
text: 'X Label',
position: 'outer-center'
// inner-right : default
// inner-center
// inner-left
// outer-right
// outer-center
// outer-left
}
},
y: {
label: {
text: 'Y Label',
position: 'outer-middle'
// inner-top : default
// inner-middle
// inner-bottom
// outer-top
// outer-middle
// outer-bottom
}
},
y2: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-middle'
}
}
}
});
});
});