graphing-library-docs/_posts/plotly_js/statistical/continuous-error-bars/2016-02-15-filled-lines.html at 84e64b25e9f27bfb4518c8ce81b1e459faaf2b90 · plotly/graphing-library-docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
---
name: Filled Lines
arrangement: horizontal
language: plotly_js
suite: continuous-error-bar
order: 1
sitemap: false
---

// error bar, working: e.g x1 = 2, x1 = 0 , 0 and 2 build the error boundaries
var trace1 = {
  x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
  y: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0],
  fill: "tozerox",
  fillcolor: "rgba(0,100,80,0.2)",
  line: {color: "transparent"},
  name: "Fair",
  showlegend: false,
  type: "scatter"
};

// error bar, working: e.g x1 = 5.5, x1 = 4.5 , 4.5 and 5.5 build the error boundaries
var trace2 = {
  x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
  y: [5.5, 3, 5.5, 8, 6, 3, 8, 5, 6, 5.5, 4.75, 5, 4, 7, 2, 4, 7, 4.4, 2, 4.5],
  fill: "tozerox",
  fillcolor: "rgba(0,176,246,0.2)",
  line: {color: "transparent"},
  name: "Premium",
  showlegend: false,
  type: "scatter"
};

// error bar, working: e.g x1 = 11, x1 = 9 , 9 and 11 build the error boundaries
var trace3 = {
  x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
  y: [11, 9, 7, 5, 3, 1, 3, 5, 3, 1, -1, 1, 3, 1, -0.5, 1, 3, 5, 7, 9],
  fill: "tozerox",
  fillcolor: "rgba(231,107,243,0.2)",
  line: {color: "transparent"},
  name: "Ideal",
  showlegend: false,
  type: "scatter"
};

// trace4, trace5 and trace6 represent the lines (or measurements)
var trace4 = {
  x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  y: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  line: {color: "rgb(0,100,80)"},
  mode: "lines",
  name: "Fair",
  type: "scatter"
};
var trace5 = {
  x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  y: [5, 2.5, 5, 7.5, 5, 2.5, 7.5, 4.5, 5.5, 5],
  line: {color: "rgb(0,176,246)"},
  mode: "lines",
  name: "Premium",
  type: "scatter"
};
var trace6 = {
  x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  y: [10, 8, 6, 4, 2, 0, 2, 4, 2, 0],
  line: {color: "rgb(231,107,243)"},
  mode: "lines",
  name: "Ideal",
  type: "scatter"
};
var data = [trace1, trace2, trace3, trace4, trace5, trace6];
var layout = {
  paper_bgcolor: "rgb(255,255,255)",
  plot_bgcolor: "rgb(229,229,229)",
  xaxis: {
    gridcolor: "rgb(255,255,255)",
    range: [1, 10],
    showgrid: true,
    showline: false,
    showticklabels: true,
    tickcolor: "rgb(127,127,127)",
    ticks: "outside",
    zeroline: false
  },
  yaxis: {
    gridcolor: "rgb(255,255,255)",
    showgrid: true,
    showline: false,
    showticklabels: true,
    tickcolor: "rgb(127,127,127)",
    ticks: "outside",
    zeroline: false
  }
};
Plotly.newPlot('myDiv', data, layout);