I need RGraph to draw after a calculate button is pushed.

Share RGraph:   Share or Like RGraph on Facebook!

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Matt on 12th March 2013
I have an ROI calculator that generates some dynamic values that I want to input into an Rgraph that was added to the web page. The dynamic values are within the "var bar = new RGraph.bar" section of the function. As of now it loads those variables when the window loads. I'm trying to find the right code to run this script when the calculate button is clicked on the calculator on the same page. The code for the graph is below followed by the code for the calculate button. Thanks


<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    <br><img src="/_assets/images/ROIGraphRedSquare.jpg" /> Total Electricity    <br><img src="/_assets/images/ROIGraphBlueSquare.jpg" /> Total Initial Costs
             </div>
        
         </div>

<asp:Button ID="ButtonCalculate" runat="server" Text="Calculate" OnClick="ButtonCalculate_Click" />
Posted by RGraph support on 12th March 2013
Hi there,

Forget any ASP - RGraph runs in the browser and any server side side scripting is not available. Thus you'll need to use JavaScript:

// Put this function *inside* your window.onload function
function ButtonCalculate_Click ()
{
     // Retrieve the values from the form
     var value1 = document.getElementById('myInput1').value;
     var value2 = document.getElementById('myInput2').value;

     // Do calculation with those values

     // Update the chart
     bar.data[0][0] = value1; // First bar, first segment
     bar.data[0][1] = value2; // First bar, second segment

     // etc
}


Richard
Posted by Matt on 12th March 2013
The values that are being generated are coming from an ROI calculator that is coded in ASP.
www.maxlite.com/resources/roi-calculator
Sorry I'm not very familiar with JS so i'm having trouble figuring out how to incorporate the values that are being generated
(<%= TraditionalMaintenanceCost %>,<%= TraditionalElectricityCost %>, <%= TraditionalCost %>, <%= LedMaintenanceCost %>,<%= LedElectricityCost %>,<%= LedCost %>) into the RGraph. Your saying forget ASP. Does that mean I can't use those values in the RGraph?

Thanks for your help
Posted by RGraph support on 12th March 2013
Hi there,

No you can use the values - but ASP runs on your server. Once those values have been printed by ASP the pages is then sent to the browser. And that's here RGraph runs - in the browser. So by the time RGraph gets them they're just numbers.


Richard, RGraph Support
Posted by RGraph support on 12th March 2013
Hi there,

Try viewing the source in your browser - that may help. That's the page after any ASP has run.


Richard, RGraph Support
Posted by Matt on 12th March 2013
Is there anyway you could change the initial code I sent to show me how that would work? I need RGraph to produce its graph when the calculate button is hit and those numbers come back from ASP?
Posted by RGraph support on 12th March 2013
Hi there,

Sorry - I have no experience with ASP.


Richard, RGraph Support

Add a reply




« Back to message list