2

Trying to create my first chart with plotly and I am getting a d3 error:

    Uncaught TypeError: e.getAttribute is not a function d3.v3.min.js:1
    (anonymous function) @ d3.v3.min.js:1
    e @ d3.v3.min.js:1
    (anonymous function) @ d3.v3.min.js:3
    N @ d3.v3.min.js:1
    Ro.each @ d3.v3.min.js:3
    Ro.classed @ d3.v3.min.js:3
    I.plot @ plotly.min.js:11

Here is my actual code. Note that I am running this with the js that I downloaded from here: http://d14fo0winaifog.cloudfront.net/plotlyjs_basic.zip.

Could my problem be that I am trying to create a histogram2dcontour plot and that is not available in the the code I get from that link?

function generate_heatmap(divId) {
 var data = [
  {
    x: ["X", "-45470.884", "-25150.884", "-4830.884", "15489.116", "35809.116", "56129.116", "96769.116", "76449.116", "56129.116", "35809.116", "15489.116", "-4830.884", "-25150.884", "-45470.884", "-65790.884", "-86110.884", "-106430.884", "-86110.884", "-65790.884", "-45470.884", "-25150.884", "-4830.884", "15489.116", "35809.116", "56129.116", "76449.116", "96769.116", "117089.116", "137409.116", "117089.116", "96769.116", "76449.116", "56129.116", "35809.116", "15489.116", "-4830.884", "-25150.884", "-45470.884", "-65790.884", "-86110.884", "-106430.884", "-126750.884", "-126750.884", "-106430.884", "-86110.884", "-65790.884", "-45470.884", "-25150.884", "-4830.884", "15489.116", "35809.116", "56129.116", "76449.116", "96769.116", "117089.116", "137409.116", "137409.116", "117089.116", "96769.116", "76449.116", "56129.116", "35809.116", "15489.116", "-4830.884", "-25150.884", "-45470.884", "-65790.884", "-86110.884", "-106430.884", "-126750.884", "-106430.884", "-86110.884", "-65790.884", "-45470.884", "-25150.884", "-4830.884", "15489.116", "35809.116", "56129.116", "76449.116", "96769.116", "117089.116", "96769.116", "76449.116", "56129.116", "35809.116", "15489.116", "-4830.884", "-25150.884", "-45470.884", "-65790.884", "-86110.884", "-45470.884", "-25150.884", "-4830.884", "15489.116", "35809.116", "56129.116"], 
    y: ["Y", "126470.809", "126470.809", "126470.809", "126470.809", "126470.809", "126470.809", "96030.809", "96030.809", "96030.809", "96030.809", "96030.809", "96030.809", "96030.809", "96030.809", "96030.809", "96030.809", "65590.809", "65590.809", "65590.809", "65590.809", "65590.809", "65590.809", "65590.809", "65590.809", "65590.809", "65590.809", "65590.809", "65590.809", "35150.809", "35150.809", "35150.809", "35150.809", "35150.809", "35150.809", "35150.809", "35150.809", "35150.809", "35150.809", "35150.809", "35150.809", "35150.809", "35150.809", "4710.809", "4710.809", "4710.809", "4710.809", "4710.809", "4710.809", "4710.809", "4710.809", "4710.809", "4710.809", "4710.809", "4710.809", "4710.809", "4710.809", "-25729.191", "-25729.191", "-25729.191", "-25729.191", "-25729.191", "-25729.191", "-25729.191", "-25729.191", "-25729.191", "-25729.191", "-25729.191", "-25729.191", "-25729.191", "-25729.191", "-56169.191", "-56169.191", "-56169.191", "-56169.191", "-56169.191", "-56169.191", "-56169.191", "-56169.191", "-56169.191", "-56169.191", "-56169.191", "-56169.191", "-86609.191", "-86609.191", "-86609.191", "-86609.191", "-86609.191", "-86609.191", "-86609.191", "-86609.191", "-86609.191", "-86609.191", "-117049.191", "-117049.191", "-117049.191", "-117049.191", "-117049.191", "-117049.191"], 
    z: ["Bottom", "2402.508", "2394.335", "2392.09", "2379.4", "2390.327", "2387.344", "2383.739", "2362.802", "2394.312", "2417.5", "2422.291", "2426.842", "2421.105", "2407.7", "2395.756", "2395.244", "2390.439", "2408.907", "2418.84", "2404.997", "2393.726", "2382.456", "2395.41", "2405.049", "2415.781", "2412.865", "2389.956", "2385.163", "2307.628", "2360.378", "2407.691", "2410.356", "2377.242", "2358.369", "2372.157", "2375.485", "2361.955", "2359.317", "2388.163", "2426.737", "2409.668", "2407.087", "2391.4", "2416.33", "2420.959", "2378.277", "2363.087", "2393.965", "2382.122", "2409.348", "2373.825", "2366.037", "2403.651", "2417.157", "2397.253", "2395.124", "2566.075", "2399.791", "2421.277", "2411.701", "2377.111", "2360.186", "2383.232", "2385.762", "2372.153", "2364.688", "2399.55", "2429.811", "2420.915", "2391.578", "2379.343", "2435.295", "2422.931", "2410.738", "2368.105", "2363.223", "2367.033", "2386.632", "2414.157", "2426.998", "2399.832", "2396.781", "2380.191", "2391.172", "2416.81", "2432.585", "2423.98", "2429.311", "2427.395", "2439.335", "2414.746", "2375.659", "2375.096", "2382.304", "2388.411", "2382.999", "2366.534", "2383.433"], 
    autobinx: true, 
    autobiny: true, 
    autocolorscale: false, 
    autocontour: false, 
    colorbar: {
      x: 0.960996325031, 
      y: 0.534862385321, 
      bgcolor: "rgba(0, 0, 0, 0)", 
      bordercolor: "#444", 
      borderwidth: 0, 
      exponentformat: "B", 
      len: 1, 
      lenmode: "fraction", 
      nticks: 0, 
      outlinecolor: "#444", 
      outlinewidth: 1, 
      showexponent: "all", 
      showticklabels: true, 
      thickness: 30, 
      thicknessmode: "pixels", 
      tickangle: "auto", 
      tickfont: {
        color: "#444", 
        family: "\"Open sans\", verdana, arial, sans-serif", 
        size: 12
      }, 
      tickmode: "auto", 
      ticks: "", 
      title: "yo ", 
      titlefont: {
        color: "#444", 
        family: "\"Open sans\", verdana, arial, sans-serif", 
        size: 12
      }, 
      titleside: "top"
    }, 
    colorscale: "Hot", 
    contours: {
      coloring: "fill", 
      end: 5.505, 
      showlines: true, 
      size: 0.5, 
      start: 0.5
    }, 
    histnorm: "", 
    line: {
      color: "#000", 
      dash: "solid", 
      smoothing: 1, 
      width: 0.5
    }, 
    name: "Col3", 
    opacity: 1, 
    reversescale: false, 
    showscale: true, 
    type: "histogram2dcontour", 
    uid: "80eb26", 
    xbins: {
      end: 200000, 
      size: 50000, 
      start: -200000
    }, 
    ybins: {
      end: 200000, 
      size: 50000, 
      start: -200000
    }, 
    zauto: false, 
    zmax: 6, 
    zmin: 0
  }
 ];
 var layout = {
  autosize: true, 
  dragmode: "zoom", 
  font: {
    color: "#444", 
    family: "\"Open sans\", verdana, arial, sans-serif", 
    size: 12
  }, 
  height: 463, 
  hidesources: false, 
  hovermode: "x", 
  paper_bgcolor: "#fff", 
  plot_bgcolor: "#fff", 
  separators: ".,", 
  title: "hi", 
  titlefont: {
    color: "#444", 
    family: "\"Open sans\", verdana, arial, sans-serif", 
    size: 17
  }, 
  width: 869, 
  xaxis: {
    autorange: true, 
    exponentformat: "B", 
    gridcolor: "#eee", 
    gridwidth: 1, 
    mirror: false, 
    nticks: 0, 
    range: [-175000, 175000], 
    showexponent: "all", 
    showgrid: true, 
    showline: false, 
    showticklabels: true, 
    tickangle: "auto", 
    tickcolor: "#444", 
    tickfont: {
      color: "#444", 
      family: "\"Open sans\", verdana, arial, sans-serif", 
      size: 12
    }, 
    ticklen: 5, 
    tickmode: "auto", 
    ticks: "outside", 
    tickwidth: 1, 
    title: "blow", 
    titlefont: {
      color: "#444", 
      family: "\"Open sans\", verdana, arial, sans-serif", 
      size: 14
    }, 
    type: "linear", 
    zeroline: true, 
    zerolinecolor: "#444", 
    zerolinewidth: 1
  }, 
  yaxis: {
    autorange: true, 
    exponentformat: "B", 
    gridcolor: "#eee", 
    gridwidth: 1, 
    mirror: false, 
    nticks: 0, 
    range: [-175000, 175000], 
    showexponent: "all", 
    showgrid: true, 
    showline: false, 
    showticklabels: true, 
    tickangle: "auto", 
    tickcolor: "#444", 
    tickfont: {
      color: "#444", 
      family: "\"Open sans\", verdana, arial, sans-serif", 
      size: 12
    }, 
    ticklen: 5, 
    tickmode: "auto", 
    ticks: "outside", 
    tickwidth: 1, 
    title: "yo", 
    titlefont: {
      color: "#444", 
      family: "\"Open sans\", verdana, arial, sans-serif", 
      size: 14
    }, 
    type: "linear", 
    zeroline: true, 
    zerolinecolor: "#444", 
    zerolinewidth: 1
  }
 };
 Plotly.plot(divId, data, layout);
}

