Call function inside JavaScript

Question

Since url JavaScript should be injected into the webview, could someone let me know how I can call addPoints() function inside of basic function in the following code?

<html>
<head>
<style type="text/css">
    #example {
        width: 650px;
        height: 450px;
    }
</style>
</head>
 <body>
      <div id="example"></div>
      <div id="controls">
           <button>Blue</button>
           <button>Green</button>
           <button>Red</button>
    </div>
     <script type="text/javascript" src="js/chart-high/jquery-1.8.3.js">                 </script>  
     <script type="text/javascript" src="js/chart-flotr2/flotr2.min.js"></script>
     <script type="text/javascript">

        (function basic(container) {

            var
               _ = Flotr._,
                d1 = [[0, 3], [4, 8], [8, -8], [9, 16]],
                d2 = [],
                d3 = [],
                show = [true, true, true],
                i,
                graph;

            // Generate first data set
            for (i = 0; i < 14; i += 0.5) {
                d2.push([i, Math.sin(i)]);
            }

            for (i = 0; i < 14; i += 1) {
                var randomN3 = Math.floor(Math.random() * 201) - 100
                d3.push([i, randomN3]);
            }

            $('#controls').delegate('button', 'click', function(e) {
                var
                index = $(e.currentTarget).index();
                show[index] = !show[index];
                drawGraph();
            });

            function **addPoints(dd1, dd2, dd3)** {
                var
                data = [
                    {data: dd1},
                    {data: dd2},
                    {data: dd3}
                ];

                _.each(show, function(show, index) {
                    data[index].hide = !show;
                });

                // Draw Graph
                return Flotr.draw(container, data, {
                    xaxis: {
                        minorTickFreq: 4
                    },
                    grid: {
                        minorVerticalLines: true
                    }
                }); 
            }

            function drawGraph() {
                var
                data = [
                    {data: d1},
                    {data: d2},
                    {data: d3}
                ];

                _.each(show, function(show, index) {
                    data[index].hide = !show;
                });

                // Draw Graph
                return Flotr.draw(container, data, {
                    xaxis: {
                        minorTickFreq: 4
                    },
                    grid: {
                        minorVerticalLines: true
                    }
                });
            }

            drawGraph();

        })(document.getElementById("example"));
    </script>
</body>

AND how I can call addPaoints function in the following code?

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/chart-high/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/chart-high/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
    var chart;
    $(document).ready(function() {

        chart = new Highcharts.Chart({

            chart : {
                renderTo : 'container',
                type : 'line'
            },
            title : {
                text : 'Trycksignaler',
                x : -20
            //center
            },
            yAxis : {
                title : {
                    text : 'CAN-värden'
                }
            },
            series : [ {
                name : 'B4',
                data : [ 7.0, 6.9 ]
            }, {
                name : 'B5',
                data : [ -0.2, 0.8 ]
            }, {
                name : 'Overload',
                data : [ -0.9, 0.6 ]
            } ]

        });
    });

    function **addPaoints**(valY0, valY1, valY2) {
        for (i = 0; i < valY0.length; i++) {
            chart.series[0].addPoint(valY0[i]);
            chart.series[1].addPoint(valY1[i]);
            chart.series[2].addPoint(valY2[i]);
        }
    }

});
</script>
<script src="js/chart-high/highstock.js"></script>
<script src="js/chart-high/modules/exporting.js"></script>
</head>
<body bgcolor="#030303">
<div id="container" style="height: 400px; width: 700px"></div>
<!--        <button id="button" >Add point</button> -->

</body>
</html>

Quentin · Accepted Answer · 2012-12-19 11:32:16Z

3

addPoints is defined inside a function (and thus scoped to that function).

There is no way to call it from outside the function it is defined in without modifying it.

This is usually does by having var basic_namespace = (function basic(container) { and having that function return an object containing public methods:

return { "addPoints": addPoints };

At which point you can then call:

basic_namespace.addPoints()

Collectives™ on Stack Overflow

Call function inside JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related