Click here to Skip to main content
15,506,385 members
Home / Discussions / JavaScript
   

JavaScript

 
QuestionJavascript cookies Pin
Member 158197443-Nov-22 21:46
Member 158197443-Nov-22 21:46 
AnswerRe: Javascript cookies Pin
Jeremy Falcon17-Nov-22 14:32
professionalJeremy Falcon17-Nov-22 14:32 
Questionwhy javascript onchange not triggered for persian characters ? Pin
shaho zakaryaee23-Oct-22 22:47
shaho zakaryaee23-Oct-22 22:47 
AnswerRe: why javascript onchange not triggered for persian characters ? Pin
Richard Deeming23-Oct-22 22:49
mveRichard Deeming23-Oct-22 22:49 
AnswerRe: why javascript onchange not triggered for persian characters ? Pin
shaho zakaryaee23-Oct-22 22:58
shaho zakaryaee23-Oct-22 22:58 
GeneralRe: why javascript onchange not triggered for persian characters ? Pin
Jeremy Falcon26-Oct-22 12:10
professionalJeremy Falcon26-Oct-22 12:10 
QuestionDodger game with eventListener Pin
Ali Ibrahim jasim16-Oct-22 3:54
Ali Ibrahim jasim16-Oct-22 3:54 
AnswerRe: Dodger game with eventListener Pin
Jeremy Falcon26-Oct-22 12:26
professionalJeremy Falcon26-Oct-22 12:26 
QuestionHTML5 Nested drag and drop using vuejs2 Pin
Maseeha K1-Oct-22 0:40
Maseeha K1-Oct-22 0:40 
AnswerRe: HTML5 Nested drag and drop using vuejs2 Pin
Jeremy Falcon26-Oct-22 12:12
professionalJeremy Falcon26-Oct-22 12:12 
Questiontrying to get to grips with parsing from a JSON file Pin
DSB Audio (David Sweeney-Bear)30-Sep-22 5:22
DSB Audio (David Sweeney-Bear)30-Sep-22 5:22 
AnswerRe: trying to get to grips with parsing from a JSON file Pin
Richard MacCutchan30-Sep-22 5:53
mveRichard MacCutchan30-Sep-22 5:53 
GeneralRe: trying to get to grips with parsing from a JSON file Pin
DSB Audio (David Sweeney-Bear)30-Sep-22 6:42
DSB Audio (David Sweeney-Bear)30-Sep-22 6:42 
GeneralRe: trying to get to grips with parsing from a JSON file Pin
Richard MacCutchan30-Sep-22 6:49
mveRichard MacCutchan30-Sep-22 6:49 
GeneralRe: trying to get to grips with parsing from a JSON file Pin
DSB Audio (David Sweeney-Bear)30-Sep-22 8:57
DSB Audio (David Sweeney-Bear)30-Sep-22 8:57 
GeneralRe: trying to get to grips with parsing from a JSON file Pin
Dom8615-Nov-22 5:33
Dom8615-Nov-22 5:33 
GeneralRe: trying to get to grips with parsing from a JSON file Pin
DSB Audio (David Sweeney-Bear)30-Sep-22 6:35
DSB Audio (David Sweeney-Bear)30-Sep-22 6:35 
GeneralRe: trying to get to grips with parsing from a JSON file Pin
Richard MacCutchan30-Sep-22 6:50
mveRichard MacCutchan30-Sep-22 6:50 
AnswerRe: trying to get to grips with parsing from a JSON file Pin
DSB Audio (David Sweeney-Bear)30-Sep-22 11:12
DSB Audio (David Sweeney-Bear)30-Sep-22 11:12 
QuestionSecond chart not react to data entered, why? Explain, please, how to solve the issue? Pin
Earl Lembertas27-Sep-22 11:35
Earl Lembertas27-Sep-22 11:35 
Hey, guys Wink | ;)

Im new in JS, but interested in this lnguage and want to learn.

Now playing (learning) a little with charts and bumped into issue - there are two charts, but just one show the data user enter, why one? For second chart I set data from same variable, I think.

Here is the code:

