Why does the screen offset to left while updating kivy garden graph? - graph

Question

I am trying to create a kivy application with live graph using 'garden graph'. There seems a bug which offset the screen to left while updating the graph. What could be the possible reason?
graph.py
from kivy.config import Config
Config.set('graphics', 'width', '1024')
Config.set('graphics', 'height', '600')
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.core.window import Window
from kivy.lang import Builder
from kivy.clock import Clock, mainthread
from kivy.uix.screenmanager import ScreenManager, Screen
"""
Graph References:
https://github.com/kivy-garden/graph
https://stackoverflow.com/questions/30821127/using-kivy-garden-graph-in-kv-language#answer-46522799
"""
from math import sin
import random
from kivy_garden.graph import Graph, MeshLinePlot
"""
Class to manage Testing Screen
"""
class WindowGraph(Screen, Widget):
def __init__(self, **kw):
super().__init__(**kw)
self.graph = None
self.plot = None
self.x = 101
self.generate_graph()
# Clock.schedule_interval(self.update_graph, 1/10)
#mainthread
def generate_graph(self):
self.graph = self.ids['graph_test']
self.plot = MeshLinePlot(color=[1, 0, 0, 1])
# self.plot.points = [(x, sin(x / 10.)) for x in range(0, 101)]
self.graph.add_plot(self.plot)
#mainthread
def update_graph(self, *args):
self.plot.points.append((self.x, random.random()))
self.graph.xmin = max(self.x - 50, 0)
self.graph.xmax = self.x + 1
self.x += 10
def control_graph(self):
self.update_graph()
"""
Class to manage all screens
"""
class WindowManager(ScreenManager):
pass
# Load kv builder file
kv = Builder.load_file("graph.kv")
class CTControlApp(App):
def build(self):
Window.clearcolor = (205/255, 205/255, 205/255, 1)
return kv
CTControlApp().run()
graph.kv
WindowManager:
WindowGraph:
<WindowGraph>
name: "layout_graph"
FloatLayout:
size: root.width, root.height
canvas.before :
Color:
rgba: 1, 1, 1, 1
Line:
width: 0.5
rectangle: self.x, self.y, self.width, self.height
Label:
text: "TESTING"
font_size : 22
pos_hint : {"x":0.01369*14, "y":0.03448*27}
size_hint:0.01369*45, 0.03448*2
background_color :1, 1, 1, 0
color : 1, 1, 1, 1
Graph:
id: graph_test
xlabel:'X'
ylabel:'Y'
x_ticks_minor:5
x_tics_major:25
y_ticks_major:1
y_grid_label:True
x_grid_label:True
padding:5
x_grid:True
y_grid:True
xmin:-0
xmax:100
ymin:-1
ymax:1
pos_hint: {"x":0.01369*2, "y":0.03448*2}
size_hint: 0.01369*56, 0.03448*25
Button :
id: button_graph_control
text: "UPDATE"
on_press: root.control_graph()
font_size : 24
pos_hint : {"x":0.01369*60, "y":0.03448*10}
size_hint:0.01369*10, 0.03448*3
background_color :0.5, 0.5, 0.5, 0.3
color : 1, 1, 1, 1
Screen before updating graph
Screen after updating graph
Please help me resolve this issue dear friends