// set global variables const limit = 10000; // How many points can be on the graph before sliding occurs const refreshInterval = 100; // Time between refresh intervals // set functions to retrieve function getData1() { if (listMeanTimeToClear.length > 0) { return listMeanTimeToClear[listMeanTimeToClear.length - 1]; } else { return 0; } } // set chart layout const layout1 = { title: { text: "<b>Average Time Per Passenger in This Simulation</b>", }, paper_bgcolor: "rgba(0,0,0,0)", plot_bgcolor: "rgba(0,0,0,0)", xaxis: { title: "Number of passengers", rangemode: "tozero" }, yaxis: { title: "Average time taken per passenger (s)", rangemode: "tozero" }, font: { family: "Graphik", size: 11 }, }; // plot all charts Plotly.newPlot( "tester", [ { y: [getData1()], mode: "lines", line: { color: "rebeccapurple", width: 1, }, }, ], layout1, { responsive: true } ); // set refresh interval and graph limit var cnt = 0; // to extend plot if (isRunning == true) { Plotly.extendTraces("tester", { y: [[getData1()]] }, [0]); cnt++; if (cnt > limit) { Plotly.relayout("tester", { xaxis: { range: [cnt - limit, cnt], }, }); } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter