[will be dropped]From my own purpose.

README.md

@@ -662,6 +662,24 @@ chart.add_unaware_timestamp_collection_by_index(0, unaware_timestamp_collection,
 
 Et voilà !
 
+## CAUTIONS
+
+### Removing LiveChart.Chart from Gtk.Widget
+
+Removing LiveChart.Chart from Gtk.Widget without stopping auto-refresh causes memory leak.
+
+```vala
+var window = new Gtk.Window();
+var chart = new LiveChart.Chart();
+window.add(chart);
+
+//...
+chart.refresh_every(-1);  //Don't forget to stop auto-refresh if your app replaces the LiveChart.Chart widget.
+window.remove(chart);
+
+```
+
+
 ## How LiveChart versions works ?
 
 * For each new feature, the `minor` version number will be bumped

examples/live-chart.vala

@@ -57,7 +57,12 @@ public class Example : Gtk.Window {
             heat.add(heat_value);
             return true;
         });
-
+
+		Timeout.add(20000, () => {
+			chart.remove_serie(rss);
+			return false;
+		});
+
         var export_button = new Gtk.Button.with_label("Export to PNG");
 		export_button.clicked.connect (() => {
             try {

meson.build

@@ -1,13 +1,25 @@
-project('live-chart', ['vala', 'c'], version: '1.9.1')
+project('live-chart', ['vala', 'c'], version: '1.9.1-RO')
 
 cc = meson.get_compiler('c')
 libm = cc.find_library('m', required: true)
 
-gtk = dependency('gtk+-3.0', version: '>= 3.22')
+#setting up GEE
 gee = dependency('gee-0.8')
-
 vala_args = ['--target-glib=2.50']
 
+#setting up gtk
+gtk_major = 3
+
+if gtk_major == 3
+  gtk = dependency('gtk+-3.0', version: '>= 3.22')
+  vala_args += ['--define=GTK3']
+endif
+
+if gtk_major == 4
+  gtk = dependency('gtk4')
+  vala_args += ['--define=GTK4']
+endif
+
 if meson.version().version_compare('>= 0.47')
   if get_option('debug') == true 
     vala_args += ['--ccode', '--debug']

src/axis.vala

@@ -10,8 +10,8 @@ namespace LiveChart {
         public Path lines = new Path();
 
         public XAxis() {
-            axis.color = {0.5, 0.5, 0.5, 0.5};
-            lines.color = {0.5, 0.5, 0.5, 0.2};
+            axis.color = {0.5f, 0.5f, 0.5f, 0.5f};
+            lines.color = {0.5f, 0.5f, 0.5f, 0.2f};
         }
 
         public double get_ratio() {
@@ -51,8 +51,8 @@ namespace LiveChart {
         public YAxis(string unit = "") {
             this.unit = unit;
             ticks = get_ticks();
-            axis.color = {0.5, 0.5, 0.5, 0.5};            
-            lines.color = {0.5, 0.5, 0.5, 0.2};            
+            axis.color = {0.5f, 0.5f, 0.5f, 0.5f};            
+            lines.color = {0.5f, 0.5f, 0.5f, 0.2f};            
             bounds.notify["upper"].connect(() => {
                 this.ticks = get_ticks();
             });

src/background.vala

@@ -23,10 +23,10 @@ namespace LiveChart {
         [Version (deprecated = true, deprecated_since = "1.8.0", replacement = "Background.color")]
         public Gdk.RGBA main_color { 
             get; set; default= Gdk.RGBA() {
-                red = 0.1,
-                green = 0.1,
-                blue = 0.1,
-                alpha = 1.0
+                red = 0.1f,
+                green = 0.1f,
+                blue = 0.1f,
+                alpha = 1.0f
             };
         }
 

src/chart.vala

@@ -17,25 +17,48 @@ namespace LiveChart {
         public Series series;
 
         private uint source_timeout = 0;
-
+        private double play_ratio = 1.0;
+
+        private int64 prev_time;
+
         public Chart(Config config = new Config()) {
             this.config = config;
+
+#if GTK3
             this.size_allocate.connect((allocation) => {
                 this.config.height = allocation.height;
                 this.config.width = allocation.width;
             });
-
             this.draw.connect(render);
-
+#endif            
+#if GTK4
+            this.set_draw_func((_, ctx, width, height) => {
+                this.config.height = height;
+                this.config.width = width;
+                this.render(_, ctx);
+            });
+#endif
             this.refresh_every(100);
 
             series = new Series(this);
+            this.destroy.connect(() => {
+                refresh_every(-1);
+                remove_all_series();
+            });
         }
 
         public void add_serie(Serie serie) {
             this.series.register(serie);
         }
 
+        public void remove_serie(Serie serie){
+            this.series.remove_serie(serie);
+        }
+
+        public void remove_all_series(){
+            this.series.remove_all();
+        }
+
         [Version (deprecated = true, deprecated_since = "1.7.0", replacement = "Retrieve the Serie from Chart.series (or from the serie you created) and add the value using serie.add")]
         public void add_value(Serie serie, double value) {
             serie.add(value);
@@ -72,26 +95,36 @@ namespace LiveChart {
         }
 
         public void to_png(string filename) throws Error {
+#if GTK3
             var window = this.get_window();
             if (window == null) {
                 throw new ChartError.EXPORT_ERROR("Chart is not realized yet");
             }
             var pixbuff = Gdk.pixbuf_get_from_window(window, 0, 0, window.get_width(), window.get_height());
             pixbuff.savev(filename, "png", {}, {});
+#endif
         }
 
-        public void refresh_every(int ms) {
+        public void refresh_every(int ms, double play_ratio = 1.0) {
+            this.play_ratio = play_ratio;
             if (source_timeout != 0) {
                 GLib.Source.remove(source_timeout); 
+                source_timeout = 0;
+            }
+            if(ms > 0){
+                this.prev_time = GLib.get_monotonic_time() / 1000;
+                source_timeout = Timeout.add(ms, () => {
+                    var now = GLib.get_monotonic_time() / 1000;
+                    config.time.current += (int64)((now - this.prev_time) * this.play_ratio);
+                    this.prev_time = now;
+                    this.queue_draw();
+                    return true;
+                });
             }
-            source_timeout = Timeout.add(ms, () => {
-                this.queue_draw();
-                return true;
-            });
         }
 
         private bool render(Gtk.Widget _, Context ctx) {
-
+            ctx.set_antialias(Cairo.Antialias.NONE);
             config.configure(ctx, legend);
 
             this.background.draw(ctx, config);

src/config.vala

@@ -38,11 +38,28 @@ namespace LiveChart {
         public int width;
         public int height;
     }
+
+
 
     public class Config {
-
+		private int _width = 0;
         public int width {
-            get; set; default = 0;
+            get{
+				return _width;
+			}
+			set{
+				if(_width != value){
+					//i = config.width - config.padding.right; i > config.padding.left; i -= config.x_axis.tick_length
+					if(x_axis.tick_length <= 0.0){
+						time.head_offset = -1.0;
+					}
+					else{
+						var tmp = value / x_axis.tick_length;
+						time.head_offset = tmp * x_axis.tick_interval * 1000.0;
+					}
+				}
+				_width = value;
+			}
         }
 
         public int height {
@@ -53,7 +70,16 @@ namespace LiveChart {
 
         public YAxis y_axis = new YAxis();
         public XAxis x_axis = new XAxis();
-
+
+        public struct TimeSeek {
+            int64 current;
+            double head_offset;
+        }
+        public TimeSeek time = {
+            GLib.get_real_time() / 1000,
+            0
+        };
+
         internal Gee.ArrayList<string> categories;
 
         public Boundaries boundaries() {

src/font.vala

@@ -14,7 +14,7 @@ namespace LiveChart {
             face = "Sans serif";
             slant = FontSlant.NORMAL;
             weight = FontWeight.NORMAL;
-            color = {0.4, 0.4, 0.4, 1.0};
+			color = {0.4f, 0.4f, 0.4f, 1.0f};
         }
 
         public void configure(Context ctx) {

src/grid.vala

@@ -14,10 +14,10 @@ namespace LiveChart {
         public bool visible { get; set; default = true; }
         public Gdk.RGBA main_color { 
             get; set; default= Gdk.RGBA() {
-                red = 0.4,
-                green = 0.4,
-                blue = 0.4,
-                alpha = 1.0
+                red = 0.4f,
+                green = 0.4f,
+                blue = 0.4f,
+                alpha = 1.0f
             };
         }
 
@@ -67,7 +67,8 @@ namespace LiveChart {
         }
 
         protected void render_vgrid(Context ctx, Config config) {
-            var time = new DateTime.now().to_unix();
+            // var time = new DateTime.now().to_unix();
+            var time = config.time.current / 1000;
             for (double i = config.width - config.padding.right; i > config.padding.left; i -= config.x_axis.tick_length) {
                 if (config.x_axis.lines.visible) {
                     config.x_axis.lines.configure(ctx);

src/legend.vala

@@ -15,17 +15,26 @@ namespace LiveChart {
             height=0
         };
         public Gdk.RGBA main_color { 
-            get; set; default= Gdk.RGBA() {
-                red = 1.0,
-                green = 1.0,
-                blue = 1.0,
-                alpha = 1.0
+            get; set; 
+			default= Gdk.RGBA() {
+                red = 1.0f,
+                green = 1.0f,
+                blue = 1.0f,
+                alpha = 1.0f
             };
         }
         public void add_legend(Serie serie) {
             series.add(serie);
         }
-
+        public void remove_legend(Serie serie){
+            if(series.contains(serie)){
+                series.remove(serie);
+            }
+        }
+        public void remove_all_legend(){
+            series.clear();
+        }
+
         public abstract void draw(Context ctx, Config config);
         public BoundingBox get_bounding_box() {
             return bounding_box;

src/path.vala

@@ -16,7 +16,7 @@ namespace LiveChart {
         public Gdk.RGBA color { get; set; }
         public bool visible {get; set; }
 
-        public Path(double width = 0.5, Gdk.RGBA color = {1.0, 1.0, 1.0, 1.0}, bool visible = true, Dash? dash = null) {
+        public Path(double width = 0.5, Gdk.RGBA color = {1.0f, 1.0f, 1.0f, 1.0f}, bool visible = true, Dash? dash = null) {
             this.width = width;
             this.color = color;
             this.visible = true;

src/points.vala

@@ -55,11 +55,27 @@ namespace LiveChart {
             var boundaries = config.boundaries();
 
             Points points = new Points();
-            if (values.size > 0) {
-                var last_value = values.last();
-                points.realtime_delta = (((GLib.get_real_time() / 1000) - last_value.timestamp) * config.x_axis.get_ratio()) / 1000;
+            if (values.size > 1) {
+                /// \note SortedSet<G>.sub_set won't work as I expected correctly.
+                SortedSet<TimestampedValue?> renderee = null;
+                TimestampedValue border = {(double)config.time.current + 1, 0.0};
+                renderee = values.head_set(border);
 
-                foreach (TimestampedValue value in values) {
+                if(config.time.head_offset >= 0.0 && renderee.size > 0){
+                    border.timestamp -= config.time.head_offset;
+                    if(renderee.first().timestamp < border.timestamp){
+                        renderee = renderee.tail_set(border);
+                    }
+                }
+
+                //var renderee = values;
+                if(renderee.size <= 2){
+                    return points;
+                }
+                var last_value = renderee.last();
+                //points.realtime_delta = (((GLib.get_real_time() / 1000) - last_value.timestamp) * config.x_axis.get_ratio()) / 1000;
+                points.realtime_delta = ((config.time.current - last_value.timestamp) * config.x_axis.get_ratio()) / 1000;
+                foreach (TimestampedValue value in renderee) {
                     var point = Points.value_to_point(last_value, value, config, boundaries, points.realtime_delta);
                     points.add(point);
                 }