Adding export SVG to plot

5cf76966 · incardon · 62b83164 · 5cf76966 · 5cf76966 · 5cf76966
Commit 5cf76966 authored Oct 09, 2016 by incardon
17 changed files
--- a/configure.ac
+++ b/configure.ac
@@ -78,6 +78,27 @@ else
 	NVCCFLAGS+="$NVCCFLAGS -O3 "
 fi

+
+###### Checking for compiler flags -fext-numeric-literals
+
+AC_LANG_PUSH([C++])
+
+my_save_cflags="$CXXFLAGS"
+CXXFLAGS=-fext-numeric-literals
+AC_MSG_CHECKING([whether CXX supports -fext-numeric-literals])
+AC_COMPILE_IFELSE([AC_LANG_PROGRAM([])],
+    [AC_MSG_RESULT([yes])
+     AM_CXXFLAGS="-fext-numeric-literals"
+    ],
+    [
+     AC_MSG_RESULT([no])
+    ]
+)
+AC_LANG_POP([C++])
+CXXFLAGS="$my_save_cflags"
+AC_SUBST([AM_CXXFLAGS])
+
+
 ####### Set location of openfpm_pdata

 AC_ARG_WITH([pdata],

--- a/gc_out2_test.html
+++ b/gc_out2_test.html
 <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawVisualization);

+function exportToSVG(i)
+{
+var e = document.getElementById('chart_div'+i);
+var svg = e.getElementsByTagName('svg')[0].parentNode.innerHTML;
+var pos = svg.lastIndexOf("</svg>");
+pos += 6;
+svg = svg.substring(0,4)  + " xmlns='http://www.w3.org/2000/svg' xmlns:xlink= 'http://www.w3.org/1999/xlink' " + svg.substring(4,pos);
+svgData = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
+$(this).attr({'href': svgData,'target': '_blank'});
+}

      function drawVisualization() {
 var data0 = new google.visualization.DataTable();
@@ -26,10 +37,11 @@ title : 'Example',
 vAxis: {title: 'Y Axis'},
 hAxis: {title: 'X Axis'},
 seriesType: 'bars'};
+$("#export_svg0").on("click", function (event) {exportToSVG.apply(this,[0]);});
 var chart = new google.visualization.ComboChart(document.getElementById('chart_div0'));chart.draw(data0, options0);
 }</script>
 </head>
 <body>
-<div id="chart_div0" style="width: 900px; height: 500px;"></div>
+<a href="#" download="graph1.svg" id="export_svg0"><button>Export data into svg</button></a><div id="chart_div0" style="width: 900px; height: 500px;"></div>
 </body>
 </html>
--- a/gc_out3_test.html
+++ b/gc_out3_test.html
 <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawVisualization);

+function exportToSVG(i)
+{
+var e = document.getElementById('chart_div'+i);
+var svg = e.getElementsByTagName('svg')[0].parentNode.innerHTML;
+var pos = svg.lastIndexOf("</svg>");
+pos += 6;
+svg = svg.substring(0,4)  + " xmlns='http://www.w3.org/2000/svg' xmlns:xlink= 'http://www.w3.org/1999/xlink' " + svg.substring(4,pos);
+svgData = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
+$(this).attr({'href': svgData,'target': '_blank'});
+}

      function drawVisualization() {
 var data0 = new google.visualization.DataTable();
@@ -26,10 +37,11 @@ title : 'Example',
 vAxis: {title: 'Y Axis'},
 hAxis: {title: 'X Axis'},
 seriesType: ''};
+$("#export_svg0").on("click", function (event) {exportToSVG.apply(this,[0]);});
 var chart = new google.visualization.ComboChart(document.getElementById('chart_div0'));chart.draw(data0, options0);
 }</script>
 </head>
 <body>
-<div id="chart_div0" style="width: 900px; height: 500px;"></div>
+<a href="#" download="graph1.svg" id="export_svg0"><button>Export data into svg</button></a><div id="chart_div0" style="width: 900px; height: 500px;"></div>
 </body>
 </html>
--- a/gc_out4_test.html
+++ b/gc_out4_test.html
 <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawVisualization);

+function exportToSVG(i)
+{
+var e = document.getElementById('chart_div'+i);
+var svg = e.getElementsByTagName('svg')[0].parentNode.innerHTML;
+var pos = svg.lastIndexOf("</svg>");
+pos += 6;
+svg = svg.substring(0,4)  + " xmlns='http://www.w3.org/2000/svg' xmlns:xlink= 'http://www.w3.org/1999/xlink' " + svg.substring(4,pos);
+svgData = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
+$(this).attr({'href': svgData,'target': '_blank'});
+}

      function drawVisualization() {
 var data0 = new google.visualization.DataTable();
@@ -26,10 +37,11 @@ title : '',
 vAxis: {title: ''},
 hAxis: {title: ''},
 seriesType: ''};
+$("#export_svg0").on("click", function (event) {exportToSVG.apply(this,[0]);});
 var chart = new google.visualization.ComboChart(document.getElementById('chart_div0'));chart.draw(data0, options0);
 }</script>
 </head>
 <body>
-<div id="chart_div0" style="width: 900px; height: 500px;"></div>
+<a href="#" download="graph1.svg" id="export_svg0"><button>Export data into svg</button></a><div id="chart_div0" style="width: 900px; height: 500px;"></div>
 </body>
 </html>
--- a/gc_out5_test.html
+++ b/gc_out5_test.html
 <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawVisualization);

+function exportToSVG(i)
+{
+var e = document.getElementById('chart_div'+i);
+var svg = e.getElementsByTagName('svg')[0].parentNode.innerHTML;
+var pos = svg.lastIndexOf("</svg>");
+pos += 6;
+svg = svg.substring(0,4)  + " xmlns='http://www.w3.org/2000/svg' xmlns:xlink= 'http://www.w3.org/1999/xlink' " + svg.substring(4,pos);
+svgData = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
+$(this).attr({'href': svgData,'target': '_blank'});
+}

      function drawVisualization() {
 var data0 = new google.visualization.DataTable();
@@ -26,10 +37,11 @@ title : '',
 vAxis: {title: ''},
 hAxis: {title: ''},
 seriesType: ''};
+$("#export_svg0").on("click", function (event) {exportToSVG.apply(this,[0]);});
 var chart = new google.visualization.ComboChart(document.getElementById('chart_div0'));chart.draw(data0, options0);
 }</script>
 </head>
 <body>
-<div id="chart_div0" style="width: 900px; height: 500px;"></div>
+<a href="#" download="graph1.svg" id="export_svg0"><button>Export data into svg</button></a><div id="chart_div0" style="width: 900px; height: 500px;"></div>
 </body>
 </html>
--- a/gc_out6_test.html
+++ b/gc_out6_test.html
 <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawVisualization);

+function exportToSVG(i)
+{
+var e = document.getElementById('chart_div'+i);
+var svg = e.getElementsByTagName('svg')[0].parentNode.innerHTML;
+var pos = svg.lastIndexOf("</svg>");
+pos += 6;
+svg = svg.substring(0,4)  + " xmlns='http://www.w3.org/2000/svg' xmlns:xlink= 'http://www.w3.org/1999/xlink' " + svg.substring(4,pos);
+svgData = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
+$(this).attr({'href': svgData,'target': '_blank'});
+}

      function drawVisualization() {
 var data0 = new google.visualization.DataTable();
@@ -26,10 +37,11 @@ title : '',
 vAxis: {title: ''},
 hAxis: {title: ''},
 seriesType: ''};
+$("#export_svg0").on("click", function (event) {exportToSVG.apply(this,[0]);});
 var chart = new google.visualization.ComboChart(document.getElementById('chart_div0'));chart.draw(data0, options0);
 }</script>
 </head>
 <body>
-<div id="chart_div0" style="width: 900px; height: 500px;"></div>
+<a href="#" download="graph1.svg" id="export_svg0"><button>Export data into svg</button></a><div id="chart_div0" style="width: 900px; height: 500px;"></div>
 </body>
 </html>
--- a/gc_out7_test.html
+++ b/gc_out7_test.html
 <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawVisualization);

