You can download a minimized version of the library or get the full source code at github.com.
Download source$ npm install coreui-chartДля корректной работы на странице необходимо наличие: Bootstrap 5, jquery
<div id="chart-line"></div>
<script>
let lineOptions = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
type: "line",
name: "Dubai",
data: [20.2, 21.6, 24.4, 27.9, 31.8, 34.6, 35.8, 35.8, 33.7, 30.7, 26.2, 22.5],
style: {
color: '#98c18a',
width: 1, // 0 - 10
dash: 0, // 0 - 10
markerSize: 3, // 0 - 10
fill: 60, // 0 - 100
theme: 'smooth', // straight, smooth, stepline
gradient: true,
labels: false
}
},
{
type: "line",
name: "London",
data: [5.1, 5.5, 6.6, 8.7, 11.5, 14.4, 16.6, 16, 13.7, 11.2, 8.2, 6.2],
style: {
width: 0,
labels: true,
labelColor: '#ffb56a',
theme: 'straight'
}
},
{
type: "line",
name: "Murmansk",
data: [-11.2, -8, -4.2, 0.3, 5.6, 10.1, 14.7, 12.2, 7.6, 1.6, -2.9, -7.2],
style: {
width: 3,
dash: 5,
markerSize: 3,
fill: 0,
theme: 'stepline'
}
},
],
options: {
width: '100%',
height: 400,
title: {
text: "Temperature",
align: 'left', // left, right, center
fontSize : '14px',
fontWeight: 'bold',
fontFamily: '"Segoe UI",Roboto,"Helvetica Neue"',
color : '#333',
description: {
text: '2010 year',
align: 'left', // left, right, center
fontSize: '12px',
fontWeight: 'normal',
fontFamily: undefined,
color: '#666'
}
},
style: {
width: 1, // 0 - 10
dash: 0, // 0 - 100
stacked: false, // false, true, '100%'
markerSize: 1, // 0 - 10
markerType: 'circle', // circle, square
fill: 40, // 0 - 100
gradient: false,
theme: 'straight' // straight, smooth, stepline
}
}
};
let chartLine = CoreUI.chart.create(lineOptions);
chartLine.render('chart-line');
</script>
<div id="chart-bar"></div>
<script>
let barOptions = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
datasets: [
{
type: "bar",
name: "Net Profit",
data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
style: {
color: '#74c45c',
labelColor: '#79b267',
width: 1, // 0 - 10
dash: 0, // 0 - 10
fill: 50, // 0 - 100
labels: true
}
},
{
type: "bar",
name: "Revenue",
data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
style: {
width: 0
}
},
{
type: "bar",
name: "Free Cash Flow",
data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
style: {
width: 2,
dash: 5,
fill: 0,
}
},
],
options: {
width: '100%',
height: 300,
style: {
width: 1, // 0 - 10
dash: 6, // 0 - 100
stacked: false, // false, true, '100%'
borderRadius: 2, // 0 - 10
fill: 70, // 0 - 100
theme: 'straight' // straight, smooth, stepline
}
}
};
let chartBar = CoreUI.chart.create(barOptions);
chartBar.render('chart-bar');
</script>
<div id="chart-points"></div>
<script>
let pointsOptions = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
type: "points",
name: "Dubai",
data: [20.2, 21.6, 24.4, 27.9, 31.8, 34.6, 35.8, 35.8, 33.7, 30.7, 26.2, 22.5],
style: {
color: '#98c18a',
markerSize: 3, // 0 - 10
fill: 100, // 0 - 100
theme: 'smooth', // straight, smooth, stepline
labels: false
}
},
{
type: "points",
name: "London",
data: [5.1, 5.5, 6.6, 8.7, 11.5, 14.4, 16.6, 16, 13.7, 11.2, 8.2, 6.2],
style: {
labels: true,
labelColor: '#ffb56a',
}
},
{
type: "points",
name: "Murmansk",
data: [-11.2, -8, -4.2, 0.3, 5.6, 10.1, 14.7, 12.2, 7.6, 1.6, -2.9, -7.2],
},
],
options: {
width: '100%',
height: 400,
style: {
markerSize: 3, // 0 - 10
markerType: 'circle', // circle, square
fill: 100, // 0 - 100
}
}
};
let chartPoints = CoreUI.chart.create(pointsOptions);
chartPoints.render('chart-points');
</script>
<div id="chart-bar-horizontal"></div>
<script>
let barHorizontalOptions = {
labels: [
'South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan'
],
datasets: [
{
type: "bar",
name: "PRODUCT A",
data: [44, 55, 41, 37, 22, 43, 21],
style: {
color: '#98c18a',
labelColor: '#fff',
labels: true,
width: 1, // 0 - 10
dash: 0, // 0 - 10
fill: 50, // 0 - 100
}
},
{
type: "bar",
name: "PRODUCT B",
data: [53, 32, 33, 52, 13, 43, 32],
},
],
options: {
type: 'hBar',
width: '100%',
height: 500,
style: {
width: 1, // 0 - 10
dash: 0, // 0 - 100
borderRadius: 0, // 0 - 10
fill: 70, // 0 - 100
size: 70, // 0 - 100
stacked: false, // false, true, '100%'
isFunnel: false,
}
}
};
let chartBarHorizontal = CoreUI.chart.create(barHorizontalOptions);
chartBarHorizontal.render('chart-bar-horizontal');
</script>
<div id="chart-range-area"></div>
<script>
let rangeAreaOptions = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
type: "rangeArea",
name: "Team A Range",
data: [
[3100, 3400], [4200, 5200], [3900, 4900], [3400, 3900],
[5100, 5900], [5400, 6700], [4300, 4600], [2100, 2900]
],
style: {
color: null,
labelColor: null,
labels: false,
width: 0, // 0 - 10
dash: 0, // 0 - 10
markerSize: 0, // 0 - 10
fill: 40, // 0 - 100
theme: 'smooth' // straight, smooth, stepline
}
},
{
type: 'rangeArea',
name: 'Team B Range',
data: [
[1100, 1900], [1200, 1800], [900, 2900], [1400, 2700],
[2600, 3900], [500, 1700], [1900, 2300], [1000, 1500],
]
},
{
type: 'line',
name: 'Team A Median',
data: [ 3300, 4900, 4300, 3700, 5500, 5900, 4500, 2400, 2100, 1500 ],
style: {
dash: 4
}
}
],
options: {
type: 'rangeArea',
width: '100%',
height: 350,
style: {
labels: false,
width: 1, // 0 - 10
dash: 0, // 0 - 10
markerSize: 0, // 0 - 10
fill: 40, // 0 - 100
theme: 'straight', // straight, smooth, stepline
markerType: 'circle' // circle, square
}
}
};
let chartRangeArea = CoreUI.chart.create(rangeAreaOptions);
chartRangeArea.render('chart-range-area');
</script>
<div id="chart-range-bars"></div>
<script>
let rangeBarsOptions = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
datasets: [
{
type: "bar",
name: "Team A Range",
data: [
[200, 3400], [1500, 4500], [2900, 4900], [2400, 4000],
[1800, 5900], [4700, 6700], [3000, 4600], [1500, 2900]
],
style: {
color: null,
labelColor: null,
labels: false,
width: 0, // 0 - 10
dash: 0, // 0 - 10
fill: 40, // 0 - 100
}
},
{
type: 'bar',
name: 'Team B Range',
data: [
[800, 1900], [1000, 2700], [900, 2900], [1400, 3000],
[2600, 4600], [2300, 4100], [1900, 2300], [1000, 1500],
]
}
],
options: {
type: 'rangeBar',
width: '100%',
height: 350,
style: {
labels: true,
horizontal: false,
width: 1, // 0 - 10
dash: 0, // 0 - 10
fill: 40, // 0 - 100
borderRadius: 3, // 0 - 100
size: 70, // 0 - 100
}
}
};
let chartRangeBars = CoreUI.chart.create(rangeBarsOptions);
chartRangeBars.render('chart-range-bars');
</script>
<div id="chart-candlestick"></div>
<script>
let candlestickOptions = {
datasets: [
{
type: "candlestick",
name: "Candlestick",
data: [
[1538778600000, [6629.81, 6650.5, 6623.04, 6633.33] ],
[1538780400000, [6632.01, 6643.59, 6620, 6630.11] ],
[1538782200000, [6630.71, 6648.95, 6623.34, 6635.65] ],
[1538784000000, [6635.65, 6651, 6629.67, 6638.24] ],
[1538785800000, [6638.24, 6640, 6620, 6624.47] ],
[1538787600000, [6624.53, 6636.03, 6621.68, 6624.31] ],
[1538789400000, [6624.61, 6632.2, 6617, 6626.02] ],
[1538791200000, [6627, 6627.62, 6584.22, 6603.02] ],
[1538793000000, [6605, 6608.03, 6598.95, 6604.01] ],
[1538794800000, [6604.5, 6614.4, 6602.26, 6608.02] ],
[1538796600000, [6608.02, 6610.68, 6601.99, 6608.91] ],
[1538798400000, [6608.91, 6618.99, 6608.01, 6612] ],
[1538800200000, [6612, 6615.13, 6605.09, 6612] ],
[1538802000000, [6612, 6624.12, 6608.43, 6622.95] ],
[1538803800000, [6623.91, 6623.91, 6615, 6615.67] ],
[1538805600000, [6618.69, 6618.74, 6610, 6610.4] ],
[1538807400000, [6611, 6622.78, 6610.4, 6614.9] ],
[1538809200000, [6614.9, 6626.2, 6613.33, 6623.45] ],
[1538811000000, [6623.48, 6627, 6618.38, 6620.35] ],
[1538812800000, [6619.43, 6620.35, 6610.05, 6615.53] ],
[1538814600000, [6615.53, 6617.93, 6610, 6615.19] ],
[1538816400000, [6615.19, 6621.6, 6608.2, 6620] ],
[1538818200000, [6619.54, 6625.17, 6614.15, 6620] ]
],
style: {
labels: false,
labelColor: '#777',
width: 1,
dash: 0,
fill: 60,
}
}
],
options: {
type: 'candlestick',
width: '100%',
height: 300,
axis: {
xaxis: {
type: 'datetime',
}
},
style: {
colorUpward: '#00B746',
colorDownward: '#EF403C',
width: 1,
dash: 0,
fill: 50,
}
}
};
let chartCandlestick = CoreUI.chart.create(candlestickOptions);
chartCandlestick.render('chart-candlestick');
</script>
<div id="chart-box"></div>
<script>
let boxOptions = {
labels: [ 'Jan 2015', 'Jan 2016', 'Jan 2017', 'Jan 2018', 'Jan 2019', 'Jan 2020', 'Jan 2021' ],
datasets: [
{
type: "box",
name: "Box",
data: [
[54, 66, 69, 75, 88],
[43, 65, 69, 76, 81],
[31, 39, 45, 51, 59],
[39, 46, 55, 65, 71],
[29, 31, 35, 39, 44],
[41, 49, 58, 61, 67],
[54, 59, 66, 71, 88]
],
style: {
labels: false,
labelColor: '#777',
width: 1, // 0 - 10
dash: 0, // 0 - 100
fill: 30, // 0 - 100
}
}
],
options: {
type: 'box',
width: '100%',
height: 300,
style: {
colorUpper: '#5C4742',
colorLower: '#A5978B',
horizontal: false,
labels: false,
size: 50, // 0 - 100
width: 1, // 0 - 10
dash: 0, // 0 - 100
fill: 50, // 0 - 100
}
}
};
let chartBox = CoreUI.chart.create(boxOptions);
chartBox.render('chart-box');
</script>
<div id="chart-pie"></div>
<script>
let pieOptions = {
labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
datasets: [
{
type: "pie",
name: "Pie",
data: [25, 15, 44, 55, 41, 17]
}
],
options: {
type: 'pie',
width: 400,
height: 300,
legend: {
position: 'right'
},
style: {
labels: true,
labelColor: '#ffffff',
startAngle: 0, // -360 - 360
endAngle: 360, // -360 - 360
size: 50, // 0 - 100
fill: 100, // 0 - 100
}
}
};
let chartPie = CoreUI.chart.create(pieOptions);
chartPie.render('chart-pie');
</script>
<div id="chart-donut"></div>
<script>
let donutOptions = {
labels: ["Comedy", "Action", "SciFi", "Drama", "Horror"],
datasets: [
{
type: "donut",
name: "Donut",
data: [44, 55, 41, 17, 15]
}
],
options: {
type: 'pie',
width: 400,
height: 300,
legend: {
position: 'right'
},
style: {
labels: true,
labelColor: '#ffffff',
startAngle: 0, // -360 - 360
endAngle: 360, // -360 - 360
size: 60, // 0 - 100
fill: 100, // 0 - 100
total: {
label: 'Всего',
color: '#333',
formatter: function (data) {
return data.reduce(function (a, b) { return a + b; });
},
}
}
}
};
let chartDonut = CoreUI.chart.create(donutOptions);
chartDonut.render('chart-donut');
</script>
<div id="chart-radial-bar"></div>
<script>
let radialBarOptions = {
labels: ['Vimeo', 'Messenger', 'Facebook', 'LinkedIn'],
datasets: [
{
type: "radialBar",
name: "Radial Bar",
data: [44, 55, 67, 83]
}
],
options: {
type: 'pie',
width: 400,
height: 300,
legend: {
position: 'right'
},
style: {
labels: true,
labelColor: '#ffffff',
startAngle: -120, // -360 - 360
endAngle: 120, // -360 - 360
size: 45, // 0 - 100
fill: 100, // 0 - 100
trackBackground: '#f2f2f2',
shadowOpacity: 0,
total: {
label: 'Всего',
labelSize: '14px',
valueSize: '18px',
color: '#333',
offsetY: 0,
formatter: function (data) {
return data.reduce(function (a, b) { return a + b; });
},
}
}
}
};
let chartRadialBar = CoreUI.chart.create(radialBarOptions);
chartRadialBar.render('chart-radial-bar');
</script>
<div id="chart-radar"></div>
<script>
let radarOptions = {
labels: ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'],
datasets: [
{
type: "radar",
name: "Radial Bar 1",
data: [4.3, 5.1, 1.0, 1.1, 2.0, 4.6, 6.2, 8.3],
style: {
color: null,
labels: false,
labelColor: '#ffabab',
fill: 40, // 0 - 100
dash: 3, // 0 - 10
markerSize: 5, // 0 - 10
}
},
{
type: "radar",
name: "Radial Bar 2",
data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3]
}
],
options: {
type: 'radar',
width: 400,
height: 300,
legend: {
position: 'top',
horizontalAlign: 'center',
},
style: {
labels: false,
fill: 25, // 0 - 100
dash: 0, // 0 - 10
markerSize: 3, // 0 - 10
}
}
};
let chartRadar = CoreUI.chart.create(radarOptions);
chartRadar.render('chart-radar');
</script>
<div id="chart-polar-area"></div>
<script>
let polarAreaOptions = {
datasets: [
{
type: "polarArea",
name: "Radial Bar 1",
data: [14, 23, 21, 17, 15, 10, 12, 17, 21]
}
],
options: {
type: 'polarArea',
width: 400,
height: 300,
legend: {
position: 'left'
},
style: {
labels: false,
labelColor: '#c981c9',
fill: 70, // 0 - 100
}
}
};
let chartPolarArea = CoreUI.chart.create(polarAreaOptions);
chartPolarArea.render('chart-polar-area');
</script>
<div id="chart-mixed"></div>
<script>
let mixedOptions = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
type: "bar",
name: "Website Blog",
data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160],
style: {
fill: 40, // 0 - 10
}
},
{
type: "line",
name: "Social Media",
data: [230, 420, 350, 270, 430, 220, 170, 310, 220, 220, 120, 160],
style: {
width: 3, // 0 - 10
dash: 0, // 0 - 10
markerSize: 3, // 0 - 10
fill: 10, // 0 - 100
theme: 'smooth', // straight, smooth, stepline
labels: true,
labelColor: '#ffb56a',
}
},
{
type: "points",
name: "Video",
data: [300, 250, 360, 300, 450, 350, 640, 520, 590, 360, 390, 450],
style: {
markerSize: 6, // 0 - 10
}
},
],
options: {
type: 'line',
width: '100%',
height: 400,
enabled: {
legend: false
},
style: {
width: 1, // 0 - 10
dash: 0, // 0 - 100
stacked: false, // false, true, '100%'
markerSize: 1, // 0 - 10
markerType: 'circle', // circle, square
fill: 100, // 0 - 100
gradient: false,
theme: 'straight' // straight, smooth, stepline
}
}
};
let chartMixed = CoreUI.chart.create(mixedOptions);
chartMixed.render('chart-mixed');
</script>
<div id="chart-stacked"></div>
<script>
let stackedOptions = {
labels: [ '01/01/2011', '01/02/2011', '01/03/2011', '01/04/2011', '01/05/2011', '01/06/2011' ],
datasets: [
{ type: "bar", name: "PRODUCT A", data: [44, 55, 41, 67, 22, 43] },
{ type: "bar", name: "PRODUCT B", data: [13, 23, 20, 8, 13, 27] },
{ type: "bar", name: "PRODUCT C", data: [11, 17, 15, 15, 21, 14] },
{ type: "bar", name: "PRODUCT D", data: [21, 7, 25, 13, 22, 8] },
],
options: {
width: '100%',
height: 400,
legend: {
horizontalAlign: 'center'
},
style: {
stacked: true, // false, true, '100%'
labels: true, // false, true, '100%'
fill: 80, // 0 - 100
borderRadius: 4, // 0 - 10
labelColor: '#6e4cb6',
labelTotal: true
}
}
};
let chartStacked = CoreUI.chart.create(stackedOptions);
chartStacked.render('chart-stacked');
</script>
<div id="chart-stacked-100"></div>
<script>
let stacked100Options = {
labels: [ '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018' ],
datasets: [
{ type: "bar", name: "PRODUCT A", data: [44, 55, 41, 67, 22, 43, 21, 49] },
{ type: "bar", name: "PRODUCT B", data: [13, 23, 20, 8, 13, 27, 33, 12] },
{ type: "bar", name: "PRODUCT C", data: [11, 17, 15, 15, 21, 14, 15, 13] },
],
options: {
width: '100%',
height: 400,
legend: {
horizontalAlign: 'center'
},
style: {
stacked: '100%', // false, true, '100%'
fill: 80, // 0 - 100
labels: true,
labelColor: '#801b53'
}
}
};
let chartStacked100 = CoreUI.chart.create(stacked100Options);
chartStacked100.render('chart-stacked-100');
</script>
<div id="chart-annotations"></div>
<button class="btn btn-sm btn-secondary" id="btn-add-annotation">Add annotation</button>
<button class="btn btn-sm btn-secondary" id="btn-remove-annotation">Remove annotation</button>
<script>
let annotationsOptions = {
labels: [
'13 Nov 2017', '14 Nov 2017', '15 Nov 2017', '16 Nov 2017', '17 Nov 2017',
'20 Nov 2017', '21 Nov 2017', '22 Nov 2017', '23 Nov 2017', '24 Nov 2017',
'27 Nov 2017', '28 Nov 2017', '29 Nov 2017', '30 Nov 2017', '01 Dec 2017',
'04 Dec 2017', '05 Dec 2017', '06 Dec 2017', '07 Dec 2017', '08 Dec 2017'
],
datasets: [
{
type: "line",
name: "Line",
data: [
8107.85, 8128, 8122.9, 8165.5, 8340.7, 8423.7, 8423.5,
8514.3, 8481.85, 8487.7, 8506.9, 8626.2, 8668.95, 8602.3,
8607.55, 8512.9, 8496.25, 8600.65, 8881.1, 9340.85
],
style: {
width: 4,
fill: 0,
}
}
],
annotations: [
{
type: "yLine", // yLine, xLine, point
y: 8200,
y2: null,
text: 'Support',
style: {
fillColor: '#c2c2c2',
borderColor: '#00E396',
opacity: 0.3, // 0 - 1
dash: 5, // 0 - 100
label: {
color: "#fff",
background: '#00E396',
borderColor: '#00a46c',
borderWidth: 1, // 0 - 10
align: 'right', // right, left
offsetY: -3,
offsetX: 0,
},
},
events: {
mouseEnter: function (annotation) { console.log('mouseEnter') },
mouseLeave: function (annotation) { console.log('mouseLeave') },
click: function (annotation) { console.log('click') },
}
},
{
type: "yLine", // yLine, xLine, point
y: 8600,
y2: 9000,
text: 'Y-axis range',
style: {
fillColor: '#ffcf72',
borderColor: '#000',
opacity: 0.25,
label: {
color: "#333",
background: '#ffcf72',
borderColor: '#333',
borderWidth: 1,
align: 'right', // right, left
offsetY: 0,
offsetX: 0,
},
}
},
{
type: "xLine", // yLine, xLine, point
x: new Date('23 Nov 2017').getTime(),
text: 'Anno Test',
style: {
borderColor: '#775DD0',
dash: 0,
label: {
color: '#fff',
borderColor: '#775DD0',
background: '#775DD0',
orientation: 'horizontal', // horizontal, vertical
offsetY: 0,
offsetX: 0,
}
}
},
{
type: "xLine", // yLine, xLine, point
x: new Date('26 Nov 2017').getTime(),
x2: new Date('28 Nov 2017').getTime(),
text: 'X-axis range',
style: {
fillColor: '#B3F7CA',
borderColor: '#11a43e',
label: {
color: '#fff',
borderColor: '#B3F7CA',
background: '#00E396',
offsetY: -10,
}
}
},
{
type: "point", // yLine, xLine, point
x: new Date('01 Dec 2017').getTime(),
y: 8607.55,
text: 'Point Annotation',
style: {
size: 8,
fillColor: '#fff',
borderColor: '#f00',
borderWidth: 2,
label: {
color: '#fff',
borderColor: '#FF4560',
background: '#FF4560',
offsetY: 0,
offsetX: 0,
}
}
},
{
type: "point", // yLine, xLine, point
x: new Date('08 Dec 2017').getTime(),
y: 9340.85,
style: {
imagePath: '../data/img/ico-instagram.png'
}
}
],
options: {
width: '100%',
height: 400,
axis: {
xaxis: {
type: 'datetime',
},
}
}
};
let chartAnnotations = CoreUI.chart.create(annotationsOptions);
chartAnnotations.render('chart-annotations');
$('#btn-add-annotation').click(function () {
let annotations = chartAnnotations.getAnnotations();
if (annotations.length > 8) {
return;
}
let day = 15 + (annotations.length - 6);
chartAnnotations.addAnnotation({
id: "event_" + day,
type: "xLine",
x: new Date(day + ' Nov 2017').getTime(),
text: 'Event',
style: {
borderColor: '#d0b55d',
dash: 0,
label: {
color: '#fff',
borderColor: '#d0b55d',
background: '#d0b55d'
}
}
});
});
$('#btn-remove-annotation').click(function () {
let annotations = chartAnnotations.getAnnotations();
if (annotations.length <= 6) {
return;
}
let day = 15 + (annotations.length - 7);
chartAnnotations.removeAnnotation("event_" + day);
});
</script>
<div id="chart-load-data"></div>
<button class="btn btn-sm btn-secondary" id="btn-load-data">Load data</button>
<script>
let loadDataOptions = {
options: {
width: '100%',
height: 300,
dataUrl: 'data/chart-data.json',
enabled: {
preloader: true
},
axis: {
xaxis: {
type: 'datetime',
}
}
}
};
let chartLoadData = CoreUI.chart.create(loadDataOptions);
chartLoadData.render('chart-load-data');
</script>
<div id="chart-update"></div>
<button class="btn btn-sm btn-secondary" id="btn-add-dataset">Add dataset</button>
<button class="btn btn-sm btn-secondary" id="btn-remove-dataset">Remove dataset</button>
<script>
let updateOptions = {
options: {
width: '100%',
height: 300,
axis: {
xaxis: {
type: 'numeric',
},
},
style: {
stacked: true, // false, true, '100%'
theme: 'smooth', // straight, smooth, stepline
}
}
};
let chartUpdate = CoreUI.chart.create(updateOptions);
chartUpdate.render('chart-update');
$('#btn-add-dataset').click(function () {
let datasets = chartUpdate.getDatasets();
if (datasets.length === 0) {
chartUpdate.addDatasets([{
type: "line",
name: "Line",
data: [ 21, 11, 14, 11, 16, 22, 29, 22, 15, 16, 15, 30, 27, 19, 13, 23, 16, 23, 22, 26 ],
style: {
width: 1, // 0 - 10
fill: 60, // 0 - 100
theme: 'smooth', // straight, smooth, stepline
gradient: true,
}
}])
}
if (datasets.length === 1) {
chartUpdate.addDatasets([{
type: "line",
name: "Line 2",
data: [ 15, 20, 13, 18, 19, 18, 16, 19, 15, 13, 13, 13, 14, 16, 17, 10, 15, 15, 10, 17 ],
style: {
dash: 4, // 0 - 100
markerSize: 3, // 0 - 10
}
}])
}
if (datasets.length === 2) {
chartUpdate.addDatasets([{
type: "line",
name: "Line 3",
data: [ 12, 12, 15, 10, 12, 11, 12, 11, 12, 14, 15, 10, 12, 14, 13, 10, 12, 10, 14, 12 ]
}])
}
});
$('#btn-remove-dataset').click(function () {
let datasets = chartUpdate.getDatasets();
if (datasets.length === 3) {
chartUpdate.removeDataset("Line 3");
}
if (datasets.length === 2) {
chartUpdate.removeDataset("Line 2");
}
if (datasets.length === 1) {
chartUpdate.removeDataset("Line");
}
});
</script>
<div id="chart-toolbar"></div>
<script>
let toolbarOptions = {
datasets: [
{
type: "line",
name: "Line",
data: [
[1327359600000,30.95], [1327446000000,31.34], [1327532400000,31.18], [1327618800000,31.05],
[1327878000000,31.00], [1327964400000,30.95], [1328050800000,31.24], [1328137200000,31.29],
[1328223600000,31.85], [1328482800000,31.86], [1328569200000,32.28], [1328655600000,32.10],
[1328742000000,32.65], [1328828400000,32.21], [1329087600000,32.35], [1329174000000,32.44],
[1329260400000,32.46], [1329346800000,32.86], [1329433200000,32.75], [1329778800000,32.54],
[1329865200000,32.33], [1329951600000,32.97], [1330038000000,33.41], [1330297200000,33.27],
[1330383600000,33.27], [1330470000000,32.89], [1330556400000,33.10], [1330642800000,33.73],
[1330902000000,33.22], [1330988400000,31.99], [1331074800000,32.41], [1331161200000,33.05]
],
},
],
options: {
lang: 'ru',
width: '100%',
height: 300,
axis: {
xaxis: {
type: 'datetime',
}
},
enabled: {
zoom: true,
toolbar: true,
}
}
};
let chartToolbar = CoreUI.chart.create(toolbarOptions);
chartToolbar.render('chart-toolbar');
</script>
<div id="chart-events"></div>
<script>
let eventsOptions = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
datasets: [
{
type: "bar",
name: "Bar",
data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
},
{
type: "line",
name: "Line",
data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
style: {
fill: 0
}
},
],
options: {
width: '100%',
height: 300,
enabled: {
zoom: true,
toolbar: true,
},
title: {
text: 'MarkerClick, LegendClick, Zoomed',
},
events: {
markerClick: function(event, chartContext, marker) {
alert('markerClick: pointIndex - ' + marker.dataPointIndex + ' seriesIndex - ' + marker.seriesIndex);
},
legendClick: function(chartContext, seriesIndex) {
alert('legendClick: seriesIndex - ' + seriesIndex);
},
zoomed: function(chartContext, axis) {
alert('zoomed: ' + JSON.stringify(axis));
},
}
}
};
let chartEvents = CoreUI.chart.create(eventsOptions);
chartEvents.render('chart-events');
</script>
<div id="chart-grid"></div>
<script>
let gridOptions = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
datasets: [
{
type: "line",
name: "Line",
data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
style: {
fill: 0
}
},
],
options: {
width: '100%',
height: 300,
axis: {
xaxis: {
show: true,
title: 'Bytes Received',
type: 'category', // category, datetime, numeric
position: 'bottom', // top
border: true,
color: '#30be90',
},
yaxis: {
show: true,
title: 'Bytes Received',
position: 'left', // right
border: true,
color: '#6a36b7',
min: 70,
max: 130
},
grid: {
show: true,
xLines: true,
yLines: true,
color: '#ebf1ff',
dash: 15,
}
},
}
};
let chartGrid = CoreUI.chart.create(gridOptions);
chartGrid.render('chart-grid');
</script>
<div id="chart-missing"></div>
<script>
let missingOptions = {
datasets: [
{
type: "line",
name: "Line",
data: [
null, 44, 31, 38, null, 32, 55, 51, 67, 22, 34, null,
null, 11, 4, 15, null, 9, 34, null, null, 13, null
]
},
],
options: {
width: '100%',
height: 300,
tooltip: {
mode: 'single'
},
style: {
markerSize: 4, // 0 - 10
}
}
};
let chartMissing = CoreUI.chart.create(missingOptions);
chartMissing.render('chart-missing');
</script>
<div id="chart-theme"></div>
<script>
let themeOptions = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
datasets: [
{
type: "line",
name: "Line",
data: [31, 40, 28, 51, 42, 109, 100]
},
{
type: "line",
name: "Line 2",
data: [11, 32, 45, 32, 34, 52, 41]
},
],
options: {
width: '100%',
height: 300,
enabled: {
animations: true,
},
theme: {
mode: 'dark', // light, dark
colorScheme: 'monochrome', // classic, mpn65, monochrome, custom // http://google.github.io/palette.js/
customColors: [ '#ef9a9a', '#ce93d8', '#c6f990' ],
monochromeColor: '#278aee',
background: null, // #fff
},
style: {
theme: 'smooth',
}
}
};
let chartTheme = CoreUI.chart.create(themeOptions);
chartTheme.render('chart-theme');
</script>
| Name | type | default | description |
|---|---|---|---|
| id | string | crc32b |
Идентификатор графика. Этот id будет указан вместо уникального значения |
| labels | Array | Лейблы используемые на графике | |
| datasets | Array | Наборы данных используемые на графике | |
| annotations | Array | Аннотации используемые на графике | |
| options | Array | Дополнительные данные для регулирования внешнего вида графика |
| Name | type | default | description |
|---|---|---|---|
| type | string | Тип набора данных. Виды типов line, bar, points, rangeArea, candlestick, box, pie, donut, radialBar, radar, polarArea |
|
| name | string | Название набора данных | |
| data | array | Данные | |
| style | object | Настройки стилей для указанного типа данных |
| Name | type | default | description |
|---|---|---|---|
| type | string | Тип аннотации. Виды аннотаций yLine, xLine, point |
|
| x (y) | string | number | Первая координата аннотации | |
| x2 (y2) | string | number | Вторая координата аннотации | |
| text | string | Текст события | |
| style | object | Настройки стилей для указанного события | |
| events | object | События. { mouseEnter, mouseLeave, click } |
| Name | type | default | description |
|---|---|---|---|
| type | string | line | Тип графика |
| lang | string | en | Язык графика |
| width | string | number | Ширина графика на странице | |
| height | string | number | Высота графика на странице | |
| dataUrl | string | Адрес запроса для получения данных | |
| title | object | Заголовок графика | |
| enabled | object | Признаки отображения элементов графика. { legend, labels, tooltip, animations, zoom, toolbar } |
|
| tooltip | object | Настройка окна показываемого при наведении курсора на данные | |
| legend | object | Настройка легенды | |
| axis | object | Настройка элементов графика | |
| theme | object | Настройка темы графика | |
| style | object | Стилистика данных графика | |
| events | object | События графика. { markerClick, legendClick, zoomed } |
| Method | Return | Description |
|---|---|---|
|
CoreUI.chart.instance | Метод для создания экземпляра графика |
|
CoreUI.chart.instance | Получение ранее созданного экземпляра графика |
|
Установка некоторых настроек по умолчанию для создаваемых графиков | |
|
mixed | Получение значения установленной настройки по умолчанию для создаваемых графиков |
|
string | void | Формирование html графика и размещение его если указан dom элемент. Если элемент не указан, то метод возвращает сформированный html |
|
Инициализирует события необходимые для корректной работы графика. Требует обязательного вызова, если при рендере формы не был указан элемент для вставки (elementId) | |
|
string | null | Получение id графика |
|
object | Получение параметров графика |
|
Блокирование графика с указанным текстом | |
|
Разблокирование графика | |
|
object | Получение данных из указанного внешнего источника |
|
Array | Добавление новых наборов данных |
|
object | Добавление данных в указанные наборы по их имени |
|
Array | Удаление набора данных по имени |
|
Array | Удаление всех наборов данных |
|
Array | Получение проинициализированного экземпляра поля формы по его названию |
|
object | null | Получение экземпляра набора данных по имени |
|
Array | Получение всех аннотаций |
|
object | null | Получение аннотации по id |
|
string | null | Добавление аннотации |
|
Удаление аннотации по id | |
|
Удаление всех аннотаций | |
|
Изменение масштаба на графике | |
|
Регистрация функции вызываемой при наступлении указанного события | |
|
Получение настроек языка | |
|
Уничтожение графика |
| Event Type | Description |
|---|---|
| shown.coreui.chart | Показ графика на странице. Происходит один раз при отображении |
| load-data.coreui.chart |
Выполняется перед запросом на получение данных. В качестве параметров передаются chart.on('load-data.coreui.chart', function (chart)
|
| start-load-data.coreui.chart |
Выполняется перед началом запроса для получения данных графика. В качестве параметров передаются chart.on('start-load-data.coreui.chart', function (chart, xhr)
|
| success-load-data.coreui.chart |
Выполняется после успешного запроса для получения данных графика. В качестве параметров передаются chart.on('success-load-data.coreui.chart', function (chart, result)
|
| error-load-data.coreui.chart |
Выполняется после не успешного запроса для получения данных графика. В качестве параметров передаются chart.on('error-load-data.coreui.chart', function (chart, xhr, textStatus, errorThrown)
|
| end-load-data.coreui.chart |
Выполняется после запроса для получения данных графика. В качестве параметров передаются chart.on('end-load-data.coreui.chart', function (chart, xhr, textStatus)
|