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