Jquery and <ma-point-values>/<ma-serial-chart>

[ThomasEinasto]

Hi all,

I am trying to create a page which uses jquery to change html content of a modal but I am in kind of a slump here.

I don't really understand why jquery does not work when I am trying to change the content of a modal. I am trying to change the graphs according to the ID of the object.

The page is loaded by default with ID1

                          <div id="IDGraphs">
                            <h4>ID 1</h4>

                            <ma-point-values point-xid="DP_002129" values="ID1S1" latest="1000"> </ma-point-values>
                            <ma-point-values point-xid="DP_481731" values="ID1S2" latest="1000"> </ma-point-values>
                            <ma-point-values point-xid="DP_254259" values="ID1S3" latest="1000"> </ma-point-values>
                            <ma-serial-chart style="height: 300px; width: 100%" series-1-values="SiloID1S1" series-1-point="point1" series-2-values="SiloID1S2" series-2-point="point2" series-3-values="SiloID1S3" series-3-point="point3">
                            </ma-serial-chart>
                          </div>

This works perfetly!

Then when the user clicks on a button element with another ID:

                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#data" id="ID2G">
                  Graph
                </button>

Which then triggers the jquery function which changes html content of the div with a .html function

          $("#ID2G").click(function() {
            $("#IDGraphs").html('<h4>ID2</h4><ma-point-values point-xid="DP_003575" values="point1Values" latest="1000"> </ma-point-values><ma-point-values point-xid="DP_298289" values="point2Values" latest="1000"> </ma-point-values> <ma-point-values point-xid="DP_668214" values="point3Values" latest="1000"> </ma-point-values><ma-serial-chart style="height: 300px; width: 100%" series-1-values="point1Values" series-1-point="point1" series-2-values="point2Values" series-2-point="point2" series-3-values="point3Values" series-3-point="point3"> </ma-serial-chart>');
          });

When I look the dev mode in chrome then I can see the change that the div has been changed corretly but the amchart has not been called out like it has when the site has been loaded at start.

I guess the solution is to have jquery call function out so the chart and the data will update according to the changed data but I can't find the solution for that.

Many thanks,
Thomas

[Jared Wiltshire]

Hi Thomas.
The way that you are manipulating the DOM using jQuery will not work with our AngularJS directives (ma-point-values, ma-serial-chart).
From the looks of it you are trying to use a button to switch the data points for a serial chart? I would suggest taking a look at the templating examples in the documentation.
-Jared

[ThomasEinasto]

Oh, sorry about this post, I was so stuck on changing the html change that I completely forgot that the function is right there in front of me. Case closed.