+function exportToSVG(i)
+{
+var e = document.getElementById('chart_div'+i);
+var svg = e.getElementsByTagName('svg')[0].parentNode.innerHTML;
+var pos = svg.lastIndexOf("</svg>");
+pos += 6;
+svg = svg.substring(0,4)  + " xmlns='http://www.w3.org/2000/svg' xmlns:xlink= 'http://www.w3.org/1999/xlink' " + svg.substring(4,pos);
+svgData = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
+$(this).attr({'href': svgData,'target': '_blank'});
+}

      function drawVisualization() {
 var data0 = new google.visualization.DataTable();
@@ -67,14 +78,17 @@ vAxis: {title: 'Y Axis'},
 hAxis: {title: 'X Axis'},
 seriesType: 'bars',
 series: {3: {type: 'line'}}};
+$("#export_svg0").on("click", function (event) {exportToSVG.apply(this,[0]);});
 var chart = new google.visualization.ComboChart(document.getElementById('chart_div0'));chart.draw(data0, options0);
+$("#export_svg1").on("click", function (event) {exportToSVG.apply(this,[1]);});
 var chart = new google.visualization.ComboChart(document.getElementById('chart_div1'));chart.draw(data1, options1);
+$("#export_svg2").on("click", function (event) {exportToSVG.apply(this,[2]);});
 var chart = new google.visualization.ComboChart(document.getElementById('chart_div2'));chart.draw(data2, options2);
 }</script>
 </head>
 <body>
-<h2>Before first graph</h2><div id="chart_div0" style="width: 900px; height: 500px;"></div>
-<h2>Before second graph</h2><div id="chart_div1" style="width: 900px; height: 500px;"></div>
-<h2>Before third graph</h2><div id="chart_div2" style="width: 900px; height: 500px;"></div>
+<h2>Before first graph</h2><a href="#" download="graph1.svg" id="export_svg0"><button>Export data into svg</button></a><div id="chart_div0" style="width: 900px; height: 500px;"></div>
+<h2>Before second graph</h2><a href="#" download="graph1.svg" id="export_svg1"><button>Export data into svg</button></a><div id="chart_div1" style="width: 900px; height: 500px;"></div>
+<h2>Before third graph</h2><a href="#" download="graph1.svg" id="export_svg2"><button>Export data into svg</button></a><div id="chart_div2" style="width: 900px; height: 500px;"></div>
 <h2>At the end</h2></body>
 </html>
--- a/gc_out_test.html
+++ b/gc_out_test.html
 <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawVisualization);

+function exportToSVG(i)
+{
+var e = document.getElementById('chart_div'+i);
+var svg = e.getElementsByTagName('svg')[0].parentNode.innerHTML;
+var pos = svg.lastIndexOf("</svg>");
+pos += 6;
+svg = svg.substring(0,4)  + " xmlns='http://www.w3.org/2000/svg' xmlns:xlink= 'http://www.w3.org/1999/xlink' " + svg.substring(4,pos);
+svgData = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
+$(this).attr({'href': svgData,'target': '_blank'});
+}

      function drawVisualization() {
 var data0 = new google.visualization.DataTable();
@@ -27,10 +38,11 @@ vAxis: {title: 'Y Axis'},
 hAxis: {title: 'X Axis'},
 seriesType: 'bars',
 series: {3: {type: 'line'}}};
+$("#export_svg0").on("click", function (event) {exportToSVG.apply(this,[0]);});
 var chart = new google.visualization.ComboChart(document.getElementById('chart_div0'));chart.draw(data0, options0);
 }</script>
 </head>
 <body>
-<div id="chart_div0" style="width: 900px; height: 500px;"></div>
+<a href="#" download="graph1.svg" id="export_svg0"><button>Export data into svg</button></a><div id="chart_div0" style="width: 900px; height: 500px;"></div>
 </body>
 </html>
--- a/gc_plot2_out_test.html
+++ b/gc_plot2_out_test.html
 <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawVisualization);