Another update to show how I call this. This function is the on click handler for an object:

function load_heatmap()
{
    var hm_id = 'heatmap1';
    var el_hm = $('<div />').attr('id', hm_id);
    generate_heatmap(el_hm);
}

generate_heatmap is shown above. It ends with

Plotly.plot(divId, data, layout);

I un-minified plotly.js and it's blowing up on line 441:

  437                 function _(t) {
  438                     var e = x(t);
  439                     return function(n, r) {
  440                         if (a = n.classList) return r ? a.add(t) : a.remove(t);
  441                         var a = n.getAttribute("class") || "";
  442                         r ? (e.lastIndex = 0, e.test(a) || n.setAttribute("class", y(a + " " + t))) : n.setAttribute      ("class", y(a.replace(e, " ")))
  443                     }
  444                 }

I set a breakpoint at 441 and from the debugger I see this:

   > n
   < [<div id=​"heatmap1">​</div>​]

   > n.getAttribute
   < undefined
Improve this question
4
  • The code is an exact cut and paste of the code here: https://plot.ly/~llanopa/8/hi/?share_key=2SzItKpDP1N4D5PLHB1qYF Let me know if you can view it there. If not I will post it here. Commented Oct 30, 2015 at 17:26
  • It works on the plotly site, but not on my system with the plotly and d3 libs I downloaded from the plotly site. Does it work on your system? Commented Oct 30, 2015 at 17:47
  • Larry, this example bl.ocks.org/etpinard/b74432ea2aa0e972e11b might help you out. Commented Oct 30, 2015 at 20:31
  • Thanks but this is not what I am looking for. I need to programmatically generate charts in my app. My client made that example chart on your website and I just cut and pasted the code into my app to integrate it in and show proof of concept. Once I have that working then I will make it load data programmatically and add the other bells and whistles they want. Could my problem be that I am trying to create a histogram2dcontour plot and that is not available in the the code I get from the download js link? Commented Oct 30, 2015 at 20:43

1 Answer 1

Reset to default
3

You are confusing the plotly node.js API and plotlyjs.

Changing the Plotly.plot call signature to

Plotly.plot(divId, data, layout)

should make things work.

In your case, the divId is hm_id.

Note that the .js code tabs shows reproducible node.js code, not plotlyjs. Moreover, the free basic plotlyjs does not feature the histogram 2d contour trace type.

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

6 Comments

I did not realize that the .js code tab did not show code that would work with plotlyjs. Is there any way I can use the code from that tab with plotIyjs? I made the change you suggested and I get the exact same error.
Yes, I have seen those docs. I now have the advanced lib that does support the histogram 2d contour trace type and I am getting the same error. The error is from d3, which is called by plotly. How can I debug that?
Could you copy/paste your HTML index as well?
I don't have an index.html. This is part of a very large django based app. The part of the app that I am trying to add plotly to is some jQuery code that is invoked when the user clicks on something. That jQuery code creates a div and then calls a js function to run that calls plotly. I have been debugging this and it seem to not like this div I pass in. I will update the original post with more code to show you.
Plotly.plot doesn't accept jQuery selections as its first argument. Pass in only the div id and things should work.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.