I currently have one js file that serves all the html scripts, that is starting to become tedious.
It looks like this:
// Using .html in jQuery big NO NO: https://medium.com/#jenlindner22/the-risk-of-innerhtml-3981253fe217, switched to .text
// Chart Variables
var teamProgressChart
// Get initial value from filters in /table
var seasonSelection = $('#seasonToggle').children(":first").val()
var typeSelection = $('#homeAwayToggle').children(":first").val()
var MatchweekSelection = $('#homeAwayToggle').children(":first").val()
// var leagueTableUpdateTimeStamp = 0
/**
* Team progress chart update in /table
*/
$(".clickable-row").click(function() {
const teamVal = $(this).attr('value')
$.ajax({
type: 'POST',
url: '/table/team?' + $.param({ teamId: teamVal }),
success: (res) => {
var result = res[0]
var points = result.pointsAll
var position = result.positionAll
var labels = result.gameweeks
console.log(points)
console.log(position)
console.log(labels)
if (teamProgressChart) {
teamProgressChart.data.labels = labels
teamProgressChart.data.datasets[0].data = points
teamProgressChart.data.datasets[1].data = position
teamProgressChart.update()
} else {
var ctx = document.getElementById('team-progress-graph').getContext('2d');
Chart.defaults.global.defaultFontSize = 24;
teamProgressChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: "Points",
fillColor: "rgba(0,0,0,0)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(200,122,20,1)",
borderColor: "rgba(43, 87, 29, 0.9)",
fill: false,
data: points,
yAxisID: 'points'
},
{
label: "Position",
fillColor: "rgba(172, 26, 26, 0.9)",
strokeColor: "rgba(172, 26, 26, 0.9)",
pointColor: "rgba(172, 26, 26, 0.9)",
borderColor: "rgba(14, 86, 168, 0.9)",
fill: false,
data: position,
yAxisID: 'position'
},
],
},
options: {
scales: {
xAxes: [
{
ticks: {
fontSize: 24,
autoSkip: false,
beginAtZero: true
}
}
],
yAxes: [
{
id: 'points',
min: 0,
position: 'left',
ticks: {
fontSize: 24,
beginAtZero: true
}
},
{
id: 'position',
suggestedMin : 0,
suggestedMax : 20,
position: 'right',
ticks: {
fontSize: 24
}
},
]
},
display: false,
},
})
}
}
})
})
/**
* Button to updata data in /table
*/
$('#updateDataButton').bind('click', function(event){
console.log(event.timeStamp)
$.ajax({
type: 'POST',
url: '/table',
success: () => {
console.log('success')
window.location = "/";
}
})
});
/**
* Click eventlistner for home-page player stats
*/
const homeTable = document.querySelectorAll(".stats-item");
homeTable.forEach(element => {
element.addEventListener('click', homeTableToggle)
})
function homeTableToggle(event){
var queryVal = event.target.value
console.log(queryVal)
if (queryVal == 1){
$.ajax({
type: 'POST',
url: '/?' + $.param({ statsType: queryVal}),
success: (newVals) => {
$('#stats-placehld').text("AvgPlayTime")
$('#stats-placehld1').text("AvgPasses")
console.log($('#stats-placehld1').textContent)
$('#playerStatsAvg').empty();
for(let i = 0; i < 50; i++) {
let filteredTr = newVals[i]
let newHtml = `<tr>
<td>${filteredTr.name}</td>
<td>${filteredTr.teamName}</td>
<td>${filteredTr.position}</td>
<td>${filteredTr.averagePlaytime}</td>
<td>${filteredTr.averagePasses}</td>
</tr>`
$('#playerStatsAvg').append(newHtml)
}
}
})
} else if (queryVal == 2){
$.ajax({
type: 'POST',
url: '/?' + $.param({ statsType: queryVal}),
success: (newVals) => {
$('#stats-placehld').text("AvgShots")
$('#stats-placehld1').text("AvgOnTarget")
$('#playerStatsAvg').empty();
for(let i = 0; i < 50; i++) {
let filteredTr = newVals[i]
let newHtml = `<tr>
<td>${filteredTr.name}</td>
<td>${filteredTr.teamName}</td>
<td>${filteredTr.position}</td>
<td>${filteredTr.averageShotsPerGame}</td>
<td>${filteredTr.averageShotsOnTarget}</td>
</tr>`
$('#playerStatsAvg').append(newHtml)
}
}
})
}
}
//Click eventlistner for all table-filters
const selection = document.querySelectorAll(".dropdown-item");
selection.forEach(element => {
element.addEventListener('click', pickSelection)
})
function pickSelection(event) {
let text = ""
switch(event.target.parentElement.id){
case 'seasonToggle':
text = event.target.textContent
$('#seasonvalue').text(text)
seasonSelection = event.target.value
break
case 'homeAwayToggle':
text = event.target.textContent
$('#typevalue').text(text)
typeSelection = event.target.value
break
case 'matchWeekToggle':
text = event.target.textContent
$('#matchDropDownMenyButton').text(text)
MatchweekSelection = event.target.value
break
}
//Get request for
$.ajax({
type: 'POST',
url: '/table?' + $.param({ seasonVal: seasonSelection,
typeVal: typeSelection,
matchWeekVal: MatchweekSelection}),
success: (filteredSeasonValues) => {
$('#league-table-rows').empty();
for(let i = 0; i < 20; i++) {
let filteredTr = filteredSeasonValues[i]
let newHtml = `<tr>
<td>${i+1}</td>
<td><img src='badges/${filteredTr.team_shortName}.png' />
${filteredTr.team_shortName}</td>
<td>${filteredTr.played}</td>
<td>${filteredTr.won}</td>
<td>${filteredTr.drawn}</td>
<td>${filteredTr.lost}</td>
<td>${filteredTr.goalsFor}</td>
<td>${filteredTr.goalsAgainst}</td>
<td>${filteredTr.goalsDifference}</td>
<td>${filteredTr.points}</td>
</tr>`
$('#league-table-rows').append(newHtml)
}
}
})
}
How would one go about splitting it into multiple files, let's say page specific and importing them to a global js-file that later gets served, so the structure looks like this?
home.js
//home specific jquery functions
table.js
//table specific jquery functions
client.js
import home.js
import table.js
index.html
<script src="js/client.js" defer ></script>
Related
I'm using chart.js to graph my data.
I'm wondering if I can show the flag image/icon PNG for the labels.
function drawChart(obj, columnName, type = 'bar', selectedVal){
var ajax = $.ajax({url: '/query/' + obj + '/'+ columnName + '/' + selectedVal });
ajax.done(function (response) {
console.log('Response from API >>',response);
$('.lds-ripple').fadeOut();
var selector = `chart-${columnName}`;
var chartHtml = `<div class="col-sm-6"><canvas class="chart" id="${selector}" height="200"></canvas></div>`;
$('.charts').append(chartHtml);
keys = [];
values = [];
var length = 0
$.each(response, function(key,val) {
//console.log(key+val);
length++;
if(length<15){
keys.push(key);
values.push(val);
}
});
var showLegend = false;
if(type == 'doughnut' || type == 'radar' || type == 'polarArea' || type == 'pie'){
showLegend = true;
}
let chart = document.getElementById(selector).getContext('2d');
let xAxisTitle = columnName;
var sumOfAllValues = values.reduce((a, b) => a + b, 0);
Chart.defaults.global.defaultFontColor = "#fff";
var ticksDisplay = true;
if(columnName == 'country'){
ticksDisplay = false;
}
const images = ['https://i.stack.imgur.com/2RAv2.png', 'https://i.stack.imgur.com/Tq5DA.png', 'https://i.stack.imgur.com/3KRtW.png', 'https://i.stack.imgur.com/iLyVi.png'];
new Chart(chart, {
type: type, // bar, horizontalBar, pie, line, doughnut, radar, polarArea
plugins: [{
afterDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
xAxis.ticks.forEach((value, index) => {
var x = xAxis.getPixelForTick(index);
var y = yAxis.getPixelForTick(index);
var image = new Image();
image.src = images[index],
ctx.drawImage(image, x - 12, yAxis.bottom + 10);
// ctx.drawImage(image, x + 12, yAxis.left - 10);
});
}
}],
data:{
labels: keys,
datasets:[{
label:'Count',
data:values,
borderWidth:2,
hoverBorderWidth:2,
hoverBorderColor:'#fff',
color:'#fff',
backgroundColor: neonBgColors,
borderColor: neonBgBorders,
defaultFontColor: 'white'
}
]
},
options:{
title:{
display:true,
fontSize: 20,
text: columnName + '(' + sumOfAllValues + ')'
},
legend:{
display:showLegend,
position:'right',
labels:{
fontColor:'#000'
}
},
scales: {
xAxes: [{
ticks: {
precision:0,
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: xAxisTitle + ' (' + sumOfAllValues + ')'
}
}],
yAxes: [{
ticks: {
precision:0,
beginAtZero: true,
display: ticksDisplay,
},
scaleLabel: {
display: true,
// labelString: 'Visitor Count'
}
}]
},
layout: {
padding: {
bottom: 30
}
},
}
});
});
}
I kept getting
I adapted the code of this answer and came up with the following solution for your case.
const labels = ['Red Vans', 'Blue Vans', 'Green Vans', 'Gray Vans'];
const images = ['https://i.stack.imgur.com/2RAv2.png', 'https://i.stack.imgur.com/Tq5DA.png', 'https://i.stack.imgur.com/3KRtW.png', 'https://i.stack.imgur.com/iLyVi.png']
.map(png => {
const image = new Image();
image.src = png;
return image;
});
const values = [48, 56, 33, 44];
new Chart(document.getElementById("myChart"), {
type: "horizontalBar",
plugins: [{
afterDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
yAxis.ticks.forEach((value, index) => {
var y = yAxis.getPixelForTick(index);
ctx.drawImage(images[index], xAxis.left - 40, y - 10);
});
}
}],
data: {
labels: labels,
datasets: [{
label: 'My Dataset',
data: values,
backgroundColor: ['red', 'blue', 'green', 'lightgray']
}]
},
options: {
responsive: true,
layout: {
padding: {
left: 50
}
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
display: false
}
}],
xAxes: [{
ticks: {
beginAtZero: true
}
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>
I'm trying to show weight_id retrieved from mysql data in a chart.js tooltip (shown as (weight_ids[index]) in the image). And later, I intend to show a modal instead of a tooltip to let users update or delete that data. I presume I cannot achieve that without linking the linechart's point data with id stored in mysql. How can I incorporate this id data?
I would appreciate any help very much.
enter image description here
My code is as follows:
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.min.js"></script>
{{-- グラフを描画--}}
<script>
//ラベル
const labels = #json($date_labels);
// id
const weight_ids = #json($weight_ids);
//体重ログ
const weight_logs = #json($weight_logs);
const aryMax = function(a, b) {
return Math.max(a, b);
};
const aryMin = function(a, b) {
return Math.min(a, b);
};
let min_label = Math.floor((weight_logs).reduce(aryMin) - 0.5);
let max_label = Math.ceil((weight_logs).reduce(aryMax) + 0.5);
console.log(weight_ids);
console.log(weight_logs);
console.log(min_label, max_label);
//グラフを描画
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data : {
labels: labels, // x軸ラベル
datasets: [
{
label: `Weight (weight_ids[index])`,
data: weight_logs,
tension: 0,
borderColor: "rgba(37,78,255,1)",
backgroundColor: "rgba(0,0,0,0)",
pointRadius: 3
}
]
},
options: {
title: {
display: false,
text: ''
},
legend: {
display: false,
},
scales: {
yAxes: [
{
ticks: {
min: min_label, // ラベル最小値
max: max_label, // ラベル最大値
},
scaleLabel: {
display: true,
fontSize: 16,
labelString: '体重 (kg)'
}
}
],
},
hover: {
mode: 'point'
},
onClick: function clickHandler(evt) {
var firstPoint = myChart.getElementAtEvent(evt)[0];
if (firstPoint) {
var label = myChart.data.labels[firstPoint._index];
var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
console.log(label);
console.log(value);
if (value) {
$('#weidhtModal').modal('show');
}
}
}
}
});
</script>
Thank you!
I found a way to retrieve weight_id using the following function.
onClick: function clickHandler(evt, activeElements) {
if (activeElements.length) {
var element = this.getElementAtEvent(evt);
var index = element[0]._index;
var _datasetIndex = element[0]._datasetIndex;
var weightId = weight_ids[index];
var weightLog = weight_logs[index];
console.log(index);
console.log(weightId);
console.log(this.data.labels[index]);
console.log(weightLog);
}
}
I am trying to show high charts pie chart dynamically, i pass exact value format into data index in high chart but it doesn't show anything in chart, if i give what a variable have a value directly it's working fine, but passing variable directly it show empty pie chart,
Here is my javascript code,
function get_product_chart_by_filter()
{
var product_year_raw = $('#top_least_pro_year_filt').val();
var pro_top_least = $('#top_least_pro_filt').val();
var next_year = '';
var product_year = '';
var pro_top_res = '';
if (product_year_raw.length == 4) {
next_year = parseInt(product_year_raw) + 1;
product_year = product_year_raw+'-'+next_year;
}
else {
product_year = product_year_raw;
}
if (pro_top_least == 1) {
$('#pro_top_or_least').empty().html('Top ');
}
else {
$('#pro_top_or_least').empty().html('Least ');
}
$.ajax({
type:"POST",
url:baseurl+'Dashboard/product_dashboard_dynamic',
data:{'year':product_year,'top_or_least':pro_top_least},
cache: false,
dataType: "html",
success: function(result){
pro_top_res = JSON.parse(result);
var data_series = '';
for (var i = pro_top_res.length - 1; i >= 0; i--) {
data_series += "['"+pro_top_res[i].product_name+"',"+Number(pro_top_res[i].product_order_count)+"],";
}
data_series = data_series.replace(/,\s*$/, "");
// Output of 'data_series' variable = ['Basmathi',6],['null',6],['Basmathi',6],['Basmathi',20],['Basmathi',21]
Highcharts.chart('top_5_products_container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
credits:false,
title: {
text: 'Products',
align: 'center',
verticalAlign: 'middle',
y: 60
},
tooltip: {
pointFormat: '{series.name}: <b>{point:y}</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%'],
size: '110%'
}
},
series: [{
type: 'pie',
name: 'Product',
innerSize: '50%',
data: [data_series]
}]
});
}
});
}
Here is my server side code,
public function product_dashboard_dynamic()
{
$dashboard_settings_info = get_dashboard_settings_info();
$top_or_least = $this->input->post('top_or_least');
$raw_yr = $this->input->post('year');
$exp_yr = explode('-', $raw_yr);
$yr1 = $exp_yr[0];
$yr2 = $exp_yr[1];
$top_least_count = $dashboard_settings_info->max_product_count;
$get_top_least_product = $this->Dashboard_model->get_top_least_product($top_or_least,$yr1,$yr2,$top_least_count);
echo json_encode($get_top_least_product);
}
Anyone can assist me?
My thought is that it has something to do with the use of a concatenated string rather than an array so you could perhaps try... though I have not used highcharts before
Change
var data_series = '';
for (var i = pro_top_res.length - 1; i >= 0; i--) {
data_series += "['"+pro_top_res[i].product_name+"',"+Number(pro_top_res[i].product_order_count)+"],";
}
to:
var data_series = [];
for( var i = pro_top_res.length - 1; i >= 0; i-- ) {
var obj=pro_top_res[i];
data_series.push( [ obj.product_name, parseInt( obj.product_order_count ) ] );
}
remove
data_series = data_series.replace(/,\s*$/, "");
Finally modify the configuration to accomodate new input data as an array
'series': [{
'type': 'pie',
'name': 'Product',
'innerSize': '50%',
'data':data_series
}]
Actually in my website i build a char with some data from MySQL Database.
Every time the chart button is pressed a modal will appear an AJAX call will be sent to the server and then the Chart will be drawn.
The issue is that after adding new data to database and by opening the modal with the ChartJS by moving the mouse the ChartJS tilt between chart with new data and the old one.
Here is the code
var chart;
$(function () {
renderChart();
});
function renderChart() {
var ctx = document.getElementById('barchart').getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, '#007AFD');
gradient.addColorStop(1, '#00B1FF');
var options = {
legend: false,
maintainAspectRatio: false,
tooltips: {
displayColors: false
},
scales: {
xAxes: [{
gridLines: {
display: false,
},
barPercentage: 0.3,
}],
yAxes: [{
ticks: {
stacked: true,
stepSize: 1,
beginAtZero: true,
},
gridLines: {
borderDash: [5, 15],
drawBorder: false
}
}]
}
};
chart = new Chart(ctx, { type: 'bar', labels: [], data: [] });
}
function loadReports(data) {
$.ajax({
type: "POST",
url: "Default.aspx/getReports",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ data: data }),
dataType: "json",
success: function (r) {
data = r.d;
if (data != '[]') {
data = jQuery.parseJSON(data);
chart.data.labels = data.map(ora => ora.ORARIO);
chart.data.datasets[0].data[0] = data.map(cop => cop.COPERTI);
chart.update();
} else {
chart.data.labels = [];
chart.data.datasets[0].data = [];
chart.update();
}
},
error: function (error) {
alert(error.responseText);
}
});
}
buildChart() is called on load and chart is declared on top of JS file
Are you drawing a new chart by clicking on the button?
You should draw your chart just 1 time and then update the data:
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.update();
}
function removeData(chart) {
chart.data.labels.pop();
chart.data.datasets.forEach((dataset) => {
dataset.data.pop();
});
chart.update();
}
Docs: https://www.chartjs.org/docs/latest/developers/updates.html
you can try it with this code:
$.ajax({
type: "POST",
url: "Default.aspx/getReports",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ data: data }),
dataType: "json",
success: function(r) {
data = r.d;
if (data != "[]") {
data = jQuery.parseJSON(data);
chart.data.labels = data.map(ora => ora.ORARIO);
chart.data.datasets[0].data = data.map(coperti => coperti.COPERTI);
chart.update();
} else {
chart.data.labels = [];
chart.data.datasets[0].data = [];
chart.update();
}
$("#modalChart").modal("show");
},
error: function(error) {
alert(error.responseText);
}
});
I need to display a bar chart that I must make with chartJs with dynamic data, I get these dynamic data from an xml link.
I work with two datafields: TaskName and TaskPercentCompleted
The final result must be something like this:
https://scontent.ftun3-1.fna.fbcdn.net/v/t1.15752-9/67290623_1101713790034749_6213821876259520512_n.png?_nc_cat=107&_nc_oc=AQkVef74ok1IcC0m0ujX4t7c4EhNAEs0C-lejsBTHCj9U2zrFRo2UA_gWnuOeA4ZJco&_nc_ht=scontent.ftun3-1.fna&oh=e8503be685f36c7440362b5a0d3c85f5&oe=5DA3B54E
And this is a part of the xml link:
https://scontent.ftun3-1.fna.fbcdn.net/v/t1.15752-9/66803472_2156647134463530_3324310068698021888_n.png?_nc_cat=100&_nc_oc=AQmuJ-gA1lT7F-whtw329vy_eciZoCWNn5hxCW2Zdp4X_RBfyZknVR1Bza-UF_nDn7s&_nc_ht=scontent.ftun3-1.fna&oh=d6ced2436a0c666be4dfd4fe5138a72f&oe=5DAADE21
I got a code but it doesn't work the way I want, it's regrouping data and I don't want that.
window.addEventListener('load',function() {
var dataURL = _spPageContextInfo.webAbsoluteUrl + "/_api/ProjectData/[en-US]/Tasks?$select=TaskName,TaskPercentCompleted&$filter=ProjectName%20eq%20%27Bay%20Plaza%27%20and%20TaskIsSummary%20eq%20true%20and%20TaskIsProjectSummary%20eq%20false";
$.ajax({
url: dataURL,
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success: function(data) {
var dataResults = data.d.results;
var itermeidiaryObject = {};
$.each(dataResults, function(key, value) {
var nomTask = value.TaskName;
var epn = value.TaskPercentCompleted;
if (epn != null) {
itermeidiaryObject[epn] = ++itermeidiaryObject[epn] || 1;
}
});
var finalObject = Object.keys(itermeidiaryObject).map(function(key) {
return {
label: itermeidiaryObject[key],
y: key
}
});
var pievalues = finalObject.map(function(value, index) {
return value.y;
});
var labels = finalObject.map(function(value, index) {
return value.label;
});
var colorscheme = colors.slice(0, labels.length);
var ctx = document.getElementById('myChart2').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
data: pievalues,
backgroundColor: colorscheme
}]
},
options: {
responsive: true,
scales: {
xAxes: [{
ticks: {
beginAtZero: true // Edit the value according to what you need
}
}],
yAxes: [{
stacked: true
}]
},
title: {
display: true,
position: "top",
text: "Nombre de projets par direction",
fontSize: 18,
fontColor: "#111"
},
legend: {
display: false
}
}
});
}
});
});
var colors = ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"];
I solved the problem
window.addEventListener('load',function() {
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/ProjectData/[en-US]/Tasks?$select=TaskName,TaskPercentCompleted&$filter=ProjectName%20eq%20%27Bay%20Plaza%27%20and%20TaskIsSummary%20eq%20true%20and%20TaskIsProjectSummary%20eq%20false",
method: "GET",
headers: { "Accept": "application/json; odata=nometadata" },
success: function (data) {
if (data.value.length > 0) {
var pieValues = [];
var pieLabels = [];
for (var i = 0; i < data.value.length; i++) {
pieValues.push(parseInt(data.value[i].TaskPercentCompleted));
pieLabels.push(data.value[i].TaskName);
}
var pieData = {
datasets: [{
data: pieValues,
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850",
"#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850",
"#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850",
"#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850",
"#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850",
"#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
}],
labels: pieLabels
};
var ctx = document.getElementById("myChart2");
var myPieChart = new Chart(ctx, {
//type: 'pie',
type: 'bar',
data: pieData,
options: {
responsive: true,
legend: { display: false },
title: {
display: true,
text: 'Nom de tâche par pourcentage'
},
scales: {
xAxes: [{
ticks: {
maxRotation: 90,
minRotation: 90,
display: false
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
},
error: function (data) {
//
}
});
});