We Keep Coding

Creating a pie chart inside a donut chart in apexcharts

I am trying to add a chart in apexcharts which is a pie chart inside a donut, looks like this example, which uses chart.js:
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: [],
datasets: [{
backgroundColor: [
"#2ecc71",
"#3498db",
],
data: [433, 44]
}]
}
});
</script>
and I couldn't find a way to do that.
I would have used the example in the link I've added, but it looks laggy (hovering isn't good) and it isn't very responsive.

Unable to display dates and values on Chart.js

I have the following data stored in array:
var labelItems= ["3/27/20", "3/28/20", "3/29/20", "3/30/20", "3/31/20", "4/1/20", "4/2/20", "4/3/20", "4/4/20", "4/5/20", "4/6/20", "4/7/20", "4/8/20", "4/9/20", "4/10/20"]
var dataSets= [27198, 30652, 33925, 37582, 42107, 46809, 52983, 58787, 64606, 69374, 74565, 81865, 88338, 95455, 102525]
I have initialzed my line chart as follows:
var ctx = document.getElementById('lineChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: labelItems,
datasets: [{
label: 'Deaths',
borderColor: 'rgb(255, 99, 132)',
data: dataSets
}]
},
// Configuration options go here
options: {}
});
My issue is that the dates, that is the labels are not displaying on the x-axis nor the datasets on the y-axis. Can someone please help with this?

As the documentation say, you have to add the parser and tooltipFormat properties to the axis (x or y) in order to display the value.
var ctx = document.getElementById('lineChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: labels,
datasets: [{
label: 'Deaths',
borderColor: 'rgb(255, 99, 132)',
data: dataSets
}]
},
// Configuration options go here
options: {
scales: {
xAxis: [
display: true,
type: 'time'
time: {
parser: 'MM/DD/YYYY HH:mm',
tooltipFormat: 'll HH:mm',
unit: 'day',
unitStepSize: 1,
displayFormats: {
'day': 'MM/DD/YYYY'
}
}
]
}
}
});

How to properly feed data to ChartJS with different number of x(labels) and y(data) points

I have a dataset that has data something like this
var data =[10,30,20,50,80,60,120,40,20,90,30,10];
var labels = [moment("12:00:00", 'HH:mm:ss'),moment("12:00:01", 'HH:mm:ss'),moment("12:00:02", 'HH:mm:ss'),moment("12:00:03", 'HH:mm:ss')];
I fed the data to chartJS like this
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Voltage Fluctuation',
data: [10,20,30,40,50],
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'minute',
displayFormats: {
hour: 'HH:mm:ss'
}
}
}]
},
}
});
However, I'm only getting data for the first four points i.e for each label.
Here's the JSFiddle
I want the data to be distributed for all the labels, in this case one data point for every (4/12)seconds and adjust the graph accordingly.
Is there any possible way I can achieve that without hardcoding it by converting the labels to milliseconds format?

I went ahead and hardcoded the entire thing by chopping seconds into milliseconds in order to create arrays of equal length

ChartJS not displaying properly in AJAX called page

