;(function ($, w){
'use strict';
var $window=$(w);
$window.on('elementor/frontend/init', function(){
var EF=elementorFrontend,
EM=elementorModules;
var Bar_Chart=EM.frontend.handlers.Base.extend({
onInit: function(){
this.run();
},
onChange: function(){
this.run();
},
run: function(){
var $scope=this.$element;
var $settings=this.getElementSettings();
var $id=$scope[0].dataset.id;
let $data=$settings.list;
let dLen=$data.length;
let $chartData=[],
$labels=[],
$backgroundColor=[];
for (let i=0; i < dLen; i++){
let $d=$data[i];
$chartData.push($d.data);
$labels.push($d.labels);
$backgroundColor.push($d.backgroundColor);
}
let labels=$labels;
let barChartData={
labels: labels,
datasets: [{
label: $settings.legend_label,
backgroundColor: $backgroundColor,
borderColor:  $settings.borderColor,
data: $chartData,
}]
};
let config={
type:'bar',
data: barChartData,
options: {
indexAxis: ($settings.indexAxis=='yes') ? 'y':'x',
responsive: true,
plugins: {
title: {
display: true,
text: $settings.chart_title
},
legend: {
display: ($settings.display_legend=='yes') ? true:false,
position: $settings.legend_position,
align: 'middle',
labels: {
color: $settings.legend_color
}}
},
scales: {
x: {
ticks: {
color: $settings.x_ticks_color,
}},
y: {
ticks: {
color: $settings.y_ticks_color,
},
grid: {
drawBorder: false,
color:$settings.y_grid_color,
}}
}},
};
var ctx=document.getElementById('uaChart-' + $id);
let uaChart=new Chart(ctx,
config
);
}});
EF.hooks.addAction('frontend/element_ready/ultraaddons-bar-chart.default',
function ($scope){
EF.elementsHandler.addHandler(Bar_Chart, {
$element: $scope,
});
}
);
var Line_chart=EM.frontend.handlers.Base.extend({
onInit: function(){
this.run();
},
onChange: function(){
this.run();
},
run: function(){
var $scope=this.$element;
var $settings=this.getElementSettings();
var $id=$scope[0].dataset.id;
let $data=$settings.list;
let dLen=$data.length;
let $chartData=[],
$labels=[],
$backgroundColor=[];
for (let i=0; i < dLen; i++){
let $d=$data[i];
$chartData.push($d.data);
$labels.push($d.labels);
$backgroundColor.push($d.backgroundColor);
}
let labels=$labels;
let lineChartData={
labels: labels,
datasets: [{
label:  $settings.legend_label,
data: $chartData,
fill: ($settings.fill_color=='yes') ? true:false,
borderColor:  $settings.borderColor,
backgroundColor: $backgroundColor,
tension: 0.1,
borderWidth:$settings.borderWidth,
pointBorderWidth:$settings.pointBorderWidth,
pointBackgroundColor: $backgroundColor
}]
};
let config={
type:'line',
data: lineChartData,
options: {
responsive: true,
plugins: {
title: {
display: true,
text: $settings.chart_title
},
legend: {
display: ($settings.display_legend=='yes') ? true:false,
position: $settings.legend_position,
align: 'middle',
labels: {
color: $settings.legend_color
}}
},
scales: {
x: {
ticks: {
color: $settings.x_ticks_color,
}},
y: {
ticks: {
color: $settings.y_ticks_color,
},
grid: {
drawBorder: false,
color:$settings.y_grid_color,
},
}}
},
};
var ctx=document.getElementById('uaChart-' + $id);
let uaChart=new Chart(ctx,
config
);
}});
EF.hooks.addAction('frontend/element_ready/ultraaddons-line-chart.default',
function ($scope){
EF.elementsHandler.addHandler(Line_chart, {
$element: $scope,
});
}
);
var Pie_chart=EM.frontend.handlers.Base.extend({
onInit: function(){
this.run();
},
onChange: function(){
this.run();
},
run: function(){
var $scope=this.$element;
var $settings=this.getElementSettings();
var $id=$scope[0].dataset.id;
let $data=$settings.list;
let dLen=$data.length;
let $chartData=[],
$labels=[],
$backgroundColor=[];
for (let i=0; i < dLen; i++){
let $d=$data[i];
$chartData.push($d.data);
$labels.push($d.labels);
$backgroundColor.push($d.backgroundColor);
}
let labels=$labels;
let pieChartData={
labels: labels,
datasets: [{
label:  $settings.legend_label,
data: $chartData,
backgroundColor: $backgroundColor,
hoverOffset: 4
}]
};
let config={
type:'pie',
data: pieChartData,
options: {
responsive: true,
plugins: {
title: {
display: true,
text: $settings.chart_title
},
legend: {
display: ($settings.display_legend=='yes') ? true:false,
position: $settings.legend_position,
align: 'middle',
labels: {
color: $settings.legend_color
}}
},
scales: {
x: {
ticks: {
color: $settings.x_ticks_color,
}},
y: {
ticks: {
color: $settings.y_ticks_color,
},
grid: {
drawBorder: false,
color:$settings.y_grid_color,
},
}}
},
};
var ctx=document.getElementById('uaChart-' + $id);
let uaChart=new Chart(ctx,
config
);
}});
EF.hooks.addAction('frontend/element_ready/ultraaddons-pie-chart.default',
function ($scope){
EF.elementsHandler.addHandler(Pie_chart, {
$element: $scope,
});
}
);
var Doughnut_chart=EM.frontend.handlers.Base.extend({
onInit: function(){
this.run();
},
onChange: function(){
this.run();
},
run: function(){
var $scope=this.$element;
var $settings=this.getElementSettings();
var $id=$scope[0].dataset.id;
let $data=$settings.list;
let dLen=$data.length;
let $chartData=[],
$labels=[],
$backgroundColor=[];
for (let i=0; i < dLen; i++){
let $d=$data[i];
$chartData.push($d.data);
$labels.push($d.labels);
$backgroundColor.push($d.backgroundColor);
}
let labels=$labels;
let doughnutChartData={
labels: labels,
datasets: [{
label:  $settings.legend_label,
data: $chartData,
backgroundColor: $backgroundColor,
hoverOffset: 4
}]
};
let config={
type:'doughnut',
data: doughnutChartData,
options: {
responsive: true,
plugins: {
title: {
display: true,
text: $settings.chart_title
},
legend: {
display: ($settings.display_legend=='yes') ? true:false,
position: $settings.legend_position,
align: 'middle',
labels: {
color: $settings.legend_color
}}
},
scales: {
x: {
ticks: {
color: $settings.x_ticks_color,
}},
y: {
ticks: {
color: $settings.y_ticks_color,
},
grid: {
drawBorder: false,
color:$settings.y_grid_color,
},
}}
},
};
var ctx=document.getElementById('uaChart-' + $id);
let uaChart=new Chart(ctx,
config
);
}});
EF.hooks.addAction('frontend/element_ready/ultraaddons-doughnut-chart.default',
function ($scope){
EF.elementsHandler.addHandler(Doughnut_chart, {
$element: $scope,
});
}
);
var Polar_chart=EM.frontend.handlers.Base.extend({
onInit: function(){
this.run();
},
onChange: function(){
this.run();
},
run: function(){
var $scope=this.$element;
var $settings=this.getElementSettings();
var $id=$scope[0].dataset.id;
let $data=$settings.list;
let dLen=$data.length;
let $chartData=[],
$labels=[],
$backgroundColor=[];
for (let i=0; i < dLen; i++){
let $d=$data[i];
$chartData.push($d.data);
$labels.push($d.labels);
$backgroundColor.push($d.backgroundColor);
}
let labels=$labels;
let polarChartData={
labels: labels,
datasets: [{
label:  $settings.legend_label,
data: $chartData,
backgroundColor: $backgroundColor,
hoverOffset: 4
}]
};
let config={
type:'polarArea',
data: polarChartData,
options: {
responsive: true,
plugins: {
title: {
display: true,
text: $settings.chart_title
},
legend: {
display: ($settings.display_legend=='yes') ? true:false,
position: $settings.legend_position,
align: 'middle',
labels: {
color: $settings.legend_color
}}
},
scales: {
x: {
ticks: {
color: $settings.x_ticks_color,
}},
y: {
ticks: {
color: $settings.y_ticks_color,
},
grid: {
drawBorder: false,
color:$settings.y_grid_color,
},
}}
},
};
var ctx=document.getElementById('uaChart-' + $id);
let uaChart=new Chart(ctx,
config
);
}});
EF.hooks.addAction('frontend/element_ready/ultraaddons-polar-chart.default',
function ($scope){
EF.elementsHandler.addHandler(Polar_chart, {
$element: $scope,
});
}
);
var Mixed_chart=EM.frontend.handlers.Base.extend({
onInit: function(){
this.run();
},
onChange: function(){
this.run();
},
run: function(){
var $scope=this.$element;
var $settings=this.getElementSettings();
var $id=$scope[0].dataset.id;
let $data=$settings.data_list;
console.log($data);
let dLen=$data.length;
let $barChartData=[],
$linechartData=[],
$labels=[],
$backgroundColor=[];
for (let i=0; i < dLen; i++){
let $d=$data[i];
$barChartData.push($d.bar_data);
$linechartData.push($d.line_data);
$labels.push($d.labels);
$backgroundColor.push($d.backgroundColor);
}
let labels=$labels;
let config={
type: "bar",
data: {
labels: labels,
datasets: [
{
type: "bar",
backgroundColor: $backgroundColor,
borderColor:$settings.borderColor,
borderWidth: 1,
label:$settings.bar_legend_label,
data: $barChartData,
hoverOffset: 4
},
{
type: "line",
label:$settings.line_legend_label,
data: $linechartData,
backgroundColor: $settings.fill_color_bg ? $settings.fill_color_bg:$backgroundColor,
borderColor:$settings.borderColor,
lineTension:0.5,
hoverOffset: 4,
fill: ($settings.fill_color=='yes') ? true:false,
pointBorderWidth:$settings.pointBorderWidth,
borderWidth:$settings.borderWidth,
}
]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: $settings.chart_title
},
legend: {
display: ($settings.display_legend=='yes') ? true:false,
position: $settings.legend_position,
align: 'middle',
labels: {
color: $settings.legend_color
}}
},
scales: {
x: {
ticks: {
color: $settings.x_ticks_color,
},
grid: {
drawBorder: false,
color:$settings.x_grid_color,
},
},
y: {
ticks: {
color: $settings.y_ticks_color,
},
grid: {
drawBorder: false,
color:$settings.y_grid_color,
},
}}
},
};
var ctx=document.getElementById('uaChart-' + $id);
let uaChart=new Chart(ctx,
config
);
}});
EF.hooks.addAction('frontend/element_ready/ultraaddons-mixed-chart.default',
function ($scope){
EF.elementsHandler.addHandler(Mixed_chart, {
$element: $scope,
});
}
);
var R_chart=EM.frontend.handlers.Base.extend({
onInit: function(){
this.run();
},
onChange: function(){
this.run();
},
run: function(){
var $scope=this.$element;
var $settings=this.getElementSettings();
var $id=$scope[0].dataset.id;
let $data=$settings.data_list;
console.log($settings);
let dLen=$data.length;
let $data_1=[],
$data_2=[],
$labels=[],
$backgroundColor=[];
for (let i=0; i < dLen; i++){
let $d=$data[i];
$data_1.push($d.data_1);
$data_2.push($d.data_2);
$labels.push($d.labels);
$backgroundColor.push($d.backgroundColor);
}
let labels=$labels;
let config={
type: "radar",
data: {
labels: labels,
datasets: [
{
data: $data_1,
backgroundColor: $backgroundColor,
borderColor:$settings.backgroundColor,
label:$settings.bar_legend_label,
},
{
data: $data_2,
label:$settings.line_legend_label,
borderColor:$settings.backgroundColor,
backgroundColor: $backgroundColor,
}
]
},
options: {
responsive: true,
scales: {
r: {
pointLabels:{
color: $settings.pointLabels,
},
grid:{
color:$settings.grid_color
},
angleLines:{
color:$settings.angle_color
}},
},
plugins: {
title: {
display: true,
text: $settings.chart_title,
color:$settings.title_color
},
legend: {
display: ($settings.display_legend=='yes') ? true:false,
position: $settings.legend_position,
align: 'middle',
labels: {
color: $settings.legend_color
}}
},
},
};
var ctx=document.getElementById('uaChart-' + $id);
let uaChart=new Chart(ctx,
config
);
}});
EF.hooks.addAction('frontend/element_ready/ultraaddons-radar-chart.default',
function ($scope){
EF.elementsHandler.addHandler(R_chart, {
$element: $scope,
});
}
);
});
} (jQuery, window));