JavaScript
<div class="chartMenu">
      <p>ChartAi</p>
    </div>
    <div class="chartCard">
      <div class="chartBox">
        <div>
            <canvas id="myChart"></canvas>
          </div>

          <div>
            <canvas id="lineChart"></canvas>
          </div>

        <br>
        <hr>
        <label>Investment Sum:</label><input onchange="updateChart()" id="investmentamount" type="number" value="9000"><br>
        <label>Profit sum:</label><input onchange="updateChart()" id="profitamount" type="number" value="1000"><br>
        <label>Investment time:</label><input onchange="updateChart()" id="years" type="number" step="0.1" value="2.5"><br>
        <br>
        <hr>
        <table>
            <tr>
                <td>Investmen Amount</td>
                <td>Eur <span id="cellinvestment">9000</span></td>
            </tr>
            <tr>
                <td>Profit Amount</td>
                <td>Eur <span id="cellprofit">1000</span></td>
            </tr>
            <tr>
                <td>Duration</td>
                <td> <span id="cellyears">2.5</span></td>
            </tr>
            <tr>
                <td>ROI in %</td>
                <td> <span id="cellroi">11.11</span>%</td>
            </tr>
            <tr>
                <td>Annualized Return:</td>
                <td> <span id="cellanuallized">4.3</span>%</td>
            </tr>
        </table>
      </div>
     
      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
      ////////////////////////////////PIE Chart////////////////
    ////////////////////////////////// SETUP/////////////////// 
    const investmentamount = document.getElementById("investmentamount");
    const profitamount = document.getElementById("profitamount");
    const years = document.getElementById("years");
    const data = {
      labels: ['Investment', 'Profit'],
      datasets: [{
        label: 'ROI',
        data: [investmentamount.value, profitamount.value],
        backgroundColor: [
          'rgba(255, 26, 104, 1)',
          'rgba(54, 162, 235, 1)',
        ],
        label: 'Profit',
        borderColor: [
        'rgba(255, 26, 104, 1)',
          'rgba(54, 162, 235, 1)',
        ],

      }]
    };

    ///////////////////////////////////////////CONFIG///////////// 
    const config = {
      type: 'pie',
      data,
      options: {
       
      }
    };

    /////////////////////////////RENDER BLOCK///////////////////
    const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );
    ///////////////////////////2AS Copy/////////////////////
    ////////////////////////////SETUP DouChart////////////////
    // const investmentamountD = document.getElementById("investmentamount");
    // const profitamountD = document.getElementById("profitamount");
    // const yearsD = document.getElementById("years");
    // const dataD = {
    //   labels: ['Investment', 'Profit'],
    //   datasets: [{
    //     label: 'ROI',
    //     data: [investmentamountD.value, profitamountD.value],
    //     backgroundColor: [
    //       'rgba(255, 26, 104, 1)',
    //       'rgba(54, 162, 235, 1)',
    //     ],
    //     label: 'Profit',
    //     borderColor: [
    //     'rgba(255, 26, 104, 1)',
    //       'rgba(54, 162, 235, 1)',
    //     ],

    //   }]
    // };
    ///////////ConfigAs
    const config2 = {
      type: 'doughnut',
      data,
      options: {
       
      }
    };
    //////////////////////////RENDER lineChart//////////////////
    const lineChart = new Chart(
      document.getElementById('lineChart'),
      config2
    );
    
////////////////////////////////////////////////////////////////////////
    function updateChart() {
        //input of function
        myChart, myChart.config.data.datasets[0].data = [investmentamount.value, profitamount.value];
        myChart, myChart.update();
        //function2
        calculator();
    };

    function calculator(){
        const cellinvestment = document.getElementById("cellinvestment");
        cellinvestment.innerText = investmentamount.value;

        const cellprofit = document.getElementById("cellprofit");
        cellprofit.innerText = profitamount.value;

        const cellyears = document.getElementById("cellyears");
        cellyears.innerText = years.value;

        const cellroi = document.getElementById("cellroi");
        const roi = profitamount.value / investmentamount.value * 100;
        cellroi.innerText = roi.toFixed(2);

        const returnedAmount = profitamount.value + investmentamount.value;

        const cellanuallized = document.getElementById("cellanuallized");
        const annualizedReturn = (returnedAmount / investmentamount.value) ** (1 / parseFloat(years.value)) -1;
        const annualizedPercentage = annualizedReturn * 100;
        cellanuallized.innerText = annualizedPercentage.toFixed(1);
    };
    

    
   
    </script>



Help me with solvation of this issue, please! Wink | ;)
AnswerRe: Second chart not react to data entered, why? Explain, please, how to solve the issue? Pin
Pete O'Hanlon27-Sep-22 21:46
mvaPete O'Hanlon27-Sep-22 21:46 
GeneralRe: Second chart not react to data entered, why? Explain, please, how to solve the issue? Pin
Earl Lembertas28-Sep-22 1:00
Earl Lembertas28-Sep-22 1:00 
GeneralRe: Second chart not react to data entered, why? Explain, please, how to solve the issue? Pin
Pete O'Hanlon28-Sep-22 5:26
mvaPete O'Hanlon28-Sep-22 5:26 
QuestionWhy doesn't this script work as expected? Pin
DSB Audio (David Sweeney-Bear)24-Sep-22 4:39
DSB Audio (David Sweeney-Bear)24-Sep-22 4:39 
AnswerRe: Why doesn't this script work as expected? Pin
DSB Audio (David Sweeney-Bear)24-Sep-22 8:43
DSB Audio (David Sweeney-Bear)24-Sep-22 8:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.