12 files changed, 298 insertions, 61 deletions

diff --git a/.htaccess b/.htaccess
index 956f31c..66eaee0 100644
--- a/.htaccess
+++ b/.htaccess
@@ -1,4 +1,6 @@
 Options -Indexes
 
 RewriteEngine On
-RewriteRule     ^.git(ignore|/) - [F,L]
+RewriteRule ^.git(ignore|/) - [F,L]
+
+RewriteRule ^rrd/(.*) rrd.php?path=$1
diff --git a/conf/config.php b/conf/config.php
index 288e085..99190f1 100644
--- a/conf/config.php
+++ b/conf/config.php
@@ -42,6 +42,9 @@ $CONFIG['term'] = array(
 # show graphs in bits or bytes
 $CONFIG['network_datasize'] = 'bytes';
 
+# png or canvas graphs
+$CONFIG['graph_type'] = 'png';
+
 # browser cache time for the graphs (in seconds)
 $CONFIG['cache'] = 90;
 
diff --git a/detail.php b/detail.php
index 5aa38de..c7df632 100644
--- a/detail.php
+++ b/detail.php
@@ -47,7 +47,12 @@ foreach($CONFIG['term'] as $key => $s) {
 }
 print "</ul>\n";
 
-printf('<img src="%s%s">'."\n", $CONFIG['weburl'], build_url('graph.php', $_GET));
+if ($CONFIG['graph_type'] == 'canvas') {
+        chdir($CONFIG['webdir']);
+        include $CONFIG['webdir'].'/plugin/'.$plugin.'.php';
+} else {
+        printf('<img src="%s%s">'."\n", $CONFIG['weburl'], build_url('graph.php', $_GET));
+}
 echo '</div>';
 
 html_end();
diff --git a/inc/collectd.inc.php b/inc/collectd.inc.php
index ad15774..1df8bb0 100644
--- a/inc/collectd.inc.php
+++ b/inc/collectd.inc.php
@@ -169,12 +169,21 @@ function graphs_from_plugin($host, $plugin, $overview=false) {
                         ? $CONFIG['time_range'][$plugin]
                         : $CONFIG['time_range']['default'];
 
-                printf('<a href="%s%s"><img src="%s%s"></a>'."\n",
-                        $CONFIG['weburl'],
-                        build_url('detail.php', $items, $time),
-                        $CONFIG['weburl'],
-                        build_url('graph.php', $items, $time)
-                );
+                if ($CONFIG['graph_type'] == 'canvas') {
+                        chdir($CONFIG['webdir']);
+                        isset($items['p']) ? $_GET['p'] = $items['p'] : $_GET['p'] = '';
+                        isset($items['pi']) ? $_GET['pi'] = $items['pi'] : $_GET['pi'] = '';
+                        isset($items['t']) ? $_GET['t'] = $items['t'] : $_GET['t'] = '';
+                        isset($items['ti']) ? $_GET['ti'] = $items['ti'] : $_GET['ti'] = '';
+                        include $CONFIG['webdir'].'/plugin/'.$plugin.'.php';
+                } else {
+                        printf('<a href="%s%s"><img src="%s%s"></a>'."\n",
+                                $CONFIG['weburl'],
+                                build_url('detail.php', $items, $time),
+                                $CONFIG['weburl'],
+                                build_url('graph.php', $items, $time)
+                        );
+                }
         }
 }
 
diff --git a/inc/functions.inc.php b/inc/functions.inc.php
index a72a589..6642e51 100644
--- a/inc/functions.inc.php
+++ b/inc/functions.inc.php
@@ -30,6 +30,21 @@ function validate_get($value, $type) {
         return $value;
 }
 
+function validateRRDPath($base, $path) {
+        $realpath = realpath(sprintf('%s/%s', $base, $path));
+
+        if (strpos($realpath, $base) === false)
+                return false;
+
+        if (strpos($realpath, $base) !== 0)
+                return false;
+
+        if (!preg_match('/\.rrd$/', $realpath))
+                return false;
+
+        return $realpath;
+}
+
 function crc32hex($str) {
         return sprintf("%x",crc32($str));
 }