I am using the latest version of chart JS (2.5.0) and trying to get 2 polar area charts to appear in a page that has the content of the page loaded in VIA ajax. Here are my two polar charts (I will omit the rest of the code as it is not pertinent to this):
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'polarArea',
options: {
responsive: true
}
data: {
labels: ["Head", "Chest", "Stomach", "Left Arm", "Right Arm", "Left Leg", "Right Leg"],
datasets: [{
backgroundColor: [
"#1AFF05",
"#0D9900",
"#197011",
"#1E4A1A",
"#4C4D4C",
"#81917F",
"#B5F7B0"
],
data: <?php getHitBoxPercents($player);?>
// data: [12, 19, 3, 17, 28, 24, 7]
}]
}
});
</script>
And Chart 2:
<canvas id="myChart1v1"></canvas>
<script>
var ctx1v1 = document.getElementById("myChart1v1").getContext('2d');
var myChart1 = new Chart(ctx1v1, {
type: 'polarArea',
options: {
responsive: true
}
data: {
labels: ["Head", "Chest", "Stomach", "Left Arm", "Right Arm", "Left Leg", "Right Leg"],
datasets: [{
backgroundColor: [
"#1AFF05",
"#0D9900",
"#197011",
"#1E4A1A",
"#4C4D4C",
"#81917F",
"#B5F7B0"
],
data: <?php getHitBoxPercents($player);?>
// data: [12, 19, 3, 17, 28, 24, 7]
}]
}
});
</script>
These are both in Tab menus which all works fine but here are the weird things:
The first chart doesn't load properly at all, it loads the "outline" of the chart but no data, although the data is all set properly in the javascript and it works just fine if I take away the second chart. See picture: Puush Image
The chart from the second bit of code works perfectly: Puush Image 2
If I press the button to generate the ajax again (a form with a search button to find matching records) The first chart goes away completely (code is all still there) and the second chart still works just fine. Puush example of this
Maybe the key to this whole thing: If I resize the page the chart appears, regardless of if I reload the ajax in the page and the chart all disappears all I have to do is resize the page (go to half size then maximize again) and it works, both charts. I don't know why or how to fix this but I don't want that to be the only solution.
EDIT: I am trying to fix mine according to this fiddle but it isn't working: fiddle The new code I am trying to use:
$(function(){
var chart_polar_options = {
responsive: true
};
var data1v1 = {
labels: ["Head", "Chest", "Stomach", "Left Arm", "Right Arm", "Left Leg", "Right Leg"],
datasets: [{
backgroundColor: [
"#1AFF05",
"#0D9900",
"#197011",
"#1E4A1A",
"#4C4D4C",
"#81917F",
"#B5F7B0"
],
data: <?php getHitBoxPercents($player);?>
}]
};
var ctx1v1 = document.getElementById("myChart1v1").getContext('2d');
var myChart1 = new Chart(ctx1v1, {
type: 'polarArea',
options: {
responsive: true
},
data: data1v1
});
$('#tab2').on('shown.bs.tab', function (e) {
myChart1.destroy();
myChart1 = new Chart(ctx1v1, {
type: 'polarArea',
options: {
responsive: true
},
data: data1v1
});
});
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'polarArea',
options: {
responsive: true
},
data: data1v1
});
$('#tab1').on('shown.bs.tab', function (e) {
myChart.destroy();
myChart = new Chart(ctx, {
type: 'polarArea',
options: {
responsive: true
},
data: data1v1
});
});
});
The problem with the code above is neither load until I resize the browser but it is pulling in the charts, they just look blank.

charts.js not updating after ajax request

I'm a complete newb with js and jquery but have muddled my way through getting a chart to properly display using Flask and an Ajax request. Where I'm having a problem is getting the charts data to refresh. I can get the chart to display just fine if I create it as a new chart as shown in the code below
$(document).ready(function() {
var getdata = $.post('/charts');
var ctx = document.getElementById('myChart').getContext('2d');
var myChart
getdata.done(function(results){
var chartData = {
labels: results['month'],
datasets: [{
label: 'Debits',
data: results['debit'],
backgroundColor: "rgba(153,255,51,0.4)"
}, {
label: 'Credits',
data: results['credit'],
backgroundColor: "rgba(255,153,0,0.4)"
}, {
label: 'Balance',
data: results['balance'],
backgroundColor: "rgba(50,110,0,0.4)"
}]
}
myChart = new Chart(ctx, {type: 'line', data: chartData});
});
$("form :input").change(function() {
year = $(this).val();
console.log(year)
$.ajax({
type: "POST",
url: "/data",
data: {'year':year},
success: function(results){
var updatedData = {
labels : results['month'],
datasets : [{
label: 'Debits',
data: results['debit'],
backgroundColor: "rgba(153,255,51,0.4)"
}, {
label: 'Credits',
data: results['credit'],
backgroundColor: "rgba(255,153,0,0.4)"
}, {
label: 'Balance',
data: results['balance'],
backgroundColor: "rgba(50,110,0,0.4)"
}]
}
myChart= new Chart(ctx, {type: 'line', data: updatedData});
}
});
});
});
But if I change the last line to
myChart.update(updatedData)
nothing happens, I don't get any errors, the chart doesn't update. Nothing. The strange thing is that I know the myChart is global because I don't have to create it again after the Ajax request.
Thanks

From the documentation of charts.js (http://www.chartjs.org/docs/#getting-started-creating-a-chart), you first need to change data and then call update (arguments for update function are not the data, but duration etc.):
.update(duration, lazy)
Triggers an update of the chart. This can be safely called after replacing the entire data object. This will update all scales, legends, and then re-render the chart.
// duration is the time for the animation of the redraw in milliseconds
// lazy is a boolean. if true, the animation can be interrupted by other animations
myLineChart.data.datasets[0].data[2] = 50; // Would update the first dataset's value of 'March' to be 50
myLineChart.update(); // Calling update now animates the position of March from 90 to 50.
So in your case:
myChart.data = updatedData;
myChart.update();