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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Triggering a JS Graph from a ROI Calculator

    I'm looking for this graph to generate after the calculate button is clicked in a ROI Calculator. The calculator generates 6 values that I want to use in the graph. <%= TraditionalCost %><%= TraditionalMaintenanceCost %><%= TraditionalElectricityCost %><%= LedCost %><%= LedMaintenanceCost %><%= LedElectricityCost %>. These values and the calculator are developed in ASP. My problem is that the graph is currently being triggered by: window.onload = function () and since the values aren't generated until the button is clicked no values feed the graph. In the ASP code the calculate button code is this: <asp:Button ID="ButtonCalculate" runat="server" Text="Calculate" OnClick="ButtonCalculate_Click" />. I'm thinking i may need some type of onclick function instead of the window.onload. But I can't seem to get it to work. The code is below.

    Code:
     <div id="roiGraph">
                <h1>Lifetime Cost Comparison</h1>
                
                <canvas id="cvs" width="260" height="200" align="center">[No canvas support]</canvas>
            
                <script>
                    window.onload = function ()
                    {
                        var bar = new RGraph.Bar('cvs', [[<%= TraditionalMaintenanceCost %>,<%= TraditionalElectricityCost %>, <%= TraditionalCost %>],[<%= LedMaintenanceCost %>,<%= LedElectricityCost %>,<%= LedCost %>]])
                        bar.Set('grouping', 'stacked');
                        bar.Set('labels', ['Existing','MaxLite']);
                        bar.Set('labels.above', true);
                        bar.Set('labels.above.decimals', 2);
                        bar.Set('linewidth', 2);
                        bar.Set('strokestyle', 'white');
                        bar.Set('colors', ['66cc66','#cc3333','#286b8d']);
                        bar.Set('hmargin', 10);
                        bar.Set('gutter.left', 35);
                        bar.Set('background.grid.vlines', false);
                        bar.Set('background.grid.border', false);
                        bar.Set('axis.color', '#ccc');
                        bar.Set('noyaxis', true);
            
                        
                        bar.ondraw = function (obj)
                        {
                            for (var i=0; i<obj.coords.length; ++i) {
                                obj.context.fillStyle = 'white';
                                RGraph.Text(obj.context, 'Verdana', 10, obj.coords[i][0] + (obj.coords[i][2] / 2), obj.coords[i][1] + (obj.coords[i][3] / 2),obj.data_arr[i].toString(),'center', 'center', null,null,null,true);
                            }
                        }
                        
                        bar.Draw();
                    }
                </script>
                
                <div id="roiKeyTitles">
                    <img src="/_assets/images/ROIGraphGreenSquare.jpg" /> Total Maintenence&nbsp;&nbsp;&nbsp;&nbsp;<br><img src="/_assets/images/ROIGraphRedSquare.jpg" /> Total Electricity&nbsp;&nbsp;&nbsp;&nbsp;<br><img src="/_assets/images/ROIGraphBlueSquare.jpg" /> Total Initial Costs
                </div>
            
            </div>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    I don't see how you could base it on a client-side onclick.

    The calculations are presumably done in the ASP.NET code, so the values will not *BE* there in the browser at the time the button is clicked.

    And of course they are also not there when the page is first accessed, since (presumably) the user has not yet filled in the values used for the calculations.

    I would assume you would want to suppress the graph creation until the values indeed are calculated.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    May 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes. Once all the values are put in. And the calculate button is clicked these values are generated. So once they are generated, almost at the same time I wanted those values to create the graph.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    "almost at the same time"??

    Again, until the ASP.NET code does its job and sends back those values to the page, there is nothing available to graph.

    Can you show this live? Give us a URL to look at?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    May 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Nothing has changed in my answer. Because you are using the ASP.NET code to do the calculations, there's nothing that can be done until the server-side code has done its thing.

    I do have to wonder why you are doing any of this with ASP.NET server-side code. Surely the calculations are simple enough it could have all been done with pure JavaScript on a simple HTML (non-ASP.NET) page.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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