Primer Commit
This commit is contained in:
21
dist/js/pages/c3-chart/bar-pie/c3-bar.js
vendored
Normal file
21
dist/js/pages/c3-chart/bar-pie/c3-bar.js
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
/*************************************************************************************/
|
||||
// -->Template Name: Bootstrap Press Admin
|
||||
// -->Author: Themedesigner
|
||||
// -->Email: niravjoshi87@gmail.com
|
||||
// -->File: c3_chart_JS
|
||||
/*************************************************************************************/
|
||||
$(function() {
|
||||
var t = c3.generate({
|
||||
bindto: "#bar-chart",
|
||||
size: { height: 400 },
|
||||
color: { pattern: ["#4fc3f7"] },
|
||||
data: {
|
||||
columns: [
|
||||
["option1", 350, 80, 250, 400, 190, 250]
|
||||
],
|
||||
type: "bar"
|
||||
},
|
||||
axis: { rotated: !0 },
|
||||
grid: { y: { show: !0 } }
|
||||
});
|
||||
});
|
||||
51
dist/js/pages/c3-chart/bar-pie/c3-column.js
vendored
Normal file
51
dist/js/pages/c3-chart/bar-pie/c3-column.js
vendored
Normal file
@@ -0,0 +1,51 @@
|
||||
/*************************************************************************************/
|
||||
// -->Template Name: Bootstrap Press Admin
|
||||
// -->Author: Themedesigner
|
||||
// -->Email: niravjoshi87@gmail.com
|
||||
// -->File: c3_chart_JS
|
||||
/*************************************************************************************/
|
||||
/*************************************/
|
||||
// Column chart //
|
||||
/*************************************/
|
||||
$(function() {
|
||||
|
||||
// Callback that creates and populates a data table, instantiates the column chart, passes in the data and draws it.
|
||||
var columnChart = c3.generate({
|
||||
bindto: '#column-chart',
|
||||
size: { height: 400 },
|
||||
color: {
|
||||
pattern: ['#2962FF', '#343a40', '#4fc3f7']
|
||||
},
|
||||
|
||||
|
||||
// Create the data table.
|
||||
data: {
|
||||
columns: [
|
||||
['option1', 130, -90, 170, 90, 120, 250],
|
||||
['option2', 90, 150, 140, -150, 150, 50]
|
||||
],
|
||||
type: 'bar'
|
||||
},
|
||||
bar: {
|
||||
width: {
|
||||
ratio: 0.5 // this makes bar width 50% of length between ticks
|
||||
}
|
||||
// or
|
||||
//width: 100 // this makes bar width 100px
|
||||
},
|
||||
grid: {
|
||||
y: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Instantiate and draw our chart, passing in some options.
|
||||
setTimeout(function() {
|
||||
columnChart.load({
|
||||
columns: [
|
||||
['option3', 50, -45, 200, 300, -95, 100]
|
||||
]
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
33
dist/js/pages/c3-chart/bar-pie/c3-donut.js
vendored
Normal file
33
dist/js/pages/c3-chart/bar-pie/c3-donut.js
vendored
Normal file
@@ -0,0 +1,33 @@
|
||||
/*************************************************************************************/
|
||||
// -->Template Name: Bootstrap Press Admin
|
||||
// -->Author: Themedesigner
|
||||
// -->Email: niravjoshi87 @gmail.com
|
||||
// -->File: c3_chart_JS
|
||||
/*************************************************************************************/
|
||||
$(function() {
|
||||
var o = c3.generate({
|
||||
bindto: "#donut-chart",
|
||||
color: { pattern: ["#2962FF", "#4fc3f7", "#f62d51"] },
|
||||
data: {
|
||||
columns: [
|
||||
["option1", 30],
|
||||
["option2", 120]
|
||||
],
|
||||
type: "donut",
|
||||
onclick: function(o, n) { console.log("onclick", o, n) },
|
||||
onmouseover: function(o, n) { console.log("onmouseover", o, n) },
|
||||
onmouseout: function(o, n) { console.log("onmouseout", o, n) }
|
||||
},
|
||||
donut: { title: "Total Sale" }
|
||||
});
|
||||
setTimeout(function() {
|
||||
o.load({
|
||||
columns: [
|
||||
["iphone", .2, .2, .2, .2, .2, .4, .3, .2, .2, .1, .2, .2, .1, .1, .2, .4, .4, .3, .3, .3, .2, .4, .2, .5, .2, .2, .4, .2, .2, .2, .2, .4, .1, .2, .2, .2, .2, .1, .2, .2, .3, .3, .2, .6, .4, .3, .2, .2, .2, .2],
|
||||
["windows", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1, 1.3, 1.4, 1, 1.5, 1, 1.4, 1.3, 1.4, 1.5, 1, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1, 1.1, 1, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
|
||||
["android", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2, 1.9, 2.1, 2, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2, 2, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2, 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, 2.3, 1.8]
|
||||
]
|
||||
})
|
||||
}, 1500),
|
||||
setTimeout(function() { o.unload({ ids: "option1" }), o.unload({ ids: "option2" }) }, 2500)
|
||||
});
|
||||
31
dist/js/pages/c3-chart/bar-pie/c3-pie.js
vendored
Normal file
31
dist/js/pages/c3-chart/bar-pie/c3-pie.js
vendored
Normal file
@@ -0,0 +1,31 @@
|
||||
/*************************************************************************************/
|
||||
// -->Template Name: Bootstrap Press Admin
|
||||
// -->Author: Themedesigner
|
||||
// -->Email: niravjoshi87@gmail.com
|
||||
// -->File: c3_chart_JS
|
||||
/*************************************************************************************/
|
||||
$(function() {
|
||||
var o = c3.generate({
|
||||
bindto: "#pie-chart",
|
||||
color: { pattern: ["#2962FF", "#4fc3f7", "#a1aab2"] },
|
||||
data: {
|
||||
columns: [
|
||||
["option1", 50],
|
||||
["option2", 100]
|
||||
],
|
||||
type: "pie",
|
||||
onclick: function(o, n) { console.log("onclick", o, n) },
|
||||
onmouseover: function(o, n) { console.log("onmouseover", o, n) },
|
||||
onmouseout: function(o, n) { console.log("onmouseout", o, n) }
|
||||
}
|
||||
});
|
||||
setTimeout(function() {
|
||||
o.load({
|
||||
columns: [
|
||||
["iphone", .2, .2, .2, .2, .2, .4, .3, .2, .2, .1, .2, .2, .1, .1, .2, .4, .4, .3, .3, .3, .2, .4, .2, .5, .2, .2, .4, .2, .2, .2, .2, .4, .1, .2, .2, .2, .2, .1, .2, .2, .3, .3, .2, .6, .4, .3, .2, .2, .2, .2],
|
||||
["windows", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1, 1.3, 1.4, 1, 1.5, 1, 1.4, 1.3, 1.4, 1.5, 1, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1, 1.1, 1, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
|
||||
["android", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2, 1.9, 2.1, 2, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2, 2, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2, 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, 2.3, 1.8]
|
||||
]
|
||||
})
|
||||
}, 1500), setTimeout(function() { o.unload({ ids: "option1" }), o.unload({ ids: "option2" }) }, 2500)
|
||||
});
|
||||
41
dist/js/pages/c3-chart/bar-pie/c3-stacked-bar.js
vendored
Normal file
41
dist/js/pages/c3-chart/bar-pie/c3-stacked-bar.js
vendored
Normal file
@@ -0,0 +1,41 @@
|
||||
/*************************************************************************************/
|
||||
// -->Template Name: Bootstrap Press Admin
|
||||
// -->Author: Themedesigner
|
||||
// -->Email: niravjoshi87@gmail.com
|
||||
// -->File: c3_chart_JS
|
||||
/*************************************************************************************/
|
||||
$(function() {
|
||||
var a = c3.generate({
|
||||
bindto: "#stacked-bar",
|
||||
size: { height: 400 },
|
||||
color: { pattern: ["#2962FF", "#4fc3f7", "#f62d51", "#343a40"] },
|
||||
data: {
|
||||
columns: [
|
||||
["option1", -150, 150, 100, 350, -150, 200],
|
||||
["option2", 190, 250, -180, 100, -250, 150],
|
||||
["option3", 200, 180, 250, -350, 150, 120]
|
||||
],
|
||||
type: "bar",
|
||||
groups: [
|
||||
["option1", "option2"]
|
||||
]
|
||||
},
|
||||
grid: { y: { show: !0 } },
|
||||
axis: { rotated: !0 }
|
||||
});
|
||||
setTimeout(function() {
|
||||
a.groups([
|
||||
["option1", "option2", "option3"]
|
||||
])
|
||||
}, 1e3), setTimeout(function() {
|
||||
a.load({
|
||||
columns: [
|
||||
["option4", 150, -20, 250, 270, -190, -250]
|
||||
]
|
||||
})
|
||||
}, 1500), setTimeout(function() {
|
||||
a.groups([
|
||||
["option1", "option2", "option3", "option4"]
|
||||
])
|
||||
}, 2e3)
|
||||
});
|
||||
58
dist/js/pages/c3-chart/bar-pie/c3-stacked-column.js
vendored
Normal file
58
dist/js/pages/c3-chart/bar-pie/c3-stacked-column.js
vendored
Normal file
@@ -0,0 +1,58 @@
|
||||
/**********************************/
|
||||
// Stacked Column Chart //
|
||||
/**********************************/
|
||||
$(window).on("load", function() {
|
||||
|
||||
// Callback that creates and populates a data table, instantiates the stacked column chart, passes in the data and draws it.
|
||||
var stackedColumnChart = c3.generate({
|
||||
bindto: '#stacked-column',
|
||||
size: { height: 400 },
|
||||
color: {
|
||||
pattern: ['#2962FF', '#ced4da', '#4fc3f7', '#f62d51']
|
||||
},
|
||||
|
||||
// Create the data table.
|
||||
data: {
|
||||
columns: [
|
||||
['option1', -130, 200, 200, 400, 400, 250],
|
||||
['option2', 100, 50, -100, 200, -150, 150],
|
||||
['option3', -85, 200, 200, -300, 250, 250]
|
||||
],
|
||||
type: 'bar',
|
||||
groups: [
|
||||
['option1', 'option2']
|
||||
]
|
||||
},
|
||||
grid: {
|
||||
y: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// Instantiate and draw our chart, passing in some options.
|
||||
setTimeout(function() {
|
||||
stackedColumnChart.groups([
|
||||
['option1', 'option2', 'option3']
|
||||
]);
|
||||
}, 1000);
|
||||
|
||||
setTimeout(function() {
|
||||
stackedColumnChart.load({
|
||||
columns: [
|
||||
['option4', 50, -150, 150, 200, -300, -100]
|
||||
]
|
||||
});
|
||||
}, 1500);
|
||||
|
||||
setTimeout(function() {
|
||||
stackedColumnChart.groups([
|
||||
['option1', 'option2', 'option3', 'option4']
|
||||
]);
|
||||
}, 2000);
|
||||
|
||||
// Resize chart on sidebar width change
|
||||
$(".sidebartoggler").on('click', function() {
|
||||
stackedColumnChart.resize();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user