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.

 
    openfpm::vector<std::string> x;
    openfpm::vector<openfpm::vector<double>> y;
    openfpm::vector<std::string> yn;
 

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;
 

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

 
    GoogleChart cg;
    //
    cg.addHTML("<h2>First graph</h2>");
    cg.AddLinesGraph(x,y,yn,options);
 

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);
 

%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);
 

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

 
    openfpm::vector<double> xn;
 
    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");
 

Finalize

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

 
    openfpm_finalize();