how to set dynamic data in a javascript in Laravel 5.1

Question

I want to make this data pointer dynamic, I will input this data pointer from my database. what shall i do? how can i solve this? I want to change only dataPoints. Also how to change the option completely? I am using Laravel 5.1

@section('page-content')
<div id="templatemo_main"><span class="main_top"></span>
       <div id="content-viewer-div">
            <div style="width:100%; height: 500px; ">
                <div style="width: 30%; height: 500px; background: #ff6666;float: left ">

                </div>
                <div style="width: 70%; height: 500px; background: #dddddd; float: left;">
                    <div>
                        <div id="chartContainer" style="height: 300px; width: 100%;"></div>
                    </div>
                    <div>Pressure</div>
                    <div>Temperature</div>
                </div>
            </div>
       </div>
</div>
<script type="text/javascript" src="{{asset('js/ecgProcess/jquery-1.11.1.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/ecgProcess/jquery.canvasjs.min.js')}}"></script>
<script type="text/javascript">
$(function () {
    //Better to construct options first and then pass it as a parameter
    var options = {
        title: {
            text: "Patients ECG Signal"
        },
                animationEnabled: true,
        data: [
        {
            type: "spline", //change it to line, area, column, pie, etc
            dataPoints: [
                { x: 10, y: 10 },
                { x: 20, y: 12 },
                { x: 30, y: 8 },
                { x: 40, y: 14 },
                { x: 50, y: 6 },
                { x: 60, y: 24 },
                { x: 70, y: 4 },
                { x: 80, y: 10 },
                { x: 90, y: 12 },
                { x: 100, y: 8 },
                { x: 140, y: 14 },
                { x: 150, y: 6 },
                { x: 160, y: 24 },
                { x: 170, y: 4 },
                { x: 180, y: 10 }
            ]
        }
        ]
    };

    $("#chartContainer").CanvasJSChart(options);

});
</script>
@stop

i j

GiamPy · Accepted Answer · 2015-09-13 16:03:14Z

1

You have two options:

Load a variable from the templating engine.

var dataPoints = {{ $yourVariable }};

Load the variable in an HTML5 data tag whichever element you prefer.

<div id="templatemo_main" data-points="{{ htmlentities($yourVariable) }}">[...]</div>

Then you just use:

var options = {

    [...]

    dataPoints: $("#templatemo_main").data('points')

    [...]

};

Or:

var options = {

    [...]

    dataPoints: dataPoints

    [...]

};

answered Sep 13, 2015 at 16:03

GiamPy

3,5703 gold badges32 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to set dynamic data in a javascript in Laravel 5.1

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