Plotly Component - imona/tutorial GitHub Wiki

#Note :

1- This component is encapsulating for this JS library https://plot.ly/

2- From here we can see the documentation of every components attributes : https://plot.ly/javascript/reference/

Prepare Layout Object

-Attributes documentation reference : https://plot.ly/javascript/reference/#layout

var xRange = [0,100];
var yRange = [0,10];
var layout = getComponent("IMONA_PLOTLY_VIEWER_FIELD1").retrievePlotlyLayoutBuilder()
.setLayoutTitle("Title")
.setContentWidth(500)
.setContentHeight(400)
.setxAxisTitle("X")
.setyAxisTitle("y")
.setxAxisRange(xRange)
.setyAxisRange(yRange);

1. Pie Chart

Prepare Data Object

-Component Sample : https://plot.ly/javascript/pie-charts/

-Attributes documentation reference : https://plot.ly/javascript/reference/#pie

var values = [13794,629,7,506];
var hoverinfo = ["text","text","text","text"];
var text = ["% 92.35 Bireysel Sözlesme","% 4.21 Gruba Bagli Bireysel Sözlesme","% 0.05 Isveren Grup Emeklilik Ana Sözlesmesi","% 3.39 Isveren Grup Emeklilik Sertifikasi"];
var labels = ["Bireysel Sözlesme","Gruba Bagli Bireysel Sözlesme","Isveren Grup Emeklilik Ana Sözlesmesi","Isveren Grup Emeklilik Sertifikasi"];

var data = getComponent("IMONA_PLOTLY_VIEWER_FIELD1").retrievePieBuilder()
.setTextInfo("textinfo")
.setTextPosistion("inside")
.addToDataList(values, hoverinfo, text, labels);

getComponent("IMONA_PLOTLY_VIEWER_FIELD4").displayChart(layout, data);

2. Bar Chart

Prepare Data Object

-Component Sample : https://plot.ly/javascript/bar-charts/

-Attributes documentation reference : https://plot.ly/javascript/reference/#bar

var xList = ["Kadın","Erkek"];
var yList = [7.473273114075436,7.697018951612902];

var data = getComponent("IMONA_PLOTLY_VIEWER_FIELD2").retrieveBarBuilder()
.addToDataList("x1", "y1", xList, yList)
.setOrientation("v");

getComponent("IMONA_PLOTLY_VIEWER_FIELD2").displayChart(layout, data);

3. Histogram Chart

Prepare Data Object

-Component Sample : https://plot.ly/javascript/histograms/

-Attributes documentation reference : https://plot.ly/javascript/reference/#histogram

var xList = [23.0622,22.7819,22.2451,22.2272,21.720200000000002,21.668499999999998,21.5498,20.383000000000003,20.3056,20.28,19.942999999999998,19.530900000000003,19.3335,19.2212,19.1869,18.9423,18.7608,18.5896,18.459,18.4376,18.4376,18.246299999999998,18.1058,18.0281,17.9028,17.8381,17.8091,17.6175,17.5307,17.5191,17.5138,17.4943,17.4849,17.4522,17.4402,17.427300000000002,17.3889,17.3646,17.349500000000003,17.3354,17.3341,17.262,17.227500000000003,17.1753,17.1417,17.0883,17.006899999999998,16.9211,16.8645,16.8636,16.8542,16.8434,16.8405,16.8233,16.769000000000002,16.7029,16.6985];
 
var data = getComponent("IMONA_PLOTLY_VIEWER_FIELD1").retrieveHistogramBuilder()
.addToDataList(xList);

getComponent("IMONA_PLOTLY_VIEWER_FIELD1").displayChart(layout, data);

4. Box-Plot Chart

Prepare Data Object

-Component Sample : https://plot.ly/javascript/box-plots/

-Attributes documentation reference : https://plot.ly/javascript/reference/#box

var yList1 = [18.459,16.0157,12.628800000000002,11.389199999999999,11.3479,9.8514,9.5191,9.0016,8.874500000000001,8.3331];
var yList2 = [14.6395,13.528599999999999,12.3084,10.084,9.973899999999999,9.5354,8.9047,8.8853,8.3317,8.2799];
var yList3 = [18.7608,15.337700000000002,15.337700000000002,13.913,12.8384,11.6501,11.5197,11.261000000000001,11.0941,10.632800000000001];

var data = getComponent("IMONA_PLOTLY_VIEWER_FIELD3").retrieveBoxBuilder()
.setPointpos(-1.7)
.setBoxpoints("all")
.addToDataList("[50k, 60k)", yList1)
.addToDataList("[60k, 70k)", yList2)
.addToDataList("[70k, ~)", yList3);

getComponent("IMONA_PLOTLY_VIEWER_FIELD3").displayChart(layout, data);

5. Scatter-Plot Chart

Prepare Data Object

-Component Sample : https://plot.ly/javascript/line-and-scatter/

-Attributes documentation reference : https://plot.ly/javascript/reference/#scatter

var xList1 = ["2016-02-20","2016-02-21","2016-02-22","2016-02-22","2016-02-23","2016-02-24","2016-02-25" ];
var yList1 = ["6425.014","6425.014","6425.014","6597.014","6754.913","6797.985","6660.634","6755.643","6755.643" ];

var xList2 = ["2015-01-14","2015-01-15","2015-01-16","2015-01-17","2015-01-18","2015-01-19","2015-01-20","2015-01-21" ];

var yList2 = ["4420.584","4406.848","4421.115","4421.115","4421.115","4412.351","4417.060","4449.494","4463.166","4472.916","4472.916","4472.916"];


var data = getComponent("IMONA_PLOTLY_VIEWER_FIELD2").retrieveScatterBuilder()
.addToDataList("markers", "Fon Tavsiye Gelisimi", xList1, yList1)
.addToDataList("lines", "Mevcut Dagilim Gelisimi", xList2, yList2);

getComponent("IMONA_PLOTLY_VIEWER_FIELD2").displayChart(layout, data);