+function exportToSVG(i)
+{
+var e = document.getElementById('chart_div'+i);
+var svg = e.getElementsByTagName('svg')[0].parentNode.innerHTML;
+var pos = svg.lastIndexOf("</svg>");
+pos += 6;
+svg = svg.substring(0,4)  + " xmlns='http://www.w3.org/2000/svg' xmlns:xlink= 'http://www.w3.org/1999/xlink' " + svg.substring(4,pos);
+svgData = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
+$(this).attr({'href': svgData,'target': '_blank'});
+}

      function drawVisualization() {
 var data0 = new google.visualization.DataTable();
@@ -33,10 +44,11 @@ hAxis: {title: 'X Axis'},
 curveType: 'function',
 lineWidth: 1,
 intervals: { 'style':'area' }};
+$("#export_svg0").on("click", function (event) {exportToSVG.apply(this,[0]);});
 var chart = new google.visualization.ComboChart(document.getElementById('chart_div0'));chart.draw(data0, options0);
 }</script>
 </head>
 <body>
-<div id="chart_div0" style="width: 900px; height: 500px;"></div>
+<a href="#" download="graph1.svg" id="export_svg0"><button>Export data into svg</button></a><div id="chart_div0" style="width: 900px; height: 500px;"></div>
 </body>
 </html>
--- a/gc_plot_out_test.html
+++ b/gc_plot_out_test.html
 <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawVisualization);

+function exportToSVG(i)
+{
+var e = document.getElementById('chart_div'+i);
+var svg = e.getElementsByTagName('svg')[0].parentNode.innerHTML;
+var pos = svg.lastIndexOf("</svg>");
+pos += 6;
+svg = svg.substring(0,4)  + " xmlns='http://www.w3.org/2000/svg' xmlns:xlink= 'http://www.w3.org/1999/xlink' " + svg.substring(4,pos);
+svgData = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
+$(this).attr({'href': svgData,'target': '_blank'});
+}

      function drawVisualization() {
 var data0 = new google.visualization.DataTable();
@@ -35,10 +46,11 @@ lineWidth: 1,
 intervals: { 'style':'area' },
 interval: {'i2': { 'color': '#4374E0', 'style':'bars', 'lineWidth':4, 'fillOpacity':1 } }
 };
+$("#export_svg0").on("click", function (event) {exportToSVG.apply(this,[0]);});
 var chart = new google.visualization.ComboChart(document.getElementById('chart_div0'));chart.draw(data0, options0);
 }</script>
 </head>
 <body>
-<div id="chart_div0" style="width: 900px; height: 500px;"></div>
+<a href="#" download="graph1.svg" id="export_svg0"><button>Export data into svg</button></a><div id="chart_div0" style="width: 900px; height: 500px;"></div>
 </body>
 </html>
