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.

Any suggestion on how to override Chart JS Donut library

I have added a donut chart as shown below without the numbers.
I wanted to make the outer-border fixed like the first picture shown below and hide the inner border and I have used Chart JS.
Any way I can do that as the chart JS default there is only border-color?
var ctx = document.getElementById('freeChart');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: [30,70],
backgroundColor: ['#9f9fa6'],
borderColor: ['#9f9fa6','#9f9fa6'],
}],
},
options:{
cutoutPercentage: 80,
elements: {
arc: {
borderWidth: 1
}
}
}
});

Unable to plot JSON to chartJS

I'm trying to plot a dataset into a chartJS line chart:
This is my data:
[{"close":0.00786609},{"close":0.00784},{"close":0.00784},
{"close":0.00780507},{"close":0.007816},{"close":0.00781599},
{"close":0.00780166},{"close":0.00778403},{"close":0.00782001},
{"close":0.0078},{"close":0.00778},{"close":0.007799},
{"close":0.00775057},{"close":0.0077688},{"close":0.00775001}]
This is my code:
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
datasets: [{
label: "My First dataset",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: <%= JSON.stringify(prices) %>,
}]
},
// Configuration options go here
options: {}
});
How can I fix this?

You have configured your chart to be of type "line". The documentation for this type specifies that a dataset's data can be an Array of Numbers or an Array of Points, where a Point is an Object with a x property and a y property.
Your data is a JSON stringified Array of objects, each with a close property.
You need to map your prices Array into an Array of Numbers. In JavaScript, this could be done as:
prices.map(function (price) {
return price.close;
});
I have created a fiddle as an example.

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

Chart.js t.ticks.map is not a function

Both results and labels come from the server but they seem alright. When I run this code I don't get any graphics. I'm using the chart.js from the CDN.
EDIT: Clarification, both results and data come from the code. They are not hardcoded as they look in the example.
The errors I get say:
t.ticks.map is not a function
Unable to get property 'skip' of undefined or null reference
The code:
<canvas id="myChart" width="400" height="400"></canvas>
var ctx = document.getElementById("myChart").getContext("2d");
var result = [0, 0, 0];
var lbls = ['A', 'B', 'C'];
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: lbls.split(','),
datasets: [{
label: '# of Votes',
data: result
}]
}
});
Any suggestion about another chart utility is welcome too.

The labels requires a array variable but the var lbls = $('#lbls').html() returns a string so splitting it with ',' will do the job
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: lbls.split(','),
datasets: [{
label: '# of Votes',
data: [20, 10]
}]
}
});