Skip to content

GitLab

Commit ceeae876 authored by Pietro Incardona's avatar Pietro Incardona
Browse files
Options

Adding images

parent ebe99fd6
Hide whitespace changes
Inline Side-by-side
Showing with 179 additions and 134 deletions
gc_out2_test.html
View file @ ceeae876
......@@ -7,14 +7,19 @@
function drawVisualization() {
var data0 = google.visualization.arrayToDataTable([
['X Axis','dataset1','dataset2','dataset3','dataset4'],
['colum1',2.200000,1.300000,4.500000,0.600000],
['colum2',5.000000,6.100000,1.300000,2.600000],
['colum3',2.100000,1.000000,6.100000,9.300000],
['colum4',1.100000,6.100000,3.000000,2.000000],
['colum5',3.300000,0.300000,0.000000,6.200000],
['colum6',2.000000,1.100000,4.000000,6.100000],
var data0 = new google.visualization.DataTable();
data0.addColumn('string','X Axis');
data0.addColumn('number','dataset1');
data0.addColumn('number','dataset2');
data0.addColumn('number','dataset3');
data0.addColumn('number','dataset4');
data0.addRows([
['colum1',2.2,1.3,4.5,0.6],
['colum2',5,6.1,1.3,2.6],
['colum3',2.1,1,6.1,9.3],
['colum4',1.1,6.1,3,2],
['colum5',3.3,0.3,0,6.2],
['colum6',2,1.1,4,6.1],
]);
var options0= {
title : 'Example',
......
gc_out3_test.html
View file @ ceeae876
......@@ -7,14 +7,19 @@
function drawVisualization() {
var data0 = google.visualization.arrayToDataTable([
['X Axis','dataset1','dataset2','dataset3','dataset4'],
['colum1',2.200000,1.300000,4.500000,0.600000],
['colum2',5.000000,6.100000,1.300000,2.600000],
['colum3',2.100000,1.000000,6.100000,9.300000],
['colum4',1.100000,6.100000,3.000000,2.000000],
['colum5',3.300000,0.300000,0.000000,6.200000],
['colum6',2.000000,1.100000,4.000000,6.100000],
var data0 = new google.visualization.DataTable();
data0.addColumn('string','X Axis');
data0.addColumn('number','dataset1');
data0.addColumn('number','dataset2');
data0.addColumn('number','dataset3');
data0.addColumn('number','dataset4');
data0.addRows([
['colum1',2.2,1.3,4.5,0.6],
['colum2',5,6.1,1.3,2.6],
['colum3',2.1,1,6.1,9.3],
['colum4',1.1,6.1,3,2],
['colum5',3.3,0.3,0,6.2],
['colum6',2,1.1,4,6.1],
]);
var options0= {
title : 'Example',
......
gc_out4_test.html
View file @ ceeae876
......@@ -7,14 +7,19 @@
function drawVisualization() {
var data0 = google.visualization.arrayToDataTable([
['','dataset1','dataset2','dataset3','dataset4'],
['colum1',2.200000,1.300000,4.500000,0.600000],
['colum2',5.000000,6.100000,1.300000,2.600000],
['colum3',2.100000,1.000000,6.100000,9.300000],
['colum4',1.100000,6.100000,3.000000,2.000000],
['colum5',3.300000,0.300000,0.000000,6.200000],
['colum6',2.000000,1.100000,4.000000,6.100000],
var data0 = new google.visualization.DataTable();
data0.addColumn('string','');
data0.addColumn('number','dataset1');
data0.addColumn('number','dataset2');
data0.addColumn('number','dataset3');
data0.addColumn('number','dataset4');
data0.addRows([
['colum1',2.2,1.3,4.5,0.6],
['colum2',5,6.1,1.3,2.6],
['colum3',2.1,1,6.1,9.3],
['colum4',1.1,6.1,3,2],
['colum5',3.3,0.3,0,6.2],
['colum6',2,1.1,4,6.1],
]);
var options0= {
title : '',
......
gc_out5_test.html
View file @ ceeae876
......@@ -7,14 +7,19 @@
function drawVisualization() {
var data0 = google.visualization.arrayToDataTable([
['','','','',''],
['colum1',2.200000,1.300000,4.500000,0.600000],
['colum2',5.000000,6.100000,1.300000,2.600000],
['colum3',2.100000,1.000000,6.100000,9.300000],
['colum4',1.100000,6.100000,3.000000,2.000000],
['colum5',3.300000,0.300000,0.000000,6.200000],
['colum6',2.000000,1.100000,4.000000,6.100000],
var data0 = new google.visualization.DataTable();
data0.addColumn('string','');
data0.addColumn('number','');
data0.addColumn('number','');
data0.addColumn('number','');
data0.addColumn('number','');
data0.addRows([
['colum1',2.2,1.3,4.5,0.6],
['colum2',5,6.1,1.3,2.6],
['colum3',2.1,1,6.1,9.3],
['colum4',1.1,6.1,3,2],
['colum5',3.3,0.3,0,6.2],
['colum6',2,1.1,4,6.1],
]);
var options0= {
title : '',
......
gc_out6_test.html
View file @ ceeae876
......@@ -7,14 +7,19 @@
function drawVisualization() {
var data0 = google.visualization.arrayToDataTable([
['','','','',''],
['',2.200000,1.300000,4.500000,0.600000],
['',5.000000,6.100000,1.300000,2.600000],
['',2.100000,1.000000,6.100000,9.300000],
['',1.100000,6.100000,3.000000,2.000000],
['',3.300000,0.300000,0.000000,6.200000],
['',2.000000,1.100000,4.000000,6.100000],
var data0 = new google.visualization.DataTable();
data0.addColumn('string','');
data0.addColumn('number','');
data0.addColumn('number','');
data0.addColumn('number','');
data0.addColumn('number','');
data0.addRows([
['',2.2,1.3,4.5,0.6],
['',5,6.1,1.3,2.6],
['',2.1,1,6.1,9.3],
['',1.1,6.1,3,2],
['',3.3,0.3,0,6.2],
['',2,1.1,4,6.1],
]);
var options0= {
title : '',
......
gc_out7_test.html
View file @ ceeae876
......@@ -7,8 +7,13 @@
function drawVisualization() {
var data0 = google.visualization.arrayToDataTable([
['X Axis','dataset1','dataset2','dataset3','dataset4'],
var data0 = new google.visualization.DataTable();
data0.addColumn('string','X Axis');
data0.addColumn('number','dataset1');
data0.addColumn('number','dataset2');
data0.addColumn('number','dataset3');
data0.addColumn('number','dataset4');
data0.addRows([
['colum1',2,3,5,6],
['colum2',5,6,1,6],
['colum3',2,1,6,9],
......@@ -16,8 +21,13 @@ var data0 = google.visualization.arrayToDataTable([
['colum5',3,3,0,6],
['colum6',2,1,4,6],
]);
var data1 = google.visualization.arrayToDataTable([
['X Axis','dataset1','dataset2','dataset3','dataset4'],
var data1 = new google.visualization.DataTable();
data1.addColumn('string','X Axis');
data1.addColumn('number','dataset1');
data1.addColumn('number','dataset2');
data1.addColumn('number','dataset3');
data1.addColumn('number','dataset4');
data1.addRows([
['colum1',2,3,5,6],
['colum2',5,6,1,6],
['colum3',2,1,6,9],
......@@ -25,8 +35,13 @@ var data1 = google.visualization.arrayToDataTable([
['colum5',3,3,0,6],
['colum6',2,1,4,6],
]);
var data2 = google.visualization.arrayToDataTable([
['X Axis','dataset1','dataset2','dataset3','dataset4'],
var data2 = new google.visualization.DataTable();
data2.addColumn('string','X Axis');
data2.addColumn('number','dataset1');
data2.addColumn('number','dataset2');
data2.addColumn('number','dataset3');
data2.addColumn('number','dataset4');
data2.addRows([
['colum1',2,3,5,6],
['colum2',5,6,1,6],
['colum3',2,1,6,9],
......
gc_out_test.html
View file @ ceeae876
......@@ -7,8 +7,13 @@
function drawVisualization() {
var data0 = google.visualization.arrayToDataTable([
['X Axis','dataset1','dataset2','dataset3','dataset4'],
var data0 = new google.visualization.DataTable();
data0.addColumn('string','X Axis');
data0.addColumn('number','dataset1');
data0.addColumn('number','dataset2');
data0.addColumn('number','dataset3');
data0.addColumn('number','dataset4');
data0.addRows([
['colum1',2,3,5,6],
['colum2',5,6,1,6],
['colum3',2,1,6,9],
......
src/Plot/GoogleChart.hpp
View file @ ceeae876
......@@ -114,7 +114,33 @@ const std::string div_end = "</body>\n\
/////////////////////////////////////////////////////////////////////
/*! It convert an array y or a set of two array x,y into a Google chart
/*! \brief Small class to produce graph with Google chart in HTML
*
* This Class can produce several graph using google chart
*
* ### Create Histogram graph
*
* \image html g_graph_hist.jpg
*
* This code produce the graph above
*
* \snippet Plot_unit_tests.hpp Producing an Histogram graph
*
* ### Create Lines
*
* \image html g_graph_plot2.jpg
*
* This code produce the graph above
*
* \snippet Plot_unit_tests.hpp Producing lines
*
* ### Create lines with different styles
*
* \image html g_graph_plot.jpg
*
* This code produce the graph above
*
* \snippet Plot_unit_tests.hpp Producing lines graph with style
*
*/
class GoogleChart
......@@ -186,48 +212,6 @@ class GoogleChart
return data.str();
}
/*! \brief Given X and Y vector return the string representing the data section of the Google Chart
*
* \param X vector
* \param Y vector
*
* \return string with the data section
*
*/
template<typename X, typename Y, typename Yn> std::string get_colums_bar_data(const openfpm::vector<X> & x, const openfpm::vector<Y> & y, const openfpm::vector<Yn> & yn, const GCoptions & opt, size_t i)
{
std::stringstream data;
data << "var data";
data << i;
data << " = google.visualization.arrayToDataTable([\n";
// we require that the number of x elements are the same as y elements
if (x.size() != y.size())
std::cerr << "Error: " << __FILE__ << ":" << __LINE__ << " vector x and the vector y must have the same number of elements " << x.size() << "!=" << y.size() << "\n";
data << "['";
data << opt.xAxis << "'";
for (size_t i = 0 ; i < yn.size() ; i++)
data << ",'" << std::to_string(yn.get(i)) << "'";
data << "],\n";
// Write the values
for (size_t i = 0 ; i < y.size() ; i++)
{
data << "[";
data << "'" << std::to_string(x.get(i)) << "'";
for (size_t j = 0 ; j < y.get(i).size() ; j++)
data << "," << std::to_string(y.get(i).get(j));
data << "],\n";
}
return data.str();
}
std::string get_colums_bar_option(const GCoptions & opt)
{
std::stringstream str;
......@@ -335,29 +319,29 @@ public:
injectHTML.add();
}
/*! \brief Add a colums graph
/*! \brief Add an histogram graph
*
* \param y A vector of vector of values (numbers) the size of y indicate how many columns
* has the graph while the internal vector can store multiple datasets
* \param y A vector of vectors the size of y indicate how many values we have on x
* each x value can have multiple values or datasets
*
*/
template<typename Y> void AddColumsGraph(openfpm::vector<Y> & y)
template<typename Y> void AddHistGraph(openfpm::vector<Y> & y)
{
openfpm::vector<std::string> x;
x.resize(y.size());
AddColumsGraph<std::string,Y>(x,y);
AddHistGraph<std::string,Y>(x,y);
}
/*! \brief Add a colums graph
/*! \brief Add an histogram graph
*
* \param y A vector of vector of values (numbers) the size of y indicate how many columns
* has the graph while the internal vector can store multiple datasets
* \param y A vector of vectors the size of y indicate how many values we have on x
* each x value can have multiple values or datasets
*
* \param x Give a name or number to each colums, so can be a string or a number
* \param x Give a name or number to each colums. Can be a string or a number
*
*/
template<typename X, typename Y> void AddColumsGraph(openfpm::vector<X> & x, openfpm::vector<Y> & y)
template<typename X, typename Y> void AddHistGraph(openfpm::vector<X> & x, openfpm::vector<Y> & y)
{
GCoptions opt;
......@@ -366,39 +350,39 @@ public:
if (y.size() != 0)
yn.resize(y.get(0).size());
AddColumsGraph<X,Y,std::string>(x,y,yn,opt);
AddHistGraph<X,Y,std::string>(x,y,yn,opt);
}
/*! \brief Add a colums graph
/*! \brief Add an histogram graph
*
* \param y A vector of vector of values (numbers) the size of y indicate how many columns
* has the graph while the internal vector can store multiple datasets
* \param y A vector of vectors the size of y indicate how many values we have on x
* each x value can have multiple values or datasets
*
* \param x Give a name or number to each colums, so can be a string or a number
* \param x Give a name or number to each colums. Can be a string or a number
*
* \param yn Give a name to each dataset
*
*/
template<typename X, typename Y, typename Yn> void AddColumsGraph(openfpm::vector<X> & x, openfpm::vector<Y> & y, openfpm::vector<Yn> & yn)
template<typename X, typename Y, typename Yn> void AddHistGraph(openfpm::vector<X> & x, openfpm::vector<Y> & y, openfpm::vector<Yn> & yn)
{
GCoptions opt;
AddColumsGraph(x,y,yn,opt);
AddHistGraph(x,y,yn,opt);
}
/*! \brief Add a colums graph
/*! \brief Add an histogram graph
*
* \param y A vector of vector of values (numbers) the size of y indicate how many columns
* has the graph while the internal vector can store multiple datasets
* \param y A vector of vectors the size of y indicate how many values we have on x
* each x value can have multiple values or datasets
*
* \param x Give a name or number to each colums, so can be a string or a number
* \param x Give a name or number to each colums. Can be a string or a number
*
* \param yn Give a name to each dataset
*
* \param opt Graph options
*
*/
template<typename X, typename Y, typename Yn> void AddColumsGraph(openfpm::vector<X> & x, openfpm::vector<Y> & y, openfpm::vector<Yn> & yn , const GCoptions & opt)
template<typename X, typename Y, typename Yn> void AddHistGraph(openfpm::vector<X> & x, openfpm::vector<Y> & y, openfpm::vector<Yn> & yn , const GCoptions & opt)
{
set_of_graphs.add();
injectHTML.add();
......@@ -416,23 +400,23 @@ public:
}
set_of_graphs.last().type = GGRAPH_COLUMS;
set_of_graphs.last().data = get_colums_bar_data(x,y,yn,opt,set_of_graphs.size()-1);
set_of_graphs.last().data = get_points_plot_data(x,y,yn,opt,set_of_graphs.size()-1);
set_of_graphs.last().option = get_colums_bar_option(opt);
set_of_graphs.last().opt = opt;
}
/*! \brief Add a simple plot graph
/*! \brief Add a simple lines graph
*
* \param y A vector of vector of values (numbers) the size of y indicate how many x values
* or colums do we have, while the internal vector can store multiple realizations,
* \param y A vector of vectors of values. The size of y indicate how many x values
* we have, while the internal vector can store multiple realizations,
* or min and max, for error bar
*
* \param x Give a name or number to each colums, so can be a string or a number
* \param x Give a name or number to each x value, so can be a string or a number
*
* \param opt Graph options
*
*/
template<typename X, typename Y> void AddPointsGraph(openfpm::vector<X> & x, openfpm::vector<Y> & y , const GCoptions & opt)
template<typename X, typename Y> void AddLinesGraph(openfpm::vector<X> & x, openfpm::vector<Y> & y , const GCoptions & opt)
{
openfpm::vector<std::string> yn;
......@@ -445,7 +429,7 @@ public:
for (size_t i = 0 ; i < y.last().size() ; i++)
yn.add(std::string("line") + std::to_string(i));
AddPointsGraph(x,y,yn,opt);
AddLinesGraph(x,y,yn,opt);
}
/*! \brief Add a simple plot graph
......@@ -461,7 +445,7 @@ public:
* \param opt Graph options
*
*/
template<typename X, typename Y> void AddPointsGraph(openfpm::vector<X> & x, openfpm::vector<Y> & y , const openfpm::vector<std::string> & yn, const GCoptions & opt)
template<typename X, typename Y> void AddLinesGraph(openfpm::vector<X> & x, openfpm::vector<Y> & y , const openfpm::vector<std::string> & yn, const GCoptions & opt)
{
if (y.size() == 0)
{
......@@ -500,9 +484,9 @@ public:
injectHTML.last() = html;
}
/*! \brief It write the html file
/*! \brief It write the graphs on file in html format using Google charts
*
* \param file output html file
* \param file output file
*
*/
void write(std::string file)
......
src/Plot/Plot_unit_tests.hpp
View file @ ceeae876
......@@ -15,6 +15,8 @@ BOOST_AUTO_TEST_SUITE( plot_unit_test )
BOOST_AUTO_TEST_CASE( google_chart )
{
//! [Producing an Histogram graph]
openfpm::vector<std::string> x;
openfpm::vector<openfpm::vector<size_t>> y;
openfpm::vector<std::string> yn;
......@@ -53,9 +55,11 @@ BOOST_AUTO_TEST_CASE( google_chart )
options.stypeext = std::string("{3: {type: 'line'}}");
GoogleChart cg;
cg.AddColumsGraph(x,y,yn,options);
cg.AddHistGraph(x,y,yn,options);
cg.write("gc_out.html");
//! [Producing an Histogram graph]
bool test = compare("gc_out.html","gc_out_test.html");
BOOST_REQUIRE_EQUAL(true,test);
}
......@@ -97,7 +101,7 @@ BOOST_AUTO_TEST_CASE( google_chart2 )
options.stype = std::string("bars");
GoogleChart cg;
cg.AddColumsGraph(x,y,yn,options);
cg.AddHistGraph(x,y,yn,options);
cg.write("gc_out2.html");
bool test = compare("gc_out2.html","gc_out2_test.html");
......@@ -140,7 +144,7 @@ BOOST_AUTO_TEST_CASE( google_chart3 )
options.xAxis = std::string("X Axis");
GoogleChart cg;
cg.AddColumsGraph(x,y,yn,options);
cg.AddHistGraph(x,y,yn,options);
cg.write("gc_out3.html");
bool test = compare("gc_out3.html","gc_out3_test.html");
......@@ -176,7 +180,7 @@ BOOST_AUTO_TEST_CASE( google_chart4 )
y.add({2.0,1.1,4.0,6.1});
GoogleChart cg;
cg.AddColumsGraph(x,y,yn);
cg.AddHistGraph(x,y,yn);
cg.write("gc_out4.html");
bool test = compare("gc_out4.html","gc_out4_test.html");
......@@ -204,7 +208,7 @@ BOOST_AUTO_TEST_CASE( google_chart5 )
y.add({2.0,1.1,4.0,6.1});
GoogleChart cg;
cg.AddColumsGraph(x,y);
cg.AddHistGraph(x,y);
cg.write("gc_out5.html");
bool test = compare("gc_out5.html","gc_out5_test.html");
......@@ -224,7 +228,7 @@ BOOST_AUTO_TEST_CASE( google_chart6 )
y.add({2.0,1.1,4.0,6.1});
GoogleChart cg;
cg.AddColumsGraph(y);
cg.AddHistGraph(y);
cg.write("gc_out6.html");
bool test = compare("gc_out6.html","gc_out6_test.html");
......@@ -233,6 +237,8 @@ BOOST_AUTO_TEST_CASE( google_chart6 )
BOOST_AUTO_TEST_CASE( google_chart_with_inject_HTML )
{
//! [Producing a set of histograms graphs]
openfpm::vector<std::string> x;
openfpm::vector<openfpm::vector<size_t>> y;
openfpm::vector<std::string> yn;
......@@ -273,20 +279,24 @@ BOOST_AUTO_TEST_CASE( google_chart_with_inject_HTML )
GoogleChart cg;
//
cg.addHTML("<h2>Before first graph</h2>");
cg.AddColumsGraph(x,y,yn,options);
cg.AddHistGraph(x,y,yn,options);
cg.addHTML("<h2>Before second graph</h2>");
cg.AddColumsGraph(x,y,yn,options);
cg.AddHistGraph(x,y,yn,options);
cg.addHTML("<h2>Before third graph</h2>");
cg.AddColumsGraph(x,y,yn,options);
cg.AddHistGraph(x,y,yn,options);
cg.addHTML("<h2>At the end</h2>");
cg.write("gc_out7.html");
//! [Producing a set of histograms graphs]
bool test = compare("gc_out7.html","gc_out7_test.html");
BOOST_REQUIRE_EQUAL(true,test);
}
BOOST_AUTO_TEST_CASE( google_chart_linear_plot )
{
//! [Producing lines graph with style]
openfpm::vector<std::string> x;
openfpm::vector<openfpm::vector<double>> y;
openfpm::vector<std::string> yn;
......@@ -336,15 +346,19 @@ BOOST_AUTO_TEST_CASE( google_chart_linear_plot )
options.intervalext = std::string("{'i2': { 'color': '#4374E0', 'style':'bars', 'lineWidth':4, 'fillOpacity':1 } }");
GoogleChart cg;
cg.AddPointsGraph(x,y,yn,options);
cg.AddLinesGraph(x,y,yn,options);
cg.write("gc_plot_out.html");
//! [Producing lines graph with style]
bool test = compare("gc_plot_out.html","gc_plot_out_test.html");
BOOST_REQUIRE_EQUAL(true,test);
}
BOOST_AUTO_TEST_CASE( google_chart_linear_plot2 )
{
//! [Producing lines]
openfpm::vector<std::string> x;
openfpm::vector<openfpm::vector<double>> y;
......@@ -376,9 +390,11 @@ BOOST_AUTO_TEST_CASE( google_chart_linear_plot2 )
options.lineWidth = 1.0;
GoogleChart cg;
cg.AddPointsGraph(x,y,options);
cg.AddLinesGraph(x,y,options);
cg.write("gc_plot2_out.html");
//! [Producing lines]
bool test = compare("gc_plot2_out.html","gc_plot2_out_test.html");
BOOST_REQUIRE_EQUAL(true,test);
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment