OpenFPM_pdata  4.1.0
Project that contain the implementation of distributed structures
 
Loading...
Searching...
No Matches
Plot 0 Google Chart

Simple example for plotting 2D graph with google charts

In this example we show how to plot several different 2D graphs type with Google

Inclusion

To use the Plot features we have to include GoogleChart

#include "Plot/GoogleChart.hpp"
#include "VCluster/VCluster.hpp"

Initialization

Here we Initialize the library, and we check the we are on a single processor. GoogleChart cannot do parallel IO or write big files. So or we collect all data on one processor, or each processor write a distinct file. In this particular example we simply stop if the program start on more than one processor

openfpm_init(&argc,&argv);
auto & v_cl = create_vcluster();
// Google chart is only single processor
if (v_cl.getProcessingUnits() > 1)
{
std::cerr << "Error: only one processor is allowed" << "\n";
return 1;
}

Graph data

Here we have the vectors that will contain the information about the graph.

We will try now to produce the following situation. Six values on x each of them having 4 values on y

This mean that for each x value we have to define 4 y values. Having multiple values on on x can be used for several purpose.

  • Define multiple lines. For example if we connect all the points # we obtain one line. If we connect all the @ points we obtain another line, an so on ... (figure below)
  • Define error bands
  • Visualize different observables/parameters for the same value x
    y  ^                          $ dataset1
       |                          * dataset2
   0.9 |                          # dataset3
       |       @                  @ dataset4
       |   #
   0.6 |       *   *   @       *
       |   $   #   @   #   #
       |   @       $   $   @   @
   0.3 |           #   *   $   #
       |       $           *
       |   *                   $
    0  |_________________________________
         o   t   t   f   f   s          x
         n   w   h   o   i   i
         e   o   r   u   v   x
                 e   r   e
                 e

We start from the first case (Define multiple lines)

// Fill the x values
x.add("one");
x.add("two");
x.add("three");
x.add("four");
x.add("five");
x.add("six");
// we have 4 dataset or lines
yn.add("dataset1");
yn.add("dataset2");
yn.add("dataset3");
yn.add("dataset4");
// Because we have 6 points on x each containing 4 lines or dataset, we have to provides
// 6 point with 4 values at each x point
y.add({2,3,5,6});
y.add({5,6,1,6});
y.add({2,1,6,9});
y.add({1,6,3,2});
y.add({3,3,0,6});
y.add({2,1,4,6});

Graph options

We can specify several options for the graphs.

  • Title of the graph
  • Title of the y axis
  • Title of the x axis
GCoptions options;
options.title = std::string("Example");
options.yAxis = std::string("Y Axis");
options.xAxis = std::string("X Axis");
options.lineWidth = 5;
Google chart options.
std::string xAxis
X axis name.
size_t lineWidth
Width of the line.
std::string title
Title of the chart.
std::string yAxis
Y axis name.

Graph write

We create the object to create plots with Google Charts

A writer can produce several graphs optionally interleaved with HTML code. Here we write in HTML a description of the graph, than we output the graph

AddLinesGraph create a typical graph with lines

//
cg.addHTML("<h2>First graph</h2>");
cg.AddLinesGraph(x,y,yn,options);
Small class to produce graph with Google chart in HTML.
void AddLinesGraph(openfpm::vector< X > &x, openfpm::vector< Y > &y, const GCoptions &opt)
Add a simple lines graph.
void addHTML(const std::string &html)
Add HTML text.

Hist graph

Hist graph is instead a more flexible Graph writer. In particular we can specify how to draw each dataset. With the option

  • stype specify how to draw each dataset
  • stypeext we can override the default stype option. In this case we say that the third dataset in must be reppresented as a line instead of a bars

To note that we can reuse the same Google chart writer to write multiple Graph on the same page, interleaved with HTML code

options.stype = std::string("bars");
// it say that the dataset4 must me represented with a line
options.stypeext = std::string("{3: {type: 'line'}}");
cg.addHTML("<h2>Second graph</h2>");
cg.AddHistGraph(x,y,yn,options);
void AddHistGraph(openfpm::vector< Y > &y)
Add an histogram graph.
std::string stypeext
std::string stype

%Error bars

Here we show how to draw error bars. Error bars are drawn specifying intervals with a min and a max. Intervals in general does not have to encapsulate any curve. First we construct the vector y with 3 values the first value contain the curve points, the second and third contain the min,max interval.

cg.addHTML("<h2>Third graph</h2>");
// The first colum are the values of a line while the other 2 values
// are the min and max of an interval, as we can see interval does not
// have to encapsulate any curve
y.clear();
y.add({0.10,0.20,0.19});
y.add({0.11,0.21,0.18});
y.add({0.12,0.22,0.21});
y.add({0.15,0.25,0.20});
y.add({0.09,0.29,0.25});
y.add({0.08,0.28,0.27});
// Here we mark that the the colum 2 and 3 are intervals
yn.clear();
yn.add("line1");
yn.add("interval");
yn.add("interval");
cg.AddLinesGraph(x,y,yn,options);

The style of each interval can be controlled, and the definition of intervals can be interleaved with definition of other lines. In this example we show how to define 3 lines and 3 intervals, controlling the style of the last interval

cg.addHTML("<h2>Four graph</h2>");
// again 6 point but 9 values
y.clear();
y.add({0.10,0.20,0.19,0.22,0.195,0.215,0.35,0.34,0.36});
y.add({0.11,0.21,0.18,0.22,0.19,0.215,0.36,0.35,0.37});
y.add({0.12,0.22,0.21,0.23,0.215,0.225,0.35,0.34,0.36});
y.add({0.15,0.25,0.20,0.26,0.22,0.255,0.36,0.35,0.37});
y.add({0.09,0.29,0.25,0.30,0.26,0.295,0.35,0.34,0.36});
y.add({0.08,0.28,0.27,0.29,0.275,0.285,0.36,0.35,0.37});
// colum 0 and 1 are lines
// colums 2-3 and 4-5 are intervals
// colum 6 is a line
// colum 7-8 is an interval
yn.add("line1");
yn.add("line2");
yn.add("interval");
yn.add("interval");
yn.add("interval");
yn.add("interval");
yn.add("line3");
yn.add("interval");
yn.add("interval");
// Intervals are enumerated with iX, for example in this case with 3 intervals we have i0,i1,i2
// with this line we control the style of the intervals. In particular we change from the default
// values
options.intervalext = std::string("{'i2': { 'color': '#4374E0', 'style':'bars', 'lineWidth':4, 'fillOpacity':1 } }");
cg.AddLinesGraph(x,y,yn,options);
std::string intervalext

More options

In this last example we also show how to:

  • Make the graph bigger, setting width and height options
  • Give the possibility to to zoom-in and zoom-out with GC_EXPLORER
  • Use lines instead a smooth function to connect points
  • Use logaritmic scale
Note
For more options refer to doxygen and Google Charts
xn.add(1.0);
xn.add(2.0);
xn.add(3.0);
xn.add(4.0);
xn.add(5.0);
xn.add(6.0);
options.intervalext = "";
options.width = 1280;
options.heigh = 720;
options.curveType = "line";
options.more = GC_ZOOM + "," + GC_X_LOG + "," + GC_Y_LOG;
cg.AddLinesGraph(xn,y,yn,options);
cg.write("gc_out.html");
void write(std::string file)
It write the graphs on file in html format using Google charts.
size_t width
width of the graph in pixels
size_t heigh
height of the graph in pixels
std::string more
more
std::string curveType
curve type

Finalize

At the very end of the program we have always de-initialize the library

openfpm_finalize();