CODEWITHSUNDEEP
javascriptcanvasinput
Tore Bonnerup
Tore Bonnerup

Reputation: 1

User input data to a create Canvas element pie chart

I want to create an element, where the end-user can enter its information, and the result is shown in a pie chart.

I have borrowed a pre-made pie chart, and when inserting the data as fixed numbers, there is no issue, it shows the right distribution.

However when adding a user input in this example a range type to substitute one of the data points, it is not showing the results. What am I missing here?

<canvas id="test_canvas" width="400" height="250"></canvas>

<input id="danmark" type="range" min="1000" max ="3000" step="100" placeholder ="2500" value="2500" oninput="myFunction()" > 

<script>



// pie chart drawings
function drawPieChart( data, colors, title ){ 
    var canvas = document.getElementById( "test_canvas" ); 
    var context = canvas.getContext( "2d" ); 
 
    // get length of data array 
    var dataLength = data.length; 
    // declare variable to store the total of all values 
    var total = 0; 
 
    // calculate total 
    for( var i = 0; i < dataLength; i++ ){ 
        // add data value to total 
        total += data[ i ][ 1 ]; 
    } 
 
    // declare X and Y coordinates of the mid-point and radius 
    var x = 100; 
    var y = 100; 
    var radius = 100; 
 
    // declare starting point (right of circle) 
    var startingPoint = 0; 
 
    for( var i = 0; i < dataLength; i++ ){ 
        // calculate percent of total for current value 
        var percent = data[ i ][ 1 ] * 100 / total; 
 
        // calculate end point using the percentage (2 is the final point for the chart) 
        var endPoint = startingPoint + ( 2 / 100 * percent ); 
 
        // draw chart segment for current element 
        context.beginPath();    
        // select corresponding color 
        context.fillStyle = colors[ i ]; 
        context.moveTo( x, y ); 
        context.arc( x, y, radius, startingPoint * Math.PI, endPoint * Math.PI );     
        context.fill(); 
 
        // starting point for next element 
        startingPoint = endPoint;  
  
        // draw labels for each element 
        context.rect( 220, 25 * i, 15, 15 ); 
        context.fill(); 
        context.fillStyle = "black"; 
        context.fillText( data[ i ][ 0 ] + " (" + data[ i ][ 1 ] + ")", 245, 25 * i + 15 ); 
  }
    // draw title 
    context.font = "20px Arial"; 
    context.textAlign = "center"; 
    context.fillText( title, 100, 225 );  
}

function myFunction () {

var Danmark = document.getElementbyId('danmark').value;

var Norge = 850;

var Sverige = 2400;

var Finland = 1000;

var Holland = 3000;

}  

// the data, which needs to be calculated based on user input variables. 
var data = [ [ "Danmark", Danmark ], [ "NL", Holland ], [ "NO", Norge ], [ "SE", Sverige ], [ "FI", Finland ] ]; 
var colors = [ "red", "orange", "green", "blue", "purple"  ];  
  
// using the function  
drawPieChart( data, colors, "Sales" );  


</script> 

```

Upvotes: 0

Views: 115

Answers (2)

Ben Copeland
Ben Copeland

Reputation: 31

At the beginning of your drawPieChart function, under your context variable you'll need to add context.clearRect(0, 0, canvas.width, canvas.height);. This will clear the canvas for the next draw, otherwise it will just draw on top of what's already there and you won't be able to see the changes.

So it will look like this:

  function drawPieChart( data, colors, title ){
    var canvas = document.getElementById( "test_canvas" );
    var context = canvas.getContext( "2d" );
    context.clearRect(0, 0, canvas.width, canvas.height);

Upvotes: 0

Ahmad Habib
Ahmad Habib

Reputation: 2384

You have a typo in

var Danmark = document.getElementbyId('danmark').value;

It should be getElementById not getElementbyId.

Another thing. When you get value from input or textarea it returns string value by default. You have to convert that value in the number format.

let Danmark = document.getElementById('danmark').value;
let converted = parseInt(Danmark);

function checkVals() {
console.log(typeof Danmark);
console.log(typeof converted);
}
<textarea id="danmark" onchange="checkVals()"></textarea>

Upvotes: 1

Related Questions