Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Feb 2015
    Location
    Ohio
    Posts
    476
    Thanks
    26
    Thanked 14 Times in 14 Posts

    Creating a calculator with graphs

    Hey everyone. This is a very broad question that will be based on subjectivity.

    Does this calculator look difficult to build? I see the company is using an iframe, but I can't see how they built it.

    How would I even start with this to get the columns/rows and graphs to update based on the values?

    https://www.columbiagasohio.com/serv...e-your-savings

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    West Des Moines, Iowa
    Posts
    8,107
    Thanks
    37
    Thanked 1,086 Times in 1,082 Posts
    It wasn't built on iframes. They used scalable vector graphics and something like vuejs or react to tie them to the math. You can use raw JS to do the same thing. I would suggest starting out with INPUTs instead of spiders and DIVs or TEXTAREAS instead of the graphics. Then replace them as you go. The JS seems easy, the whole calculator does. It's the svg that would have me slowing down. Go for it. We're here to help.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. Users who have thanked sunfighter for this post:

    pfar54 (Jun 11th, 2019)

  4. #3
    Regular Coder
    Join Date
    Feb 2015
    Location
    Ohio
    Posts
    476
    Thanks
    26
    Thanked 14 Times in 14 Posts
    Thanks sunfighter. I guess I should have thought about breaking it down before worry about the end result.

    My first statement/question would be that I am not sure how to figure out the structure of the equation. For instance, how to factor in the sq footage, what metric they are using for the "air tightness" and how to factor in the heat temperature setting.

    Are you able to tell? I don't see where any of this is in the source code.

  5. #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    TX
    Posts
    3,956
    Thanks
    69
    Thanked 602 Times in 596 Posts
    Some places to start your journey:
    See: https://www.w3schools.com/howto/howt...angeslider.asp
    and: https://www.cssscript.com/categories/slider/
    or: https://html-online.com/articles/simple-progress-bar/

    Also a google search proves somewhat handy to begin with some ideas.

    Good Luck!

  6. Users who have thanked jmrker for this post:

    pfar54 (Jun 12th, 2019)

  7. #5
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    West Des Moines, Iowa
    Posts
    8,107
    Thanks
    37
    Thanked 1,086 Times in 1,082 Posts
    The formula you will need is all multiplication of variables and consents
    heat = mass x specific heat capacity of air x change in temp x the efficiencies

    mass is related to the sq. footage
    specific heat capacity of air depends on the temperature and the pressure. Just use 1
    change in temp would be the difference between what the thermostat is set on and the temp of the air outside. I used 70 - 60

    The efficiencies :
    Natural Gas Heat Efficiency : 80%
    How air tight is it? 1.05
    Cost per CCF .97

    1800 x 1 x (70-60) x .08 x 1.05 x .97 = 1464 dollars

    It won't give you precise results, but this is for learning, right?
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  8. Users who have thanked sunfighter for this post:

    pfar54 (Jun 12th, 2019)

  9. #6
    Regular Coder
    Join Date
    Feb 2015
    Location
    Ohio
    Posts
    476
    Thanks
    26
    Thanked 14 Times in 14 Posts
    Quote Originally Posted by sunfighter View Post
    The formula you will need is all multiplication of variables and consents
    heat = mass x specific heat capacity of air x change in temp x the efficiencies

    mass is related to the sq. footage
    specific heat capacity of air depends on the temperature and the pressure. Just use 1
    change in temp would be the difference between what the thermostat is set on and the temp of the air outside. I used 70 - 60

    The efficiencies :
    Natural Gas Heat Efficiency : 80%
    How air tight is it? 1.05
    Cost per CCF .97

    1800 x 1 x (70-60) x .08 x 1.05 x .97 = 1464 dollars

    It won't give you precise results, but this is for learning, right?
    Thanks. You helped greatly. Do you see how they are factoring in the air tightness based on the selection of Good, OK and Poor?

    I will get this made up in the input form as you suggested and then move to the slider part.

  10. #7
    Regular Coder
    Join Date
    Feb 2015
    Location
    Ohio
    Posts
    476
    Thanks
    26
    Thanked 14 Times in 14 Posts
    I followed your formula and got the base calculator working. I even got the same $1,466 figure that the example site had based on the variables you gave.

    Do the other heating types follow the same formula?

    Are you able to tell what changes when the user changes from single story to multiple story, etc? If the efficiency, sq ft, CCF cost and average heat setting is not changing then the air tightness variable has to be changing, right?

  11. #8
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    West Des Moines, Iowa
    Posts
    8,107
    Thanks
    37
    Thanked 1,086 Times in 1,082 Posts
    I solved a simple equation to get 'How air tight is it? 1.05'. Just drop the slider on web page and solve for a replacement for 1.05.
    How air tight is it = New cost(the old cost was 1464) / 1,396.8
    got 1,396.8 by doing 1800*10*.08*.97

    Please note that this is just ruff stuff. If your going for precise stuff you need to look up real formulas.

    Heat loss of a house is determined by out side surface area, so a ranch would be different than a two story for the same square footage. But what type windows also makes a diff. Too complicated for me. so I wish you luck pfar. Google is your friend for this.
    Last edited by sunfighter; Jun 12th, 2019 at 07:45 PM.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  12. #9
    Regular Coder
    Join Date
    Feb 2015
    Location
    Ohio
    Posts
    476
    Thanks
    26
    Thanked 14 Times in 14 Posts
    I attempted the propane equation and with 1800 sq ft, 1.05 air tight, 80% efficiency, average heat at 70 and cost at $2.62, I ended up with $39614.4 versus the other site's $4,318. Are you able to tell what changes with this equation?

  13. #10
    Regular Coder
    Join Date
    Feb 2015
    Location
    Ohio
    Posts
    476
    Thanks
    26
    Thanked 14 Times in 14 Posts
    Quote Originally Posted by sunfighter View Post
    I solved a simple equation to get 'How air tight is it? 1.05'. Just drop the slider on web page and solve for a replacement for 1.05.
    How air tight is it = New cost(the old cost was 1464) / 1,396.8
    got 1,396.8 by doing 1800*10*.08*.97

    Please note that this is just ruff stuff. If your going for precise stuff you need to look up real formulas.

    Heat loss of a house is determined by out side surface area, so a ranch would be different than a two story for the same square footage. But what type windows also makes a diff. Too complicated for me. so I wish you luck pfar. Google is your friend for this.
    Gotcha. Thanks! What I just did was find the value for the lowest and then highest.

  14. #11
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    West Des Moines, Iowa
    Posts
    8,107
    Thanks
    37
    Thanked 1,086 Times in 1,082 Posts
    I attempted the propane equation
    Every thing I gave you was for natural gas. You need to figure out things for propane yourself, I'm finished with this. The $39614.40 you got is wrong it S/B $3,954.10 which is close to the $3,956.00 the natural gas figure they got.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  15. #12
    Regular Coder
    Join Date
    Feb 2015
    Location
    Ohio
    Posts
    476
    Thanks
    26
    Thanked 14 Times in 14 Posts
    How do you come up with the variables though? Wouldn't the heat equation be the same with just the propane efficiency and then the propane cost?

  16. #13
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    West Des Moines, Iowa
    Posts
    8,107
    Thanks
    37
    Thanked 1,086 Times in 1,082 Posts
    Yes that is correct
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •