Results 1 to 3 of 3

Thread: D3.js don't display the charts

  1. #1
    dataexplorer is offline Utente AlterBlog
    Join Date
    Jan 2019
    Posts
    2

    Question D3.js don't display the charts

    Hi

    I'm doing some test in Wordpress to visualize data and charts.

    I can't see my new page, edited in Wordpress, with a simple D3.js chart

    The code came from here and is visualized in all my browsers, except when loaded from the page update in my blog

    https://bl.ocks.org/mbostock/b593534...1928401e2c8608



    Is there some kind of block for javascript code?

  2. #2
    alemoppo is offline AlterVista Staff
    Join Date
    Feb 2010
    Location
    IT
    Posts
    226

    Default

    Quote Originally Posted by dataexplorer View Post
    Is there some kind of block for javascript code?
    No, it can't be a javascript block, because this is run on the client side.

    Are you using classic editor or Gutenberg? The classic editor can broke the code, for example adding the <p> tags on empty lines. Try a code without empty lines like:
    Code:
    <svg width="960" height="500"></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>var data = [
      {month: "Q1-2016", apples: 3840, bananas: 1920, cherries: -1960, dates: -400},
      {month: "Q2-2016", apples: 1600, bananas: 1440, cherries: -960, dates: -400},
      {month: "Q3-2016", apples:  640, bananas:  960, cherries: -640, dates: -600},
      {month: "Q4-2016", apples:  320, bananas:  480, cherries: -640, dates: -400}
    ];
    var series = d3.stack()
        .keys(["apples", "bananas", "cherries", "dates"])
        .offset(d3.stackOffsetDiverging)
        (data);
    var svg = d3.select("svg"),
        margin = {top: 20, right: 30, bottom: 30, left: 60},
        width = +svg.attr("width"),
        height = +svg.attr("height");
    var x = d3.scaleBand()
        .domain(data.map(function(d) { return d.month; }))
        .rangeRound([margin.left, width - margin.right])
        .padding(0.1);
    var y = d3.scaleLinear()
        .domain([d3.min(series, stackMin), d3.max(series, stackMax)])
        .rangeRound([height - margin.bottom, margin.top]);
    var z = d3.scaleOrdinal(d3.schemeCategory10);
    svg.append("g")
      .selectAll("g")
      .data(series)
      .enter().append("g")
        .attr("fill", function(d) { return z(d.key); })
      .selectAll("rect")
      .data(function(d) { return d; })
      .enter().append("rect")
        .attr("width", x.bandwidth)
        .attr("x", function(d) { return x(d.data.month); })
        .attr("y", function(d) { return y(d[1]); })
        .attr("height", function(d) { return y(d[0]) - y(d[1]); })
    svg.append("g")
        .attr("transform", "translate(0," + y(0) + ")")
        .call(d3.axisBottom(x));
    svg.append("g")
        .attr("transform", "translate(" + margin.left + ",0)")
        .call(d3.axisLeft(y));
    function stackMin(serie) {
      return d3.min(serie, function(d) { return d[0]; });
    }
    function stackMax(serie) {
      return d3.max(serie, function(d) { return d[1]; });
    }</script>
    Bye!
    Last edited by alemoppo; 01-24-2019 at 05:00 PM.

  3. #3
    dataexplorer is offline Utente AlterBlog
    Join Date
    Jan 2019
    Posts
    2

    Default

    IT WORKS!

    Thanks


    I summarize the procedure for other users, adding also the problem when loading the data files


    - Delete all the empty lines of the page with D3.js script


    When you upload a CSV file you could get the following error message:
    “Sorry, this file type is not permitted for security reasons” error message in WordPress"

    You need plugin WP Add Mime Types
    https://wordpress.org/plugins/wp-add-mime-types/

    Install the plugin and activate it.
    Navigate to Setttings -> Mime Type Settings.

    Now you can add mime-type value for the file extension you want to upload.

    In my case:
    csv = text/csv
    xla|xls|xlt|xlw = application/vnd.ms-excel
    json = application/json

    Save setting


    ***********************
    For MIME-type see also
    https://tribulant.com/blog/wordpress...urity-reasons/
    https://www.hostinger.com/tutorials/...r-in-wordpress
    Last edited by dataexplorer; 01-25-2019 at 10:47 AM.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

SEO by vBSEO