--- a/src/CSVWriter/CSVWriter.hpp
+++ b/src/CSVWriter/CSVWriter.hpp
@@ -33,10 +33,10 @@
 template<typename Tobj>
 struct csv_prp
 {
-	// String
+	//! String containing the csv line constructed from an object
 	std::stringstream & str;

-	// Object to write
+	//! Object to write
 	Tobj & obj;

 	/*! \brief Constructor
@@ -79,8 +79,14 @@ struct csv_prp
 template<typename Tobj, bool attr>
 struct csv_col
 {
+	//! String containing the colums list as string
 	std::stringstream & str;

+	/*! \brief Constructor
+	 *
+	 * \str String where to put the colum list
+	 *
+	 */
 	csv_col(std::stringstream & str)
 	:str(str)
 	{
@@ -113,8 +119,14 @@ struct csv_col
 template<typename Tobj>
 struct csv_col<Tobj,false>
 {
+	//! String containing the colums list as string
 	std::stringstream & str;

+	/*! \brief Constructor
+	 *
+	 * \str String where to put the colum list
+	 *
+	 */
 	csv_col(std::stringstream & str)
 	:str(str)
 	{
@@ -180,8 +192,8 @@ class CSVWriter

 	/*! \brief Get the csv data section
 	 *
-	 * \param v_pos vector that contain the positional information
-	 * \param v_prp vector that contain the property information
+	 * \param vp vector that contain the positional information
+	 * \param vpr vector that contain the property information
 	 * \param offset from where to start
 	 *
 	 */
@@ -228,12 +240,11 @@ public:
 	 * \tparam prp which properties to output [default = -1 (all)]
 	 *
 	 * \param file path where to write
-	 * \param v_pos positional vector
-	 * \param v_prp properties vector
+	 * \param v positional vector
+	 * \param prp properties vector
 	 * \param offset from where to start to write
 	 *
 	 */
-
 	bool write(std::string file, v_pos & v , v_prp & prp, size_t offset=0)
 	{
 		// Header for csv (colums name)

--- a/src/GraphMLWriter/GraphMLWriter.hpp
+++ b/src/GraphMLWriter/GraphMLWriter.hpp
@@ -375,19 +375,19 @@ struct edge_prop
 template<typename G>
 struct edge_node
 {
-	// Vertex object container
+	//! Vertex object container
 	typename G::E_container & vo;

-	// Properties counter
+	//! Properties counter
 	int cnt = 0;

 	// edge node string
 	std::string & e_node;

-	// Attribute names
+	//! Attribute names
 	std::string * attributes_names;

-	// Number of attributes name defined into the vertex
+	//! Number of attributes name defined into the vertex
 	int n_attr = 0;

 	/*! \brief Constructor
@@ -396,8 +396,7 @@ struct edge_node
 	 *
 	 * \param e_node std::string that is filled with the graph node definition in the GraphML format
 	 * \param n_obj object container to access the object properties for example encapc<...>
-	 * \param stub SFINAE, it basically check if G has properties names defined, if yes this
-	 *        constructor is selected over the other one
+	 * \param a_name attributes names
 	 *
 	 */
 	edge_node(std::string & e_node, typename G::E_container & n_obj, typename G::E_type::attributes & a_name)
@@ -413,7 +412,6 @@ struct edge_node
 	 *
 	 * \param e_node std::string that is filled with the graph properties in the GraphML format
 	 * \param n_obj object container to access the object properties for example encapc<...>
-	 * \param n_prop number of properties
 	 *
 	 */
 	edge_node(std::string & e_node, typename G::E_container & n_obj)

--- a/src/HDF5_XdmfWriter/HDF5_XdmfWriter_point_set.hpp
+++ b/src/HDF5_XdmfWriter/HDF5_XdmfWriter_point_set.hpp
@@ -102,9 +102,6 @@ struct H5_prop_out<ele_v,false>
 template <>
 class HDF5_XdmfWriter<H5_POINTSET>
 {
-	// Time step
-	int t;
-
 	//! HDF5 file
 	hid_t file_id;

@@ -116,7 +113,6 @@ public:
 	 *
 	 */
 	HDF5_XdmfWriter()
-	:t(0)
 	{}



--- a/src/Makefile.am
+++ b/src/Makefile.am
@@ -3,7 +3,7 @@ LINKLIBS = $(PTHREAD_LIBS) $(OPT_LIBS) $(BOOST_IOSTREAMS_LIB)  $(BOOST_LDFLAGS)

 noinst_PROGRAMS = io
 io_SOURCES = main.cpp ../../openfpm_vcluster/src/VCluster.cpp ../../openfpm_devices/src/memory/HeapMemory.cpp ../../openfpm_devices/src/Memleak_check.cpp
-io_CXXFLAGS = $(CUDA_CFLAGS) $(INCLUDES_PATH) $(BOOST_CPPFLAGS) -I/usr/local/include $(HDF5_CPPFLAGS)
+io_CXXFLAGS = $(AM_CXXFLAGS) $(CUDA_CFLAGS) $(INCLUDES_PATH) $(BOOST_CPPFLAGS) -I/usr/local/include $(HDF5_CPPFLAGS)
 io_CFLAGS = $(CUDA_CFLAGS)
 io_LDADD = $(LINKLIBS)


--- a/src/Plot/GoogleChart.hpp
+++ b/src/Plot/GoogleChart.hpp
@@ -41,7 +41,10 @@ struct GCoptions
 	//! with a line
 	std::string stypeext;

+	//! width of the graph in pixels
 	size_t width=900;
+
+	//! height of the graph in pixels
 	size_t heigh=500;

 	//! Flag that specify if the colums are stacked
@@ -65,6 +68,7 @@ struct GCoptions
 	//! curve type
 	std::string curveType = "function";

+	//! copy operator
 	GCoptions & operator=(const GCoptions & opt)
 	{
 		title = opt.title;
@@ -85,16 +89,16 @@ struct GCoptions

 struct GGraph
 {
-	// TypeOfGraph
+	//! TypeOfGraph
 	size_t type;

-	// data
+	//! data
 	std::string data;

-	// option
+	//! option
 	std::string option;

-	// Google chart option
+	//! Google chart option
 	GCoptions opt;
 };

@@ -103,10 +107,21 @@ struct GGraph
 const std::string begin_data ="<html>\n\
  <head>\n\
    <script type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"></script>\n\
+	<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js\"></script>\n\
    <script type=\"text/javascript\">\n\
      google.charts.load('current', {'packages':['corechart']});\n\
      google.charts.setOnLoadCallback(drawVisualization);\n\
 \n\
+function exportToSVG(i)\n\
+{\n\
+var e = document.getElementById('chart_div'+i);\n\
+var svg = e.getElementsByTagName('svg')[0].parentNode.innerHTML;\n\
+var pos = svg.lastIndexOf(\"</svg>\");\n\
+pos += 6;\n\
+svg = svg.substring(0,4)  + \" xmlns='http://www.w3.org/2000/svg' xmlns:xlink= 'http://www.w3.org/1999/xlink' \" + svg.substring(4,pos);\n\
+svgData = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);\n\
+$(this).attr({'href': svgData,'target': '_blank'});\n\
+}\n\
 \n\
      function drawVisualization() {\n";

@@ -119,6 +134,10 @@ const std::string begin_div = "}</script>\n\
 const std::string div_end = "</body>\n\
 </html>\n";

+const std::string saving_javascript = "function save(i)\n\
+										var e = document.getElementById('chart_')\n\
+										e.getElementsByTagName('svg')[0].parentNode.innerHTML";
+
 /////////////////////////////////////////////////////////////////////

 /*! \brief Small class to produce graph with Google chart in HTML
@@ -152,17 +171,22 @@ const std::string div_end = "</body>\n\
 */
 class GoogleChart
 {
-	// set of graphs
+	//! set of graphs
 	openfpm::vector<GGraph> set_of_graphs;

-	// set inject HTML;
+	//! set inject HTML;
 	openfpm::vector<std::string> injectHTML;

 	/*! \brief Given X and Y vector return the string representing the data section of the Google Chart
 	 *
-	 * \param X vector
-	 * \param Y vector
-	 * \param i counter
+	 * \tparam X type for the X coordinates
+	 * \tparam Y type for the Y coordinates
+	 *
+	 * \param x vector of points on x
+	 * \param y vector of points on y
+	 * \param yn vector containing the name of each graph
+	 * \param opt options to draw the graph
+	 * \param i index of the graph we are drawing
 	 *
 	 * \return string with the data section
 	 *
@@ -295,6 +319,7 @@ class GoogleChart
 	 */
 	void addDrawDiv(std::ofstream & of, size_t i)
 	{
+		of << "$(\"#export_svg" << i << "\").on(\"click\", function (event) {exportToSVG.apply(this,[" << i << "]);});\n";
 		of << "var chart = new google.visualization.ComboChart(document.getElementById('chart_div";
 		of << i;
 		of << "'));chart.draw(data";
@@ -306,12 +331,14 @@ class GoogleChart

 	/*! \brief Add a div section
 	 *
-	 * \param i id
+	 * \param of file ofstream
+	 * \param i id of the graph
 	 * \param gc GoogleChart option
 	 *
 	 */
 	void addDiv(std::ofstream & of, size_t i, const GCoptions & gc)
 	{
+		of << "<a href=\"#\" download=\"graph1.svg\" id=\"export_svg" << i << "\"><button>Export data into svg</button></a>";
 		of << "<div id=\"chart_div";
 		of << i;
 		of << "\" style=\"width: ";