Upgrade Mango Charts on Watch list and Point Details

[Joelhaggar]

From Pedro:

Joel,

For your reference, here is a Comparison of JavaScript charting frameworks.

I think it would be useful to have Multiple X and Y axis support X axis does not have to be time Scatter plots against other datapoints Histograms (can be generated with bar graphs if not directly supported) Polar plots Mouse over and on-click interaction Zoom Scroll outside time range I was submitting the text below to mango on GitHub as a feature request, but stopped after you Skyped me that you're using JfreeChart. The points below are still valid. Enable different plot types: multiple axes, histogram, etc

The Watch List page is very useful for comparing different datapoints to find correlations and troubleshoot issues. However, the plot feature has some severe shortcomings that cripple its usefulness as a troubleshooting tool: It only support a single axis plot, so large value points cannot be compared to small value points because the smaller value points are squeezed into a flat line by the vertical axis scale. Multiple Y-axis support would resolve this. The horizontal axis is always time. An X-Y scatter plot would enable comparing PV power output vs. solar radiation, wind power vs. wind speed, etc. There is no zoom feature, so changing the time scale of the plot is tedious. The lack of different plot line styles makes it hard to distinguish between similarly colored lines. Lack of line smoothing makes it hard to see samples that have high value variability withing a short time range. There are no polar plots to visualize polar data such as wind power vs. direction Lack of pie charts or stacked mountain charts make it hard to visualize percentages. Lack of histograms makes it hard to visualize statistics like ON duration, OFF duration, time of day effects, etc. No crosshairs or cursor to read specific values from the chart No dynamic chart that can plot live data and update the chart; plotting is only of historical data No difference chart such as that in eGauge that highlights surplus/deficit by filling in a red or green color between plotted lines depending on which line is plotted above the other.

DGLux is not a viable alternative because it is not interactive like Mango: data values are not selected on-the-fly by the common user; only by admins who know what they're doing.

Recommendation: use the features in http://www.jfree.org/jfreechart/

[resotek]

Thanks, Joel. Note that the hyperlink was stripped out of your copy/paste: https://en.wikipedia.org/wiki/Comparison_of_JavaScript_charting_frameworks

[resotek]

I re-pasted Joel's pasted post from my email, but with original formatting so it's easier to read on GitHub. Note that I suggested jFreeChart because I could not find certain important features in D3 that are available in jFreeChart. However, I have since found examples of how to implement such features in the D3 gallery and linked to them below, and also filled in more detail.

The obvious advantage of D3 is that since it is interactive, it is much faster to change the graph (e.g. zoom and pan). The chart GUI would:

• be accessible from the data_point_details page and Watch List page, and as a Graphical Views object
• Watch list charts would enable multiple-axis plotting
  • Any number of Y-axes can be generated based on the datapoint's displayed unit (e.g. kW and Volts will be shown on the same plot with their own separate Y-axis)
  • User can assign an alternate axis to points with same units that have very different scaling so they're not squeezed toward zero.
  • User can select whether X-axis is time or another datapoint.
• enable the user to select the datapoints to be used in the selected field
• Allow the user to select the chart type
  • Chart types are selected from a drop-down pick list
  • Common chart types would be provided in a Mango chart-type library (e.g. x vs time, histogram, polar, geographical map overlay, etc).
  • A separate page allows users to define their own custom chart types that were not included in Mango's default chart list
  • Users would copy then modify existing Mango-provided chart types.
  • User-defined chart types would be automatically shown in pull-down chart pick-list
  • A Submit to Mango button (green up-arrow) will encourage users to share their new chart type with Infinite Automation, thus enabling Mango to crowd-source building a larger selection of chart types.

---

Joel,

For your reference, here is a Comparison of JavaScript charting frameworks.

I think it would be useful to have:

• Multiple X and Y axis support: Dual scale line chart so that we can compare plots that have different numeric ranges
• Difference Chart to illustrate surplus/deficit
• X axis does not have to be time:
  • Scatter plot plots against other datapoints
  • Bubble chart
  • Histograms (can be generated with bar graphs if not directly supported)
  • Polar plots
  • Wind history: a histogram plotted on a polar diagram
  • Sankey diagram with mouseover (very useful for showing flows)
  • Zoomable treemap: useful for showing who the biggest power consumers are
  • Pie chart
  • Heatmap
  • Mouse over and on-click interaction
  • Zoom
  • Scroll outside time range

I was submitting the text below to mango on GitHub as a feature request, but stopped after you Skyped me that you're using JfreeChart. The points below are still valid. Enable different plot types: multiple axes, histogram, etc

The Watch List page is very useful for comparing different datapoints to find correlations and troubleshoot issues. However, the plot feature has some severe shortcomings that cripple its usefulness as a troubleshooting tool:

• It only support a single axis plot, so large value points cannot be compared to small value points because the smaller value points are squeezed into a flat line by the vertical axis scale. * Multiple Y-axis support would resolve this.
• The horizontal axis is always time. An X-Y scatter plot would enable comparing PV power output vs. solar radiation, wind power vs. wind speed, etc.
• There is no zoom feature, so changing the time scale of the plot is tedious.
• The lack of different plot line styles makes it hard to distinguish between similarly colored lines.
• Lack of line smoothing makes it hard to see samples that have high value variability withing a short time range.
• There are no polar plots to visualize polar data such as wind power vs. direction
• Lack of pie charts or stacked mountain charts make it hard to visualize percentages.
• Lack of histograms makes it hard to visualize statistics like ON duration, OFF duration, time of day effects, etc.
  • No crosshairs or cursor to read specific values from the chart
  • No dynamic chart that can plot live data and update the chart; plotting is only of historical data
  • No difference chart such as that in eGauge that highlights surplus/deficit by filling in a red or green color between plotted lines depending on which line is plotted above the other.

DGLux is not a viable alternative because it is not interactive like Mango: data values are not selected on-the-fly by the common user; only by admins who know what they're doing.

Recommendation: use the features in http://www.jfree.org/jfreechart/

[resotek]

Pre-render d3.js charts at server side part1: proof-of-concept (Note the source).

This guide explains how to use d3.js on the server to pre-render data-visualization, which will be used client-side.

The main goal here is to do the heavy-lifting on the server in order to reduce page load time and other burden for the website visitors, while keeping all the power offered by d3.js, in terms of interactions on the browser.

This first article explains the concept via a very simple example, while a second one will illustrate its benefits when applied to a large chart.

[terrypacker]

Closing as this is now part of 3.0.0's new UI module.