diff --git a/inc/html.inc.php b/inc/html.inc.php
index a9e6a94..a0e2c8d 100644
--- a/inc/html.inc.php
+++ b/inc/html.inc.php
@@ -19,6 +19,26 @@ function html_start() {
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         <title>CGP{$path}</title>
         <link rel="stylesheet" href="{$CONFIG['weburl']}layout/style.css" type="text/css">
+
+EOT;
+
+        if ($CONFIG['graph_type'] == 'canvas') {
+                echo <<<EOT
+        <script type="text/javascript" src="{$CONFIG['weburl']}js/sprintf.js"></script>
+        <script type="text/javascript" src="{$CONFIG['weburl']}js/strftime.js"></script>
+        <script type="text/javascript" src="{$CONFIG['weburl']}js/RrdRpn.js"></script>
+        <script type="text/javascript" src="{$CONFIG['weburl']}js/RrdTime.js"></script>
+        <script type="text/javascript" src="{$CONFIG['weburl']}js/RrdGraph.js"></script>
+        <script type="text/javascript" src="{$CONFIG['weburl']}js/RrdGfxCanvas.js"></script>
+        <script type="text/javascript" src="{$CONFIG['weburl']}js/binaryXHR.js"></script>
+        <script type="text/javascript" src="{$CONFIG['weburl']}js/rrdFile.js"></script>
+        <script type="text/javascript" src="{$CONFIG['weburl']}js/RrdDataFile.js"></script>
+        <script type="text/javascript" src="{$CONFIG['weburl']}js/RrdCmdLine.js"></script>
+
+EOT;
+        }
+
+echo <<<EOT
 </head>
 <body>
 
@@ -52,6 +72,17 @@ function html_end() {
 <div id="footer">
 <hr><span class="small"><a href="http://pommi.nethuis.nl/category/cgp/" rel="external">Collectd Graph Panel</a> ({$version}) is distributed under the <a href="{$CONFIG['weburl']}doc/LICENSE" rel="licence">GNU General Public License (GPLv3)</a></span>
 </div>
+
+EOT;
+
+        if ($CONFIG['graph_type'] == 'canvas') {
+                echo <<<EOT
+<script type="text/javascript" src="{$CONFIG['weburl']}js/CGP.js"></script>
+
+EOT;
+        }
+
+echo <<<EOT
 </body>
 </html>
 EOT;
diff --git a/js/CGP.js b/js/CGP.js
new file mode 100644
index 0000000..3c9ea90
--- /dev/null
+++ b/js/CGP.js
@@ -0,0 +1,124 @@
+var mouse_move = function (e) {
+        if (this.rrdgraph.mousedown) {
+                var factor = (this.rrdgraph.end - this.rrdgraph.start) / this.rrdgraph.xsize;
+                var x = e.pageX - this.offsetLeft;
+                var diff = x - this.rrdgraph.mousex;
+                var difffactor = Math.abs(Math.round(diff*factor));
+                if (diff > 0) {
+                        this.rrdgraph.end -= difffactor;
+                        this.rrdgraph.start -= difffactor;
+                } else {
+                        this.rrdgraph.end += difffactor;
+                        this.rrdgraph.start += difffactor;
+                }
+                this.rrdgraph.mousex = x;
+                try {
+                        this.rrdgraph.graph_paint();
+                } catch (e) {
+                        alert(e+"\n"+e.stack);
+                }
+        }
+};
+var mouse_up = function (e) {
+        this.rrdgraph.mousedown = false;
+        this.style.cursor="default";
+};
+var mouse_down = function (e) {
+        var x = e.pageX - this.offsetLeft;
+        this.rrdgraph.mousedown = true;
+        this.rrdgraph.mousex = x;
+        this.style.cursor="move";
+};
+var mouse_scroll = function (e) {
+        e = e ? e : window.event;
+        var wheel = e.detail ? e.detail * -1 : e.wheelDelta / 40;
+        var cstime = this.stime[this.stidx];
+        if (wheel < 0) {
+                this.stidx++;
+                if (this.stidx >= this.stlen) this.stidx = this.stlen-1;
+        } else {
+                this.stidx--;
+                if (this.stidx < 0) this.stidx = 0;
+        }
+        if (cstime !== this.stime[this.stidx])  {
+                var middle = this.rrdgraph.start + Math.abs(Math.round((this.rrdgraph.end - this.rrdgraph.start)/2));
+                this.rrdgraph.start = Math.round(middle - this.stime[this.stidx]/2);
+                this.rrdgraph.end = this.rrdgraph.start + this.stime[this.stidx];
+
+                try {
+                        this.rrdgraph.graph_paint();
+                } catch (e) {
+                        alert(e+"\n"+e.stack);
+                }
+        }
+
+        if(e.stopPropagation)
+                e.stopPropagation();
+        if(e.preventDefault)
+                e.preventDefault();
+        e.cancelBubble = true;
+        e.cancel = true;
+        e.returnValue = false;
+        return false;
+};
+
+function draw(id) {
+        RrdGraph.prototype.mousex = 0;
+        RrdGraph.prototype.mousedown = false;
+
+        var cmdline = document.getElementById(id).innerHTML;
+        var gfx = new RrdGfxCanvas(id);
+        var fetch = new RrdDataFile();
+        var rrdcmdline = null;
+
+        try {
+                rrdcmdline = new RrdCmdLine(gfx, fetch, cmdline);
+        } catch (e) {
+                alert(e+"\n"+e.stack);
+        }
+
+        var rrdgraph = rrdcmdline.graph;
+
+        gfx.canvas.stime = [ 300, 600, 900, 1200, 1800, 3600, 7200, 21600, 43200, 86400, 172800, 604800, 2592000, 5184000, 15768000, 31536000 ];
+        gfx.canvas.stlen = gfx.canvas.stime.length;
+        gfx.canvas.stidx = 0;
+
+        gfx.canvas.rrdgraph = rrdgraph;
+        gfx.canvas.removeEventListener('mousemove', mouse_move, false);
+        gfx.canvas.addEventListener('mousemove', mouse_move, false);
+        gfx.canvas.removeEventListener('mouseup', mouse_up, false);
+        gfx.canvas.addEventListener('mouseup', mouse_up, false);
+        gfx.canvas.removeEventListener('mousedown', mouse_down, false);
+        gfx.canvas.addEventListener('mousedown', mouse_down, false);
+        gfx.canvas.removeEventListener('mouseout', mouse_up, false);
+        gfx.canvas.addEventListener('mouseout', mouse_up, false);
+        gfx.canvas.removeEventListener('DOMMouseScroll', mouse_scroll, false);
+        gfx.canvas.addEventListener('DOMMouseScroll', mouse_scroll, false);
+        gfx.canvas.removeEventListener('mousewheel', mouse_scroll, false);
+        gfx.canvas.addEventListener('mousewheel', mouse_scroll, false);
+
+        var diff = rrdgraph.end - rrdgraph.start;
+        for (var i=0; i < gfx.canvas.stlen; i++) {
+                if (gfx.canvas.stime[i] >= diff)  break;
+        }
+        if (i === gfx.canvas.stlen) gfx.canvas.stidx = gfx.canvas.stlen-1;
+        else gfx.canvas.stidx = i;
+
+        try {
+                rrdgraph.graph_paint();
+        } catch (e) {
+                alert(e+"\n"+e.stack);
+        }
+}
+
+function drawAll()
+{
+        var list=[];
+        var a=document.getElementsByClassName('rrd');
+        for (var i=0,l=a.length;i<l;i++)
+        {
+                draw(a[i].getAttribute('id'))
+        }
+}
+
+window.onload = drawAll()
diff --git a/rrd.php b/rrd.php
new file mode 100644
index 0000000..58614a0
--- /dev/null
+++ b/rrd.php
@@ -0,0 +1,24 @@
+<?php
+
+require_once 'conf/common.inc.php';
+require_once 'inc/functions.inc.php';
+require_once 'inc/html.inc.php';
+
+if ($file = validateRRDPath($CONFIG['datadir'], $_GET['path'])) {
+        header('Content-Type: application/octet-stream');
+        header('Content-Disposition: attachment; filename='.basename($file));
+        header("Expires: " .date(DATE_RFC822,strtotime($CONFIG['cache']." seconds")));
+    ob_clean();
+    flush();
+    readfile($file);
+} else {
+        header('HTTP/1.0 403 Forbidden');
+
+        html_start();
+        echo <<<EOT
+<h2>Forbidden</h2>
+<p><a href="{$CONFIG['weburl']}">Return home...</a></p>
+
+EOT;
+        html_end();
+}
diff --git a/type/Default.class.php b/type/Default.class.php
index 514d1c1..c9220fa 100644
--- a/type/Default.class.php
+++ b/type/Default.class.php
@@ -36,6 +36,7 @@ class Type_Default {
                 if (empty($this->width)) $this->width = $config['width'];
                 $this->heigth = GET('y');
                 if (empty($this->heigth)) $this->heigth = $config['heigth'];
+                $this->graph_type = $config['graph_type'];
         }
 
         function rainbow_colors() {
@@ -108,6 +109,13 @@ class Type_Default {
                 return str_replace(':', '\:', $value);
         }
 
+        function parse_filename($file) {
+                if ($this->graph_type == 'canvas') {
+                        $file = 'rrd' . str_replace($this->datadir, '', $file);
+                }
+                return $this->rrd_escape($file);
+        }
+
         function rrd_files() {
                 $files = $this->get_filenames();
 
@@ -153,35 +161,51 @@ class Type_Default {
                 return $files;
         }
 
-        function rrd_graph($debug=false) {
+        function rrd_graph($debug = false) {
                 if (!$this->colors)
                         $this->rainbow_colors();
 
                 $graphdata = $this->rrd_gen_graph();
 
-                if(!$debug) {
-                        # caching
-                        if (is_numeric($this->cache) && $this->cache > 0)
-                                header("Expires: " . date(DATE_RFC822,strtotime($this->cache." seconds")));
-                        header("content-type: image/png");
-                        $graphdata = implode(' ', $graphdata);
-                        echo `$graphdata`;
-                } elseif ($debug == 'cmd') {
-                        print '<pre>';
-                        foreach ($graphdata as $d) {
-                                printf("%s \\\n", $d);
-                        }
-                        print '</pre>';
-                } else {
-                        print '<pre>';
-                        print_r($graphdata);
-                        print '</pre>';
+                $style = $debug !== false ? $debug : $this->graph_type;
+                switch ($style) {
+                        case 'cmd':
+                                print '<pre>';
+                                foreach ($graphdata as $d) {
+                                        printf("%s \\\n", $d);
+                                }
+                                print '</pre>';
+                        break;
+                        case 'canvas':
+                                printf('<canvas id="%s" class="rrd">', sha1(serialize($graphdata)));
+                                foreach ($graphdata as $d) {
+                                        printf("%s\n", $d);
+                                }
+                                print '</canvas>';
+                        break;
+                        case 'debug':
+                        case 1:
+                                print '<pre>';
+                                print_r($graphdata);
+                                print '</pre>';
+                        break;
+                        case 'png':
+                        default:
+                                # caching
+                                if (is_numeric($this->cache) && $this->cache > 0)
+                                        header("Expires: " . date(DATE_RFC822,strtotime($this->cache." seconds")));
+                                header("content-type: image/png");
+                                $graphdata = implode(' ', $graphdata);
+                                echo `$graphdata`;
+                        break;
                 }
         }
 
         function rrd_options() {
-                $rrdgraph[] = $this->rrdtool;
-                $rrdgraph[] = 'graph - -a PNG';
+                if ($this->graph_type != 'canvas') {
+                        $rrdgraph[] = $this->rrdtool;
+                        $rrdgraph[] = 'graph - -a PNG';
+                }
                 if ($this->rrdtool_opts != '')
                         $rrdgraph[] = $this->rrdtool_opts;
                 $rrdgraph[] = sprintf('-w %d', is_numeric($this->width) ? $this->width : 400);
@@ -260,9 +284,9 @@ class Type_Default {
                 $i=0;
                 foreach ($this->tinstances as $tinstance) {
                         foreach ($this->data_sources as $ds) {
-                                $rrdgraph[] = sprintf('DEF:min_%s%s="%s":%s:MIN', crc32hex($sources[$i]), $raw, $this->rrd_escape($this->files[$tinstance]), $ds);
-                                $rrdgraph[] = sprintf('DEF:avg_%s%s="%s":%s:AVERAGE', crc32hex($sources[$i]), $raw, $this->rrd_escape($this->files[$tinstance]), $ds);
-                                $rrdgraph[] = sprintf('DEF:max_%s%s="%s":%s:MAX', crc32hex($sources[$i]), $raw, $this->rrd_escape($this->files[$tinstance]), $ds);
+                                $rrdgraph[] = sprintf('DEF:min_%s%s=%s:%s:MIN', crc32hex($sources[$i]), $raw, $this->parse_filename($this->files[$tinstance]), $ds);
+                                $rrdgraph[] = sprintf('DEF:avg_%s%s=%s:%s:AVERAGE', crc32hex($sources[$i]), $raw, $this->parse_filename($this->files[$tinstance]), $ds);
+                                $rrdgraph[] = sprintf('DEF:max_%s%s=%s:%s:MAX', crc32hex($sources[$i]), $raw, $this->parse_filename($this->files[$tinstance]), $ds);
                                 $i++;
                         }
                 }
@@ -292,11 +316,11 @@ class Type_Default {
                 foreach ($sources as $source) {
                         $dsname = $this->ds_names[$source] != '' ? $this->ds_names[$source] : $source;
                         $color = is_array($this->colors) ? (isset($this->colors[$source])?$this->colors[$source]:$this->colors[$c++]): $this->colors;
-                        $rrdgraph[] = sprintf('LINE1:avg_%s#%s:\'%s\'', crc32hex($source), $this->validate_color($color), $this->rrd_escape($dsname));
-                        $rrdgraph[] = sprintf('GPRINT:min_%s:MIN:\'%s Min,\'', crc32hex($source), $this->rrd_format);
-                        $rrdgraph[] = sprintf('GPRINT:avg_%s:AVERAGE:\'%s Avg,\'', crc32hex($source), $this->rrd_format);
-                        $rrdgraph[] = sprintf('GPRINT:max_%s:MAX:\'%s Max,\'', crc32hex($source), $this->rrd_format);
-                        $rrdgraph[] = sprintf('GPRINT:avg_%s:LAST:\'%s Last\\l\'', crc32hex($source), $this->rrd_format);
+                        $rrdgraph[] = sprintf('"LINE1:avg_%s#%s:%s"', crc32hex($source), $this->validate_color($color), $this->rrd_escape($dsname));
+                        $rrdgraph[] = sprintf('"GPRINT:min_%s:MIN:%s Min,"', crc32hex($source), $this->rrd_format);
+                        $rrdgraph[] = sprintf('"GPRINT:avg_%s:AVERAGE:%s Avg,"', crc32hex($source), $this->rrd_format);
+                        $rrdgraph[] = sprintf('"GPRINT:max_%s:MAX:%s Max,"', crc32hex($source), $this->rrd_format);
+                        $rrdgraph[] = sprintf('"GPRINT:avg_%s:LAST:%s Last\\l"', crc32hex($source), $this->rrd_format);
                 }
 
                 return $rrdgraph;
diff --git a/type/GenericIO.class.php b/type/GenericIO.class.php
index 42314fd..0cf3e22 100644
--- a/type/GenericIO.class.php
+++ b/type/GenericIO.class.php
@@ -15,9 +15,9 @@ class Type_GenericIO extends Type_Default {
                 $i=0;
                 foreach ($this->tinstances as $tinstance) {
                         foreach ($this->data_sources as $ds) {
-                                $rrdgraph[] = sprintf('DEF:min_%s%s="%s":%s:MIN', crc32hex($sources[$i]), $raw, $this->rrd_escape($this->files[$tinstance]), $ds);
-                                $rrdgraph[] = sprintf('DEF:avg_%s%s="%s":%s:AVERAGE', crc32hex($sources[$i]), $raw, $this->rrd_escape($this->files[$tinstance]), $ds);
-                                $rrdgraph[] = sprintf('DEF:max_%s%s="%s":%s:MAX', crc32hex($sources[$i]), $raw, $this->rrd_escape($this->files[$tinstance]), $ds);
+                                $rrdgraph[] = sprintf('DEF:min_%s%s=%s:%s:MIN', crc32hex($sources[$i]), $raw, $this->parse_filename($this->files[$tinstance]), $ds);
+                                $rrdgraph[] = sprintf('DEF:avg_%s%s=%s:%s:AVERAGE', crc32hex($sources[$i]), $raw, $this->parse_filename($this->files[$tinstance]), $ds);
+                                $rrdgraph[] = sprintf('DEF:max_%s%s=%s:%s:MAX', crc32hex($sources[$i]), $raw, $this->parse_filename($this->files[$tinstance]), $ds);
                                 if (!$this->scale)
                                         $rrdgraph[] = sprintf('VDEF:tot_%s=avg_%1$s,TOTAL', crc32hex($sources[$i]));
                                 $i++;
@@ -52,12 +52,12 @@ class Type_GenericIO extends Type_Default {
 
                 foreach($sources as $source) {
                         $dsname = $this->ds_names[$source] != '' ? $this->ds_names[$source] : $source;
-                        $rrdgraph[] = sprintf('LINE1:avg_%s#%s:\'%s\'', crc32hex($source), $this->colors[$source], $this->rrd_escape($dsname));
-                        $rrdgraph[] = sprintf('GPRINT:min_%s:MIN:\'%s Min,\'', crc32hex($source), $this->rrd_format);
-                        $rrdgraph[] = sprintf('GPRINT:avg_%s:AVERAGE:\'%s Avg,\'', crc32hex($source), $this->rrd_format);
-                        $rrdgraph[] = sprintf('GPRINT:max_%s:MAX:\'%s Max,\'', crc32hex($source), $this->rrd_format);
-                        $rrdgraph[] = sprintf('GPRINT:avg_%s:LAST:\'%s Last\'', crc32hex($source), $this->rrd_format);
-                        $rrdgraph[] = sprintf('GPRINT:tot_%s:\'%s Total\l\'',crc32hex($source), $this->rrd_format);
+                        $rrdgraph[] = sprintf('"LINE1:avg_%s#%s:%s"', crc32hex($source), $this->colors[$source], $this->rrd_escape($dsname));
+                        $rrdgraph[] = sprintf('"GPRINT:min_%s:MIN:%s Min,"', crc32hex($source), $this->rrd_format);
+                        $rrdgraph[] = sprintf('"GPRINT:avg_%s:AVERAGE:%s Avg,"', crc32hex($source), $this->rrd_format);
+                        $rrdgraph[] = sprintf('"GPRINT:max_%s:MAX:%s Max,"', crc32hex($source), $this->rrd_format);
+                        $rrdgraph[] = sprintf('"GPRINT:avg_%s:LAST:%s Last"', crc32hex($source), $this->rrd_format);
+                        $rrdgraph[] = sprintf('"GPRINT:tot_%s:%s Total\l"',crc32hex($source), $this->rrd_format);
                 }
                 
                 return $rrdgraph;
diff --git a/type/GenericStacked.class.php b/type/GenericStacked.class.php
index 7c65ddd..5d1a556 100644
--- a/type/GenericStacked.class.php
+++ b/type/GenericStacked.class.php
@@ -15,9 +15,9 @@ class Type_GenericStacked extends Type_Default {
                 $i=0;
                 foreach ($this->tinstances as $tinstance) {
                         foreach ($this->data_sources as $ds) {
-                                $rrdgraph[] = sprintf('DEF:min_%s%s="%s":%s:MIN', crc32hex($sources[$i]), $raw, $this->rrd_escape($this->files[$tinstance]), $ds);
-                                $rrdgraph[] = sprintf('DEF:avg_%s%s="%s":%s:AVERAGE', crc32hex($sources[$i]), $raw, $this->rrd_escape($this->files[$tinstance]), $ds);
-                                $rrdgraph[] = sprintf('DEF:max_%s%s="%s":%s:MAX', crc32hex($sources[$i]), $raw, $this->rrd_escape($this->files[$tinstance]), $ds);
+                                $rrdgraph[] = sprintf('DEF:min_%s%s=%s:%s:MIN', crc32hex($sources[$i]), $raw, $this->parse_filename($this->files[$tinstance]), $ds);
+                                $rrdgraph[] = sprintf('DEF:avg_%s%s=%s:%s:AVERAGE', crc32hex($sources[$i]), $raw, $this->parse_filename($this->files[$tinstance]), $ds);
+                                $rrdgraph[] = sprintf('DEF:max_%s%s=%s:%s:MAX', crc32hex($sources[$i]), $raw, $this->parse_filename($this->files[$tinstance]), $ds);
                                 $i++;
                         }
                 }
@@ -51,11 +51,11 @@ class Type_GenericStacked extends Type_Default {
                 foreach ($sources as $source) {
                         $dsname = $this->ds_names[$source] != '' ? $this->ds_names[$source] : $source;
                         $color = is_array($this->colors) ? (isset($this->colors[$source])?$this->colors[$source]:$this->colors[$c++]) : $this->colors;
-                        $rrdgraph[] = sprintf('LINE1:area_%s#%s:\'%s\'', crc32hex($source), $this->validate_color($color), $this->rrd_escape($dsname));
-                        $rrdgraph[] = sprintf('GPRINT:min_%s:MIN:\'%s Min,\'', crc32hex($source), $this->rrd_format);
-                        $rrdgraph[] = sprintf('GPRINT:avg_%s:AVERAGE:\'%s Avg,\'', crc32hex($source), $this->rrd_format);
-                        $rrdgraph[] = sprintf('GPRINT:max_%s:MAX:\'%s Max,\'', crc32hex($source), $this->rrd_format);
-                        $rrdgraph[] = sprintf('GPRINT:avg_%s:LAST:\'%s Last\\l\'', crc32hex($source), $this->rrd_format);
+                        $rrdgraph[] = sprintf('"LINE1:area_%s#%s:%s"', crc32hex($source), $this->validate_color($color), $this->rrd_escape($dsname));
+                        $rrdgraph[] = sprintf('"GPRINT:min_%s:MIN:%s Min,"', crc32hex($source), $this->rrd_format);
+                        $rrdgraph[] = sprintf('"GPRINT:avg_%s:AVERAGE:%s Avg,"', crc32hex($source), $this->rrd_format);
+                        $rrdgraph[] = sprintf('"GPRINT:max_%s:MAX:%s Max,"', crc32hex($source), $this->rrd_format);
+                        $rrdgraph[] = sprintf('"GPRINT:avg_%s:LAST:%s Last\\l"', crc32hex($source), $this->rrd_format);
                 }
 
                 return $rrdgraph;
diff --git a/type/Uptime.class.php b/type/Uptime.class.php
index aa91a6e..17bcb9a 100644
--- a/type/Uptime.class.php
+++ b/type/Uptime.class.php
@@ -12,8 +12,8 @@ class Type_Uptime extends Type_Default {
                 $i=0;
                 foreach ($this->tinstances as $tinstance) {
                         foreach ($this->data_sources as $ds) {
-                                $rrdgraph[] = sprintf('DEF:avg_%s="%s":%s:AVERAGE', crc32hex($sources[$i]), $this->rrd_escape($this->files[$tinstance]), $ds);
-                                $rrdgraph[] = sprintf('DEF:max_%s="%s":%s:MAX', crc32hex($sources[$i]), $this->rrd_escape($this->files[$tinstance]), $ds);
+                                $rrdgraph[] = sprintf('DEF:avg_%s=%s:%s:AVERAGE', crc32hex($sources[$i]), $this->parse_filename($this->files[$tinstance]), $ds);
+                                $rrdgraph[] = sprintf('DEF:max_%s=%s:%s:MAX', crc32hex($sources[$i]), $this->parse_filename($this->files[$tinstance]), $ds);
 
                                 $rrdgraph[] = sprintf('CDEF:c_avg_%s=avg_%1$s,86400,/', crc32hex($sources[$i]));
                                 $rrdgraph[] = sprintf('CDEF:c_max_%s=max_%1$s,86400,/', crc32hex($sources[$i]));
@@ -45,16 +45,16 @@ class Type_Uptime extends Type_Default {
                         $color = is_array($this->colors) ? (isset($this->colors[$source])?$this->colors[$source]:$this->colors[$c++]) : $this->colors;
 
                         //current value
-                        $rrdgraph[] = sprintf('LINE1:area_%s#%s:\'%s\'', crc32hex($source), $this->validate_color($color), $this->rrd_escape($dsname));
-                        $rrdgraph[] = sprintf('GPRINT:c_avg_%s:LAST:\'%s days\\l\'', crc32hex($source), $this->rrd_format);
+                        $rrdgraph[] = sprintf('"LINE1:area_%s#%s:%s"', crc32hex($source), $this->validate_color($color), $this->rrd_escape($dsname));
+                        $rrdgraph[] = sprintf('"GPRINT:c_avg_%s:LAST:%s days\\l"', crc32hex($source), $this->rrd_format);
 
                         //max value
-                        $rrdgraph[] = sprintf('LINE1:v_max_%s#FF0000:\'Maximum\':dashes', crc32hex($source));
-                        $rrdgraph[] = sprintf('GPRINT:v_max_%s:\'%s days\\l\'', crc32hex($source), $this->rrd_format);
+                        $rrdgraph[] = sprintf('"LINE1:v_max_%s#FF0000:Maximum:dashes"', crc32hex($source));
+                        $rrdgraph[] = sprintf('"GPRINT:v_max_%s:%s days\\l"', crc32hex($source), $this->rrd_format);
 
                         //avg value
-                        $rrdgraph[] = sprintf('LINE1:v_avg_%s#0000FF:\'Average\':dashes', crc32hex($source));
-                        $rrdgraph[] = sprintf('GPRINT:v_avg_%s:\'%s days\\l\'', crc32hex($source), $this->rrd_format);
+                        $rrdgraph[] = sprintf('"LINE1:v_avg_%s#0000FF:Average:dashes"', crc32hex($source));
+                        $rrdgraph[] = sprintf('"GPRINT:v_avg_%s:%s days\\l"', crc32hex($source), $this->rrd_format);
                 }
 
                 return $rrdgraph;