TreeMap in Mendix

0
I’ve tried to use AnyChart widget and using plot.ly code of Treemap. https://plot.ly/javascript/treemaps/ But I’m getting this error An error occurred in a "com.mendix.widget.custom.AnyChart.AnyChart" widget. Check updates for the widget in the Mendix App Store or contact the widget developer. Although I’m using Modular 8.0.0 and Anychart 1.2.1   As I’ve understood, AnyChart is itself blank and whatever code plot.ly  you paste in Anychart, it creates chart for that code.  Thank you
asked
1 answers
3

Hey Arjun,

 

Yes you can build pretty amazing graphs with plotly and anychart.

First goto: https://charts102.mxapps.io/p/home. You can also download the test project from the github pages.

Scroll down to the Anychart widget, and open the chart editor by clicking the “toggle editor” button 

I recreated the plotly sample in your link by adding the following:

Layout (Static or Dynamic): 

{
    
  "annotations": [
    {
      "x": 43.6797752809,
      "y": 26.79528403,
      "showarrow": false,
      "text": 500
    },
    {
      "x": 43.6797752809,
      "y": 76.79528403,
      "showarrow": false,
      "text": 433
    },
    {
      "x": 93.6797752809,
      "y": 28.8888888889,
      "showarrow": false,
      "text": 78
    },
    {
      "x": 93.6797752809,
      "y": 67.037037037,
      "showarrow": false,
      "text": 25
    },
    {
      "x": 93.6797752809,
      "y": 85.5555555556,
      "showarrow": false,
      "text": 25
    },
    {
      "x": 93.6797752809,
      "y": 97.4074074074,
      "showarrow": false,
      "text": 7
    }
  ],
  "height": 400,
  "hovermode": "closest",
  "shapes": [
    {
      "fillcolor": "rgb(166,206,227)",
      "line": {
        "width": 2
      },
      "type": "rect",
      "x0": 0,
      "x1": 87.3595505618,
      "y0": 0,
      "y1": 53.59056806
    },
    {
      "fillcolor": "rgb(31,120,180)",
      "line": {
        "width": 2
      },
      "type": "rect",
      "x0": 0,
      "x1": 87.3595505618,
      "y0": 53.59056806,
      "y1": 100
    },
    {
      "fillcolor": "rgb(178,223,138)",
      "line": {
        "width": 2
      },
      "type": "rect",
      "x0": 87.3595505618,
      "x1": 100,
      "y0": 0,
      "y1": 57.7777777778
    },
    {
      "fillcolor": "rgb(51,160,44)",
      "line": {
        "width": 2
      },
      "type": "rect",
      "x0": 87.3595505618,
      "x1": 100,
      "y0": 57.7777777778,
      "y1": 76.2962962963
    },
    {
      "fillcolor": "rgb(251,154,153)",
      "line": {
        "width": 2
      },
      "type": "rect",
      "x0": 87.3595505618,
      "x1": 100,
      "y0": 76.2962962963,
      "y1": 94.8148148148
    },
    {
      "fillcolor": "rgb(227,26,28)",
      "line": {
        "width": 2
      },
      "type": "rect",
      "x0": 87.3595505618,
      "x1": 100,
      "y0": 94.8148148148,
      "y1": 100
    }
  ],
  "width": 400,
  "xaxis": {
    "showgrid": false,
    "zeroline": false,
    "type": "linear",
    "range": [
      -0.42016806722689076,
      100.4201680672269
    ],
    "autorange": true
  },
  "yaxis": {
    "showgrid": false,
    "zeroline": false,
    "type": "linear",
    "range": [
      -0.4683048433048077,
      102.55876068375288
    ],
    "autorange": true
  }
}
 

Data (Dynamic):

[
  {
    "x": [
      43.6797752809,
      43.6797752809,
      93.6797752809,
      93.6797752809,
      93.6797752809,
      93.6797752809
    ],
    "y": [
      26.79528403,
      76.79528403,
      28.8888888889,
      67.037037037,
      85.5555555556,
      97.4074074074
    ],
    "mode": "text",
    "name": "y",
    "text": [
      "500",
      "433",
      "78",
      "25",
      "25",
      "7"
    ],
    "textsrc": "tarzzz:616:bafb6b",
    "type": "scatter",
    "xsrc": "tarzzz:616:512d04",
    "ysrc": "tarzzz:616:da6e5c"
  }
]
 

You will have to of course build the dynamic json yourself.

Tip: I like to open the plotly example charts in code pen then add console.log messages for the data and layout variables:

Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});
console.log(JSON.stringify(data)); // Copy value to dynamic
console.log(JSON.stringify(layout)); // Copy value to layout

 

 

 

 

answered