[NEW] Allow rendering charts using Plotly.js from LIST plugin

The easiest way to test this is to try to reproduce the example at: https://plot.ly/javascript/pie-charts/

var data = [{
  values: [19, 26, 55],
  labels: ['Residential', 'Non-Residential', 'Utility'],
  type: 'pie'
}];

var layout = {
  height: 400,
  width: 500
};

Plotly.newPlot('myDiv', data, layout);

To do this in a LIST plugin, let's first create a tracker as follows with 3 items:

Then to first test things in a hardcoded way. Note that the delimiter used is :: in each case.

There is also the setting of left margin and right margin as per this example. It is not necessary to set the height and width as the code automatically sets Plotly to use Responsive mode so it should size to your container div.

It is quite flexible as everything follows whatever is in Plotly.js so there is nothing that you can't figure out by reading Plotly's documentation, by simply setting whatever is for the "data" and the "layout" settings:

var layout = {
  margin: {
    l: 50,
    r: 300
  }
};

{LIST()}
    {filter field="tracker_id" content="1"}
    {pagination max="3"}
    {OUTPUT(plotly="pie")}
        {data for=values content="19::26::55"}
        {data for=labels content="Residential::Non-Residential::Utility"}
        {layout for=margin::l content="50"}
        {layout for=margin::r content="300"}
    {OUTPUT}
{LIST}

Now we retrieve info from the tracker instead:

{LIST()}
    {filter field="tracker_id" content="1"}
    {pagination max="3"}
    {OUTPUT(plotly="pie")}
        {data for=values field="tracker_field_units"}
        {data for=labels field="tracker_field_type_text"}
    {OUTPUT}
{LIST}

You will see (and note that since we didn't add the margins the margins have changed):

Now, there is also a way to use the math functions similar to how it's used for https://doc.tiki.org/PluginList-output-control-block#Report_Formatting to calculate values. For example, we want to add the Bonus field to the Units field for each item and then re-plot the pie chart using that Units+Bonus value.

{LIST()}
    {filter field="tracker_id" content="1"}
    {pagination max="3"}
    {OUTPUT(plotly="pie")}
        {DATACALC(for=values)}
            (for-each (list results) (formula (add tracker_field_units tracker_field_bonus)))
        {DATACALC}
        {data for=labels field="tracker_field_type_text"}
    {OUTPUT}
{LIST}

Now you will see:

As another example, now with multiple data series (which is possible in charts like a scatter graph but not pie chart):

{LIST()}
    {filter field="tracker_id" content="13"}
    {pagination max="3"}
    {OUTPUT(plotly="scatter")}
        {data for=x series=trace1 content="1::2::3::4"}
        {data for=y series=trace1 content="10::15::13::17"}
        {data for=mode series=trace1 content="markers"}
        {data for=x series=trace2 content="2::3::4::5"}
        {data for=y series=trace2 content="16::5::11::9"}
        {data for=mode series=trace2 content="lines"}
        {data for=x series=trace3 content="1::2::3::4"}
        {data for=y series=trace3 content="12::9::15::12"}
        {data for=mode series=trace3 content="lines+markers"}
    {OUTPUT}
{LIST}

albeit with hard-coded values, is equivalent to the example on: https://plot.ly/javascript/line-and-scatter/

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  mode: 'markers',
  type: 'scatter'
};

var trace2 = {
  x: [2, 3, 4, 5],
  y: [16, 5, 11, 9],
  mode: 'lines',
  type: 'scatter'
};

var trace3 = {
  x: [1, 2, 3, 4],
  y: [12, 9, 15, 12],
  mode: 'lines+markers',
  type: 'scatter'
};

var data = [trace1, trace2, trace3];

Plotly.newPlot('myDiv', data);

You will see: