SPC Control Charts in plotly.js

How to make a D3.js-based SPC Control Charts in javascript.

Basic SPC Control Chart

var Data = {
  type: 'scatter',
  x: [1,2,3,4,5,6,7,8,9],
  y: [4,2,-1,4,-5,-7,0,3,8],
  mode: 'lines+markers',
  name: 'Data',
  showlegend: true,
  hoverinfo: 'all',
  line: {
    color: 'blue',
    width: 2
  },
  marker: {
    color: 'blue',
    size: 8,
    symbol: 'circle'
  }
}

var Viol = {
  type: 'scatter',
  x: [6,9],
  y: [-7,8],
  mode: 'markers',
  name: 'Violation',
  showlegend: true,
  marker: {
    color: 'rgb(255,65,54)',
    line: {width: 3},
    opacity: 0.5,
    size: 12,
    symbol: 'circle-open'
  }
}

var CL = {
  type: 'scatter',
  x: [0.5, 10, null, 0.5, 10],
  y: [-5, -5, null, 5, 5],
  mode: 'lines',
  name: 'LCL/UCL',
  showlegend: true,
  line: {
    color: 'red',
    width: 2,
    dash: 'dash'
  }
}

var Centre = {
  type: 'scatter',
  x: [0.5, 10],
  y: [0, 0],
  mode: 'lines',
  name: 'Centre',
  showlegend: true,
  line: {
    color: 'grey',
    width: 2
  }
}

var data = [Data,Viol,CL,Centre]

var layout = {
  title: 'Basic SPC Chart',
  xaxis: {
    zeroline: false
  },
  yaxis: {
    range: [-10,10],
    zeroline: false
  }
}

Plotly.plot('myDiv', data,layout);

SPC Control Chart & Distribution

var Data = {
  type: 'scatter',
  x: [1,2,3,4,5,6,7,8,9],
  y: [4,2,-1,4,-5,-7,0,3,8],
  mode: 'lines+markers',
  name: 'Data',
  showlegend: true,
  hoverinfo: 'all',
  line: {
    color: 'blue',
    width: 2
  },
  marker: {
    color: 'blue',
    size: 8,
    symbol: 'circle'
  }
}

var Viol = {
  type: 'scatter',
  x: [6,9],
  y: [-7,8],
  mode: 'markers',
  name: 'Violation',
  showlegend: true,
  marker: {
    color: 'rgb(255,65,54)',
    line: {width: 3},
    opacity: 0.5,
    size: 12,
    symbol: 'circle-open'
  }
}

var CL = {
  type: 'scatter',
  x: [0.5, 10, null, 0.5, 10],
  y: [-5, -5, null, 5, 5],
  mode: 'lines',
  name: 'LCL/UCL',
  showlegend: true,
  line: {
    color: 'red',
    width: 2,
    dash: 'dash'
  }
}

var Centre = {
  type: 'scatter',
  x: [0.5, 10],
  y: [0, 0],
  mode: 'lines',
  name: 'Centre',
  showlegend: true,
  line: {
    color: 'grey',
    width: 2
  }
}

var histo = {
  type: 'histogram',
  x: [1,2,3,4,5,6,7,8,9],
  y: [4,2,-1,4,-5,-7,0,3,8],
  name: 'Distribution',
  orientation: 'h',
  marker: {
    color: 'blue',
    line: {
      color: 'white',
      width: 1
    }
  },
  xaxis: 'x2',
  yaxis: 'y2'
}

var data = [Data,Viol,CL,Centre,histo]

// layout
var layout = {
  title: 'Basic SPC Chart',
  xaxis: {
    domain: [0, 0.7], // 0 to 70% of width
    zeroline: false
  },
  yaxis: {
    range: [-10,10],
    zeroline: false
  },
  xaxis2: {
    domain: [0.8, 1] // 70 to 100% of width
  },
  yaxis2: {
    anchor: 'x2',
    showticklabels: false
  }
}

Plotly.plot('myDiv', data,layout);