Skip to content

Instantly share code, notes, and snippets.

@mojoaxel

mojoaxel/index.html

Created July 25, 2018 15:13
Show Gist options
  • Save mojoaxel/0989b736b3505dc92e633a886948574f to your computer and use it in GitHub Desktop.
Save mojoaxel/0989b736b3505dc92e633a886948574f to your computer and use it in GitHub Desktop.
Download ZIP
Plotly.js multible Charts // source https://jsbin.com/davagaz
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Plotly.js multible Charts</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.39.2/plotly.min.js"></script>
<style id="jsbin-css">
#chart {
width: 100%;
height: 960px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script id="jsbin-javascript">
// Disable Loop-Protection
// noprotect
var COUNT = 500;
var MIN = 1509408000;
var MAX = 1517788800;
function genFillamentDummys(offset) {
var varianz = 3000;
var step = (MAX-MIN)/COUNT;
var x = [];
var y = [];
var oldValue = 0;
var r = 0;
for (var i=MIN; i<MAX; i+=step) {
var rand = Math.random();
if (rand > 0.98) {
r = 0;
} else if (rand > 0.97) {
oldValue = varianz*0.2 * (Math.random()-0.5);
} else {
r = oldValue + (oldValue * (Math.random()-0.5))
oldValue = r;
}
x.push(new Date(Math.round(i) * 1000));
y.push(offset + r);
}
return {
x: x,
y: y
}
}
function genRadiationDummys(offset) {
var step = (MAX-MIN)/COUNT;
var x = [];
var y = [];
var r = 0;
for (var i=MIN; i<MAX; i+=step) {
var rand = Math.random();
if (rand > 0.8) {
r += Math.random()*500;
}
if (rand > 0.8) {
x.push(new Date(Math.round(i) * 1000));
y.push(offset + r);
}
}
return {
x: x,
y: y
}
}
function getRandomDates(count) {
var x = [];
for (var i=0; i<count; i++) {
var timestamp = (MAX-MIN)*Math.random()+MIN;
x.push(new Date(Math.round(timestamp) * 1000))
}
return x;
}
var traces = [];
var FOfMic = genFillamentDummys(17000);
traces.push({
x: FOfMic.x,
y: FOfMic.y,
type: 'scattergl',
mode: 'markers',
legendgroup: 'Fillament',
xaxis: 'x1',
yaxis: 'y1',
name: 'Fof-Mic',
marker: {
color: "green",
size: 3
},
});
var FOfMPP = genFillamentDummys(15000);
traces.push({
x: FOfMPP.x,
y: FOfMPP.y,
type: 'scattergl',
mode: 'markers',
legendgroup: 'Fillament',
xaxis: 'x1',
yaxis: 'y1',
name: 'FOf-MPP',
marker: {
color: "lightgreen",
size: 3
},
});
var FOfSml = genFillamentDummys(11000);
traces.push({
x: FOfSml.x,
y: FOfSml.y,
type: 'scattergl',
mode: 'markers',
legendgroup: 'Fillament',
xaxis: 'x1',
yaxis: 'y1',
name: 'FOf-Sml',
marker: {
color: "red",
size: 3
},
});
var FOfSPP = genFillamentDummys(9000);
traces.push({
x: FOfSPP.x,
y: FOfSPP.y,
type: 'scattergl',
mode: 'markers',
legendgroup: 'Fillament',
xaxis: 'x1',
yaxis: 'y1',
name: 'FOf-SPP',
marker: {
color: "lightred",
size: 3
},
});
var FOfLrg = genFillamentDummys(5000);
traces.push({
x: FOfLrg.x,
y: FOfLrg.y,
type: 'scattergl',
mode: 'markers',
legendgroup: 'Fillament',
xaxis: 'x1',
yaxis: 'y1',
name: 'FOf-Lrg',
marker: {
color: "blue",
size: 3
},
});
var FOfLPP = genFillamentDummys(3000);
traces.push({
x: FOfLPP.x,
y: FOfLPP.y,
type: 'scattergl',
mode: 'markers',
legendgroup: 'Fillament',
xaxis: 'x1',
yaxis: 'y1',
name: 'FOf-LPP',
marker: {
color: "lightblue",
size: 3
},
});
traces.push({
x: getRandomDates(2),
y: [12, 12],
type: 'scattergl',
mode: 'markers',
legendgroup: 'Events',
xaxis: 'x',
yaxis: 'y2',
name: 'Pwr Start',
marker: {
color: "green",
symbol: "triangle-up",
size: 10
},
});
traces.push({
x: getRandomDates(2),
y: [12, 12],
type: 'scattergl',
mode: 'markers',
legendgroup: 'Events',
xaxis: 'x',
yaxis: 'y2',
name: 'Pwr Stop',
marker: {
color: 'red',
symbol: "triangle-down",
size: 10
},
});
traces.push({
x: getRandomDates(4),
y: [10, 10, 10, 10],
type: 'scattergl',
mode: 'markers',
legendgroup: 'Events',
xaxis: 'x',
yaxis: 'y2',
name: 'Gitterwarnung',
marker: {
color: 'rgba(0, 0, 255, 0.75)',
size: 10
},
});
traces.push({
x: getRandomDates(3),
y: [10, 10, 10],
type: 'scattergl',
mode: 'markers',
legendgroup: 'Events',
xaxis: 'x',
yaxis: 'y2',
name: 'Gitterfehler',
marker: {
color: 'rgba(255, 0, 0, 0.75)',
symbol: "star-diamond",
size: 10
},
});
traces.push({
x: getRandomDates(3),
y: [10, 10, 10],
type: 'scattergl',
mode: 'markers',
legendgroup: 'Events',
xaxis: 'x',
yaxis: 'y2',
name: 'Gitterabschaltung',
marker: {
color: 'rgb(238, 130, 238, 0.75)',
symbol: "x",
size: 10
},
});
traces.push({
x: getRandomDates(4),
y: [8, 8, 8, 8],
type: 'scattergl',
mode: 'markers',
xaxis: 'x',
yaxis: 'y2',
name: 'TbAdj',
marker: {
color: 'green',
symbol: "star-dot",
size: 10
},
});
var RadIdx = genRadiationDummys(10000);
traces.push({
x: RadIdx.x,
y: RadIdx.y,
xaxis: 'x',
yaxis: 'y3',
mode: 'lines+markers',
name: 'RadIdx',
marker: {
color: 'darkturquoise',
size: 4
}
});
var LU = genRadiationDummys(40000);
traces.push({
x: LU.x,
y: LU.y,
xaxis: 'x',
yaxis: 'y4',
mode: 'lines+markers',
name: 'LU',
marker: {
color: 'darkviolet',
size: 4
}
});
var layout = {
showlegend: false,
xaxis: {
//range: [0, 10],
},
yaxis: {
domain: [0.55, 1],
range: [0, 21000],
fixedrange: true,
tickvals: [3000, 5000, 9000, 11000, 15000, 17000],
ticktext : ['FOf-LPP', 'FOf-Lrg', 'FOf-SPP', 'FOf-Sml', 'FOf-MPP', 'Fof-Mic']
},
yaxis2: {
domain: [0.3, 0.5],
range: [5, 14],
fixedrange: true,
tickvals: [8, 10, 12],
ticktext : ['TbAdj', 'GridErr', 'Pwr']
},
yaxis3: {
domain: [0, 0.25],
range: [0, 100000],
fixedrange: true,
side: 'left',
//gridcolor: 'darkturquoise',
tickfont: {
color: 'darkturquoise'
}
},
yaxis4: {
domain: [0, 0.25],
range: [0, 100000],
fixedrange: true,
overlaying: 'y3',
side: 'right',
//gridcolor: 'darkviolet',
tickfont: {
color: 'darkviolet'
}
},
};
var options = {
scrollZoom: true
}
Plotly.newPlot('chart', traces , layout, options);
</script>
<script id="jsbin-source-css" type="text/css">#chart {
width: 100%;
height: 960px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">// Disable Loop-Protection
// noprotect
var COUNT = 500;
var MIN = 1509408000;
var MAX = 1517788800;
function genFillamentDummys(offset) {
var varianz = 3000;
var step = (MAX-MIN)/COUNT;
var x = [];
var y = [];
var oldValue = 0;
var r = 0;
for (var i=MIN; i<MAX; i+=step) {
var rand = Math.random();
if (rand > 0.98) {
r = 0;
} else if (rand > 0.97) {
oldValue = varianz*0.2 * (Math.random()-0.5);
} else {
r = oldValue + (oldValue * (Math.random()-0.5))
oldValue = r;
}
x.push(new Date(Math.round(i) * 1000));
y.push(offset + r);
}
return {
x: x,
y: y
}
}
function genRadiationDummys(offset) {
var step = (MAX-MIN)/COUNT;
var x = [];
var y = [];
var r = 0;
for (var i=MIN; i<MAX; i+=step) {
var rand = Math.random();
if (rand > 0.8) {
r += Math.random()*500;
}
if (rand > 0.8) {
x.push(new Date(Math.round(i) * 1000));
y.push(offset + r);
}
}
return {
x: x,
y: y
}
}
function getRandomDates(count) {
var x = [];
for (var i=0; i<count; i++) {
var timestamp = (MAX-MIN)*Math.random()+MIN;
x.push(new Date(Math.round(timestamp) * 1000))
}
return x;
}
var traces = [];
var FOfMic = genFillamentDummys(17000);
traces.push({
x: FOfMic.x,
y: FOfMic.y,
type: 'scattergl',
mode: 'markers',
legendgroup: 'Fillament',
xaxis: 'x1',
yaxis: 'y1',
name: 'Fof-Mic',
marker: {
color: "green",
size: 3
},
});
var FOfMPP = genFillamentDummys(15000);
traces.push({
x: FOfMPP.x,
y: FOfMPP.y,
type: 'scattergl',
mode: 'markers',
legendgroup: 'Fillament',
xaxis: 'x1',
yaxis: 'y1',
name: 'FOf-MPP',
marker: {
color: "lightgreen",
size: 3
},
});
var FOfSml = genFillamentDummys(11000);
traces.push({
x: FOfSml.x,
y: FOfSml.y,
type: 'scattergl',
mode: 'markers',
legendgroup: 'Fillament',
xaxis: 'x1',
yaxis: 'y1',
name: 'FOf-Sml',
marker: {
color: "red",
size: 3
},
});
var FOfSPP = genFillamentDummys(9000);
traces.push({
x: FOfSPP.x,
y: FOfSPP.y,
type: 'scattergl',
mode: 'markers',
legendgroup: 'Fillament',
xaxis: 'x1',
yaxis: 'y1',
name: 'FOf-SPP',
marker: {
color: "lightred",
size: 3
},
});
var FOfLrg = genFillamentDummys(5000);
traces.push({
x: FOfLrg.x,
y: FOfLrg.y,
type: 'scattergl',
mode: 'markers',
legendgroup: 'Fillament',
xaxis: 'x1',
yaxis: 'y1',
name: 'FOf-Lrg',
marker: {
color: "blue",
size: 3
},
});
var FOfLPP = genFillamentDummys(3000);
traces.push({
x: FOfLPP.x,
y: FOfLPP.y,
type: 'scattergl',
mode: 'markers',
legendgroup: 'Fillament',
xaxis: 'x1',
yaxis: 'y1',
name: 'FOf-LPP',
marker: {
color: "lightblue",
size: 3
},
});
traces.push({
x: getRandomDates(2),
y: [12, 12],
type: 'scattergl',
mode: 'markers',
legendgroup: 'Events',
xaxis: 'x',
yaxis: 'y2',
name: 'Pwr Start',
marker: {
color: "green",
symbol: "triangle-up",
size: 10
},
});
traces.push({
x: getRandomDates(2),
y: [12, 12],
type: 'scattergl',
mode: 'markers',
legendgroup: 'Events',
xaxis: 'x',
yaxis: 'y2',
name: 'Pwr Stop',
marker: {
color: 'red',
symbol: "triangle-down",
size: 10
},
});
traces.push({
x: getRandomDates(4),
y: [10, 10, 10, 10],
type: 'scattergl',
mode: 'markers',
legendgroup: 'Events',
xaxis: 'x',
yaxis: 'y2',
name: 'Gitterwarnung',
marker: {
color: 'rgba(0, 0, 255, 0.75)',
size: 10
},
});
traces.push({
x: getRandomDates(3),
y: [10, 10, 10],
type: 'scattergl',
mode: 'markers',
legendgroup: 'Events',
xaxis: 'x',
yaxis: 'y2',
name: 'Gitterfehler',
marker: {
color: 'rgba(255, 0, 0, 0.75)',
symbol: "star-diamond",
size: 10
},
});
traces.push({
x: getRandomDates(3),
y: [10, 10, 10],
type: 'scattergl',
mode: 'markers',
legendgroup: 'Events',
xaxis: 'x',
yaxis: 'y2',
name: 'Gitterabschaltung',
marker: {
color: 'rgb(238, 130, 238, 0.75)',
symbol: "x",
size: 10
},
});
traces.push({
x: getRandomDates(4),
y: [8, 8, 8, 8],
type: 'scattergl',
mode: 'markers',
xaxis: 'x',
yaxis: 'y2',
name: 'TbAdj',
marker: {
color: 'green',
symbol: "star-dot",
size: 10
},
});
var RadIdx = genRadiationDummys(10000);
traces.push({
x: RadIdx.x,
y: RadIdx.y,
xaxis: 'x',
yaxis: 'y3',
mode: 'lines+markers',
name: 'RadIdx',
marker: {
color: 'darkturquoise',
size: 4
}
});
var LU = genRadiationDummys(40000);
traces.push({
x: LU.x,
y: LU.y,
xaxis: 'x',
yaxis: 'y4',
mode: 'lines+markers',
name: 'LU',
marker: {
color: 'darkviolet',
size: 4
}
});
var layout = {
showlegend: false,
xaxis: {
//range: [0, 10],
},
yaxis: {
domain: [0.55, 1],
range: [0, 21000],
fixedrange: true,
tickvals: [3000, 5000, 9000, 11000, 15000, 17000],
ticktext : ['FOf-LPP', 'FOf-Lrg', 'FOf-SPP', 'FOf-Sml', 'FOf-MPP', 'Fof-Mic']
},
yaxis2: {
domain: [0.3, 0.5],
range: [5, 14],
fixedrange: true,
tickvals: [8, 10, 12],
ticktext : ['TbAdj', 'GridErr', 'Pwr']
},
yaxis3: {
domain: [0, 0.25],
range: [0, 100000],
fixedrange: true,
side: 'left',
//gridcolor: 'darkturquoise',
tickfont: {
color: 'darkturquoise'
}
},
yaxis4: {
domain: [0, 0.25],
range: [0, 100000],
fixedrange: true,
overlaying: 'y3',
side: 'right',
//gridcolor: 'darkviolet',
tickfont: {
color: 'darkviolet'
}
},
};
var options = {
scrollZoom: true
}
Plotly.newPlot('chart', traces , layout, options);</script></body>
</html>
Raw
jsbin.davagaz.css
#chart {
width: 100%;
height: 960px;
}
Raw
jsbin.davagaz.js
// Disable Loop-Protection
// noprotect
var COUNT = 500;
var MIN = 1509408000;
var MAX = 1517788800;
function genFillamentDummys(offset) {
var varianz = 3000;
var step = (MAX-MIN)/COUNT;
var x = [];
var y = [];
var oldValue = 0;
var r = 0;
for (var i=MIN; i<MAX; i+=step) {
var rand = Math.random();
if (rand > 0.98) {
r = 0;
} else if (rand > 0.97) {
oldValue = varianz*0.2 * (Math.random()-0.5);
} else {
r = oldValue + (oldValue * (Math.random()-0.5))
oldValue = r;
}
x.push(new Date(Math.round(i) * 1000));
y.push(offset + r);
}
return {
x: x,
y: y
}
}
function genRadiationDummys(offset) {
var step = (MAX-MIN)/COUNT;
var x = [];
var y = [];
var r = 0;
for (var i=MIN; i<MAX; i+=step) {
var rand = Math.random();
if (rand > 0.8) {
r += Math.random()*500;
}
if (rand > 0.8) {
x.push(new Date(Math.round(i) * 1000));
y.push(offset + r);
}
}
return {
x: x,
y: y
}
}
function getRandomDates(count) {
var x = [];
for (var i=0; i<count; i++) {
var timestamp = (MAX-MIN)*Math.random()+MIN;
x.push(new Date(Math.round(timestamp) * 1000))
}
return x;
}
var traces = [];
var FOfMic = genFillamentDummys(17000);
traces.push({
x: FOfMic.x,
y: FOfMic.y,
type: 'scattergl',
mode: 'markers',
legendgroup: 'Fillament',
xaxis: 'x1',
yaxis: 'y1',
name: 'Fof-Mic',
marker: {
color: "green",
size: 3
},
});
var FOfMPP = genFillamentDummys(15000);
traces.push({
x: FOfMPP.x,
y: FOfMPP.y,
type: 'scattergl',
mode: 'markers',
legendgroup: 'Fillament',
xaxis: 'x1',
yaxis: 'y1',
name: 'FOf-MPP',
marker: {
color: "lightgreen",
size: 3
},
});
var FOfSml = genFillamentDummys(11000);
traces.push({
x: FOfSml.x,
y: FOfSml.y,
type: 'scattergl',
mode: 'markers',
legendgroup: 'Fillament',
xaxis: 'x1',
yaxis: 'y1',
name: 'FOf-Sml',
marker: {
color: "red",
size: 3
},
});
var FOfSPP = genFillamentDummys(9000);
traces.push({
x: FOfSPP.x,
y: FOfSPP.y,
type: 'scattergl',
mode: 'markers',
legendgroup: 'Fillament',
xaxis: 'x1',
yaxis: 'y1',
name: 'FOf-SPP',
marker: {
color: "lightred",
size: 3
},
});
var FOfLrg = genFillamentDummys(5000);
traces.push({
x: FOfLrg.x,
y: FOfLrg.y,
type: 'scattergl',
mode: 'markers',
legendgroup: 'Fillament',
xaxis: 'x1',
yaxis: 'y1',
name: 'FOf-Lrg',
marker: {
color: "blue",
size: 3
},
});
var FOfLPP = genFillamentDummys(3000);
traces.push({
x: FOfLPP.x,
y: FOfLPP.y,
type: 'scattergl',
mode: 'markers',
legendgroup: 'Fillament',
xaxis: 'x1',
yaxis: 'y1',
name: 'FOf-LPP',
marker: {
color: "lightblue",
size: 3
},
});
traces.push({
x: getRandomDates(2),
y: [12, 12],
type: 'scattergl',
mode: 'markers',
legendgroup: 'Events',
xaxis: 'x',
yaxis: 'y2',
name: 'Pwr Start',
marker: {
color: "green",
symbol: "triangle-up",
size: 10
},
});
traces.push({
x: getRandomDates(2),
y: [12, 12],
type: 'scattergl',
mode: 'markers',
legendgroup: 'Events',
xaxis: 'x',
yaxis: 'y2',
name: 'Pwr Stop',
marker: {
color: 'red',
symbol: "triangle-down",
size: 10
},
});
traces.push({
x: getRandomDates(4),
y: [10, 10, 10, 10],
type: 'scattergl',
mode: 'markers',
legendgroup: 'Events',
xaxis: 'x',
yaxis: 'y2',
name: 'Gitterwarnung',
marker: {
color: 'rgba(0, 0, 255, 0.75)',
size: 10
},
});
traces.push({
x: getRandomDates(3),
y: [10, 10, 10],
type: 'scattergl',
mode: 'markers',
legendgroup: 'Events',
xaxis: 'x',
yaxis: 'y2',
name: 'Gitterfehler',
marker: {
color: 'rgba(255, 0, 0, 0.75)',
symbol: "star-diamond",
size: 10
},
});
traces.push({
x: getRandomDates(3),
y: [10, 10, 10],
type: 'scattergl',
mode: 'markers',
legendgroup: 'Events',
xaxis: 'x',
yaxis: 'y2',
name: 'Gitterabschaltung',
marker: {
color: 'rgb(238, 130, 238, 0.75)',
symbol: "x",
size: 10
},
});
traces.push({
x: getRandomDates(4),
y: [8, 8, 8, 8],
type: 'scattergl',
mode: 'markers',
xaxis: 'x',
yaxis: 'y2',
name: 'TbAdj',
marker: {
color: 'green',
symbol: "star-dot",
size: 10
},
});
var RadIdx = genRadiationDummys(10000);
traces.push({
x: RadIdx.x,
y: RadIdx.y,
xaxis: 'x',
yaxis: 'y3',
mode: 'lines+markers',
name: 'RadIdx',
marker: {
color: 'darkturquoise',
size: 4
}
});
var LU = genRadiationDummys(40000);
traces.push({
x: LU.x,
y: LU.y,
xaxis: 'x',
yaxis: 'y4',
mode: 'lines+markers',
name: 'LU',
marker: {
color: 'darkviolet',
size: 4
}
});
var layout = {
showlegend: false,
xaxis: {
//range: [0, 10],
},
yaxis: {
domain: [0.55, 1],
range: [0, 21000],
fixedrange: true,
tickvals: [3000, 5000, 9000, 11000, 15000, 17000],
ticktext : ['FOf-LPP', 'FOf-Lrg', 'FOf-SPP', 'FOf-Sml', 'FOf-MPP', 'Fof-Mic']
},
yaxis2: {
domain: [0.3, 0.5],
range: [5, 14],
fixedrange: true,
tickvals: [8, 10, 12],
ticktext : ['TbAdj', 'GridErr', 'Pwr']
},
yaxis3: {
domain: [0, 0.25],
range: [0, 100000],
fixedrange: true,
side: 'left',
//gridcolor: 'darkturquoise',
tickfont: {
color: 'darkturquoise'
}
},
yaxis4: {
domain: [0, 0.25],
range: [0, 100000],
fixedrange: true,
overlaying: 'y3',
side: 'right',
//gridcolor: 'darkviolet',
tickfont: {
color: 'darkviolet'
}
},
};
var options = {
scrollZoom: true
}
Plotly.newPlot('chart', traces , layout, options);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment