Menu
I'm having a problem with the chart generation when it has only one data to show and holds all 360º. Here's the example:
<!doctype html>
<html>
<head>
<title>Chart Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.js"></script>
</head>
<body>
<canvas width="200" height="200"></canvas>
<script>
var canvas = $( 'canvas' )
, data = [
{
value : 300,
color : "#F7464A",
highlight : "#FF5A5E",
label : "Red"
}
]
, options = {"percentageInnerCutout":70,"showTooltips":false,"animateScale":true}
, chart = new Chart( canvas.get( 0 ).getContext( '2d' ) ).Doughnut( data, options );
</script>
</body>
</html>Just after the chart ends the 360º animation on the Android default browser, it disapears but it doesn't happen on the Chrome. Tested on the Sony Xperia (v4.1.2) and Samsung S3.
On my desktop this problem doesn't happen so it looks like it's related with the default Android browser.
I've also tested with the lastest chart.js version 1.0.1-beta.4...
There's an open issue on github for this.
Has anyone solved this problem?
446
After a couple of days searching for a workaround for this and since I didn't get any response until now, I made some tests to identify the minimum supported value for it to work properly. Right now, I have it working on the devices mentioned before.
On the following example there are various test values for the "data" array so feel free to test them and new ones to identify any bug.
So here's what I came up with:
<!doctype html>
<html>
<head>
<title>Chart Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.js"></script>
</head>
<body>
<canvas width="300" height="300"></canvas>
<script>
var canvas = $( 'canvas' )
, lowestValue = 0.001 // Minimum supported value
, highestValue = 0
, emptySection = {
value : lowestValue
, color : '#e8e8e8'
, highlight : '#e8e8e8'
, label : ''
}
, data = []
/*, data = [
{
value : 0
, color : '#F7464A'
, highlight : '#FF5A5E'
, label : 'Red'
}
]
, data = [
{
value : 1
, color : '#F7464A'
, highlight : '#FF5A5E'
, label : 'Red'
}
]
, data = [
{
value : 0
, color : '#F7464A'
, highlight : '#FF5A5E'
, label : 'Red'
}
, {
value : 0
, color : '#15D42F'
, highlight : '#15D42F'
, label : 'Green'
}
]
, data = [
{
value : 0
, color : '#F7464A'
, highlight : '#FF5A5E'
, label : 'Red'
}
, {
value : 1
, color : '#15D42F'
, highlight : '#15D42F'
, label : 'Green'
}
]
, data = [
{
value : 1
, color : '#F7464A'
, highlight : '#FF5A5E'
, label : 'Red'
}
, {
value : 0
, color : '#15D42F'
, highlight : '#15D42F'
, label : 'Green'
}
]
, data = [
{
value : 1
, color : '#F7464A'
, highlight : '#FF5A5E'
, label : 'Red'
}
, {
value : 2
, color : '#15D42F'
, highlight : '#15D42F'
, label : 'Green'
}
]
, data = [
{
value : 0.000001
, color : '#F7464A'
, highlight : '#FF5A5E'
, label : 'Red'
}
, {
value : 0.0058
, color : '#15D42F'
, highlight : '#15D42F'
, label : 'Green'
}
, {
value : 1
, color : '#FAEC23'
, highlight : '#FAEC23'
, label : 'Yellow'
}
]
, data = [
{
value : 0.00
, color : '#F7464A'
, highlight : '#FF5A5E'
, label : 'Red'
}
, {
value : 0.00
, color : '#15D42F'
, highlight : '#15D42F'
, label : 'Green'
}
, {
value : 0.00
, color : '#15D42F'
, highlight : '#15D42F'
, label : 'Green'
}
, {
value : 0.00
, color : '#15D42F'
, highlight : '#15D42F'
, label : 'Green'
}
, {
value : 0.00
, color : '#15D42F'
, highlight : '#15D42F'
, label : 'Green'
}
, {
value : 0.00
, color : '#15D42F'
, highlight : '#15D42F'
, label : 'Green'
}
, {
value : 0.00
, color : '#15D42F'
, highlight : '#15D42F'
, label : 'Green'
}
, {
value : 0.00
, color : '#15D42F'
, highlight : '#15D42F'
, label : 'Green'
}
, {
value : 0.00
, color : '#15D42F'
, highlight : '#15D42F'
, label : 'Green'
}
, {
value : 1
, color : '#FAEC23'
, highlight : '#FAEC23'
, label : 'Yellow'
}
]*/
, options = {
'percentageInnerCutout': 70
, 'showTooltips' : false
, 'animateScale' : true
}
, chart = {};
// If there are no valid segments, include two new ones an set the value of one of them to 1
// so that the chart appears.
if ( data.length === 0 ) {
data.push( $.extend( true, {}, emptySection ) );
data.push( $.extend( true, {}, emptySection ) );
data[ 0 ].value = 1;
// Even if there are segments, we add a new one with one of the values:
// - 10: if the highest value of any segment is lower that the lowest allowed (0.001).
// - 0.001 of the highest value
} else {
$.each( data, function( index, el ) {
el.value = el.value < lowestValue ? lowestValue : el.value;
highestValue = el.value > highestValue ? el.value : highestValue;
});
data.push( $.extend( true, {}, emptySection ) );
// Set the value of the new segment.
// Get 0.001% of the highest value if it's greater that the lowest allowed.
// If it's not greater that the lowest allowed, set it to a value big enought so the other segments don't appear.
data[ data.length - 1 ].value = highestValue > lowestValue ? determinePercentage( highestValue ) : 10;
}
// Create the chart.
chart = new Chart( canvas.get( 0 ).getContext( '2d' ) ).Doughnut( data, options );
/**
* Determines a specific percentage of a value. If no percentage is passed it assumes the lowest allowed (0.001).
*/
function determinePercentage( total, percentage ) {
percentage = percentage || lowestValue;
return total ? ( parseFloat( total ) * percentage ) / 100 : 0;
}
</script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With