• I am trying to use a function plot (https://mauriciopoppe.github.io/function-plot/ ) library of Javascript in WordPress page. When I write html and javascript on my local folder and put the html file to the browser, the plot is shown correctly.

    But when I use the same code in Scripts n Styles Plugin in WordPress, the plot is now shown at all. The other functions are working correctly. Do you have any idea to fix this problem?

    Here is what I did:

    Wordpress editor:

    
    Z score=<input type="text" id="z_score" size="5">
    <form><input type="button" name="find_p_value" value="click me" onClick="z_to_p_value()"></form>
    
    <div id="write_results"></div>
    <div id="show_p_area"></div>
    

    Head section in the plugin:

    
    <script type="text/javascript" src="https://mbostock.github.com/d3/d3.min.js"></script>
    <script type="text/javascript" src="https://mbostock.github.com/d3/d3.time.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.0.3/math.js"></script> <!--math.js-->
    <script src="https://mauriciopoppe.github.io/function-plot/js/function-plot.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jstat@latest/dist/jstat.min.js"></script> <!-- jStat -->
    

    Body section in the plugin:

    
    function z_to_p_value(){ 
    
    var z_value = document.getElementById('z_score').value;
    document.getElementById('write_results').innerHTML = z_value;
    var z = parseFloat(z_value);
    
    var mu=0
    var sigma = 1
    
    equation = 'exp(-(x-'+ mu +')^2/(2*' + sigma + '))';
    
    var w = 550;
    var h = 100;
    var svg = d3.select("show_p_area").append("svg")
            .attr("width", w)
            .attr("height", h);
      
    functionPlot({
      target: '#show_p_area',
      xAxis: {
        label: 'X-axis', domain: [-4, 4] 
      }, 
      yAxis: {
        label: 'Y-axis', domain: [0, 0.5] 
      },
      grid: false,
      data: [
            {fn: equation, color:'blue'},
            {fn: equation, range:[-Infinity,z], closed: true, color: 'pink'},
            ]
    }) // End of functionPlot
      
    } // End of z_to_p_value()
    

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Thread Starter isaacnkmr

    (@isaacnkmr)

    <div id=”write_results”></div>
    This section works.

    But
    <div id=”show_p_area”></div>
    This section does not appear.

Viewing 1 replies (of 1 total)
  • The topic ‘Scripts n Styles Plugin does not show plots.’ is closed to new replies.