Click here to Skip to main content
15,868,016 members
Home / Discussions / JavaScript
   

JavaScript

 
GeneralRe: trying to get to grips with parsing from a JSON file Pin
Richard MacCutchan30-Sep-22 5:49
mveRichard MacCutchan30-Sep-22 5:49 
GeneralRe: trying to get to grips with parsing from a JSON file Pin
DSB Audio (David Sweeney-Bear)30-Sep-22 7:57
DSB Audio (David Sweeney-Bear)30-Sep-22 7:57 
GeneralRe: trying to get to grips with parsing from a JSON file Pin
Dom8615-Nov-22 4:33
Dom8615-Nov-22 4:33 
GeneralRe: trying to get to grips with parsing from a JSON file Pin
DSB Audio (David Sweeney-Bear)30-Sep-22 5:35
DSB Audio (David Sweeney-Bear)30-Sep-22 5:35 
GeneralRe: trying to get to grips with parsing from a JSON file Pin
Richard MacCutchan30-Sep-22 5:50
mveRichard MacCutchan30-Sep-22 5:50 
AnswerRe: trying to get to grips with parsing from a JSON file Pin
DSB Audio (David Sweeney-Bear)30-Sep-22 10:12
DSB Audio (David Sweeney-Bear)30-Sep-22 10:12 
AnswerRe: trying to get to grips with parsing from a JSON file Pin
jkirkerx14-Dec-22 12:25
professionaljkirkerx14-Dec-22 12:25 
QuestionSecond chart not react to data entered, why? Explain, please, how to solve the issue? Pin
Earl Lembertas27-Sep-22 10:35
Earl Lembertas27-Sep-22 10: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 20:46
subeditorPete O'Hanlon27-Sep-22 20:46 
GeneralRe: Second chart not react to data entered, why? Explain, please, how to solve the issue? Pin
Earl Lembertas28-Sep-22 0:00
Earl Lembertas28-Sep-22 0:00 
GeneralRe: Second chart not react to data entered, why? Explain, please, how to solve the issue? Pin
Pete O'Hanlon28-Sep-22 4:26
subeditorPete O'Hanlon28-Sep-22 4:26 
QuestionWhy doesn't this script work as expected? Pin
DSB Audio (David Sweeney-Bear)24-Sep-22 3:39
DSB Audio (David Sweeney-Bear)24-Sep-22 3:39 
AnswerRe: Why doesn't this script work as expected? Pin
DSB Audio (David Sweeney-Bear)24-Sep-22 7:43
DSB Audio (David Sweeney-Bear)24-Sep-22 7:43 
AnswerRe: Why doesn't this script work as expected? Pin
Richard Deeming25-Sep-22 21:42
mveRichard Deeming25-Sep-22 21:42 
GeneralRe: Why doesn't this script work as expected? Pin
DSB Audio (David Sweeney-Bear)30-Sep-22 4:16
DSB Audio (David Sweeney-Bear)30-Sep-22 4:16 
GeneralRe: Why doesn't this script work as expected? Pin
DSB Audio (David Sweeney-Bear)30-Sep-22 4:31
DSB Audio (David Sweeney-Bear)30-Sep-22 4:31 
AnswerRe: Why doesn't this script work as expected? Pin
Jeremy Falcon26-Oct-22 11:36
professionalJeremy Falcon26-Oct-22 11:36 
QuestionCan sending a large number of requests to the server cause any performance issues on the server? Pin
Alex Wright 202221-Sep-22 8:33
Alex Wright 202221-Sep-22 8:33 
AnswerRe: Can sending a large number of requests to the server cause any performance issues on the server? Pin
Richard Deeming21-Sep-22 21:40
mveRichard Deeming21-Sep-22 21:40 
QuestionMultiple popup windows - information is the same in all of them Pin
BartekDD21-Sep-22 2:02
BartekDD21-Sep-22 2:02 
QuestionOne big collection or nested collections Pin
waldette 202214-Sep-22 11:35
waldette 202214-Sep-22 11:35 
AnswerRe: One big collection or nested collections Pin
Pete O'Hanlon14-Sep-22 20:54
subeditorPete O'Hanlon14-Sep-22 20:54 
GeneralRe: One big collection or nested collections Pin
waldette 202215-Sep-22 6:13
waldette 202215-Sep-22 6:13 
QuestionPinch zoom in zoom out in js Pin
madhuri jawadekar11-Sep-22 20:01
madhuri jawadekar11-Sep-22 20:01 
Questionhow to make campaign windows Pin
Member 157551811-Sep-22 20:22
Member 157551811-Sep-22 20:22 

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.