Skip to content

Commit b65e96f

Browse files
koshchiikoshchii
committed
Add 1d barplots
1 parent 37a45fe commit b65e96f

File tree

3 files changed

+228
-0
lines changed

3 files changed

+228
-0
lines changed

‎src/EasyApp/Gui/Charts/Plotly1dBarPlotNew.qml‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import QtQuick
2+
import QtQuick.Controls
3+
import QtWebEngine
4+
5+
import EasyApp.Gui.Style as EaStyle
6+
import Gui.Globals as Globals
7+
8+
WebEngineView {
9+
id: chartView
10+
11+
property bool loadSucceededStatus: false
12+
property string xAxisTitle: ''
13+
property string yAxisTitle: ''
14+
15+
property var plotData: ({})
16+
17+
width: parent.width
18+
height: parent.height
19+
20+
url: Qt.resolvedUrl('../Html/Plotly1dBarPlotNew.html')
21+
22+
onLoadSucceededStatusChanged: {
23+
if (loadSucceededStatus) {
24+
redrawPlot()
25+
}
26+
}
27+
28+
onLoadingChanged: {
29+
// Bug 'loadRequest' is not declared - https://bugreports.qt.io/browse/QTBUG-84746
30+
//if (loadRequest.status === WebEngineView.LoadSucceededStatus) {
31+
if (loadProgress === 100) {
32+
loadSucceededStatus = true
33+
}
34+
}
35+
36+
onXAxisTitleChanged: {
37+
if (loadSucceededStatus) {
38+
setXAxisTitle()
39+
redrawPlot()
40+
}
41+
}
42+
43+
onYAxisTitleChanged: {
44+
if (loadSucceededStatus) {
45+
setYAxisTitle()
46+
redrawPlot()
47+
}
48+
}
49+
50+
onPlotDataChanged: {
51+
if (loadSucceededStatus) {
52+
setXyData()
53+
redrawPlot()
54+
}
55+
}
56+
57+
// Logic
58+
59+
function redrawPlot() {
60+
chartView.runJavaScript(`redrawPlot()`)
61+
}
62+
63+
function setXAxisTitle() {
64+
runJavaScript(`setXAxisTitle(${JSON.stringify(xAxisTitle)})`)
65+
}
66+
67+
function setYAxisTitle() {
68+
runJavaScript(`setYAxisTitle(${JSON.stringify(yAxisTitle)})`)
69+
}
70+
71+
function setXyData() {
72+
runJavaScript(`setXyData(${JSON.stringify(plotData)})`)
73+
}
74+
75+
function redrawPlotWithAnimation() {
76+
runJavaScript(`redrawPlotWithAnimation(${JSON.stringify(plotData)})`)
77+
}
78+
79+
}

‎src/EasyApp/Gui/Charts/qmldir‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ QtCharts1dValueAxis QtCharts1dValueAxis.qml
55
QtCharts1dBase QtCharts1dBase.qml
66
QtCharts1dMeasVsCalc QtCharts1dMeasVsCalc.qml
77

8+
Plotly1dBarPlotNew Plotly1dBarPlotNew.qml
89
Plotly1dLine Plotly1dLine.qml
910
Plotly1dLineNew Plotly1dLineNew.qml
1011
Plotly1dMeasVsCalc Plotly1dMeasVsCalc.qml

‎src/EasyApp/Gui/Html/Plotly1dBarPlotNew.html‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
6+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7+
<!-- <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> -->
8+
<script src="plotly-2.18.0.min.js"></script>
9+
10+
<style type="text/css">
11+
12+
@font-face {
13+
font-family: ChartFont;
14+
src:url("PTSans-Regular.ttf");
15+
}
16+
17+
* {
18+
margin: 0;
19+
padding: 0;
20+
box-sizing: border-box;
21+
}
22+
23+
html,
24+
body {
25+
height: 100%;
26+
}
27+
28+
body {
29+
overflow: hidden;
30+
font-family: 'ChartFont';
31+
}
32+
33+
#plotContainer {
34+
height: 100%;
35+
width: 100%;
36+
padding: 14px;
37+
position: relative;
38+
display: flex;
39+
flex-direction: column;
40+
align-items: center;
41+
justify-content: flex-start;
42+
}
43+
44+
#plotDiv {
45+
width: 100%;
46+
height: 100%;
47+
}
48+
49+
div.plotly-notifier { /* Plotly notifier element */
50+
visibility: hidden;
51+
}
52+
53+
</style>
54+
55+
</head>
56+
57+
<body>
58+
59+
<div id='plotContainer'>
60+
<div id='plotDiv'></div>
61+
</div>
62+
63+
<script>
64+
65+
///////
66+
// Data
67+
///////
68+
69+
let data = {
70+
'x': [1, 2, 3],
71+
'y': [10, 20, 30],
72+
}
73+
74+
/////////
75+
// Plotly
76+
/////////
77+
78+
// Default trace
79+
let trace = {
80+
name: '',
81+
type: 'bar',
82+
x: data.x,
83+
y: data.y,
84+
customdata: [],
85+
hovertemplate: ''
86+
}
87+
88+
// Plot dataset
89+
let plotTraces = [ trace ]
90+
91+
// Plot layout
92+
let plotLayout = {
93+
//autosize: true,
94+
xaxis: {
95+
title: 'x-title',
96+
autorange: true,
97+
},
98+
yaxis: {
99+
title: 'y-title',
100+
autorange: true,
101+
},
102+
}
103+
104+
// Plot config
105+
let plotConfig = {
106+
displayModeBar: true,
107+
displaylogo: false,
108+
}
109+
110+
// Create plot
111+
Plotly.newPlot('plotDiv', plotTraces, plotLayout, plotConfig)
112+
113+
/////////////////////////////////////////
114+
// Functionality to be accesable from QML
115+
/////////////////////////////////////////
116+
117+
function redrawPlot() {
118+
Plotly.redraw('plotDiv')
119+
}
120+
121+
function setXAxisTitle(newTitle) {
122+
plotLayout.xaxis.title = newTitle
123+
}
124+
125+
function setYAxisTitle(newTitle) {
126+
plotLayout.yaxis.title = newTitle
127+
}
128+
129+
function setXyData(newData) {
130+
trace.x = newData.x
131+
trace.y = newData.y
132+
trace.customdata = newData.customData
133+
trace.hovertemplate = newData.hoverTemplate
134+
}
135+
136+
function getDataFromJson(filename) {
137+
let request = new XMLHttpRequest()
138+
request.open("GET", filename, false)
139+
request.send(null)
140+
let data = JSON.parse(request.responseText)
141+
return data
142+
}
143+
144+
</script>
145+
146+
</body>
147+
148+
</html>

0 commit comments

Comments
 (0)