Tethys multiple time-series plot visualization

[Prasanna dahal]

Hi there.

I am looking to draw a plot of two or more timeseries data in my tethys app. Basically the plot containing two values for one date time element (e.g. of observed and simulated hydrograph). I tried tethys_sdk.gizmos.Timeseries, and tethys_sdk.gizmos.AreaRange following the documentation provided in tethysplatform.org. With tethys_sdk.gizmos.Timeseries, I was able to get just one timeseries displayed, and could not get any sort of plot going with tethys_sdk.gizmos.AreaRange.  

I could not even get the example to work. Let me know what I am doing wrong. 

in controllers.py

from tethys_sdk.gizmos import PlotView, AreaRange,

averages = [
    [datetime(2009, 7, 1), 21.5], [datetime(2009, 7, 2), 22.1], [datetime(2009, 7, 3), 23],
    [datetime(2009, 7, 4), 23.8], [datetime(2009, 7, 5), 21.4], [datetime(2009, 7, 6), 21.3],
    [datetime(2009, 7, 7), 18.3], [datetime(2009, 7, 8), 15.4], [datetime(2009, 7, 9), 16.4],
    [datetime(2009, 7, 10), 17.7], [datetime(2009, 7, 11), 17.5], [datetime(2009, 7, 12), 17.6],
    [datetime(2009, 7, 13), 17.7], [datetime(2009, 7, 14), 16.8], [datetime(2009, 7, 15), 17.7],
    [datetime(2009, 7, 16), 16.3], [datetime(2009, 7, 17), 17.8], [datetime(2009, 7, 18), 18.1],
    [datetime(2009, 7, 19), 17.2], [datetime(2009, 7, 20), 14.4],
    [datetime(2009, 7, 21), 13.7], [datetime(2009, 7, 22), 15.7], [datetime(2009, 7, 23), 14.6],
    [datetime(2009, 7, 24), 15.3], [datetime(2009, 7, 25), 15.3], [datetime(2009, 7, 26), 15.8],
    [datetime(2009, 7, 27), 15.2], [datetime(2009, 7, 28), 14.8], [datetime(2009, 7, 29), 14.4],
    [datetime(2009, 7, 30), 15], [datetime(2009, 7, 31), 13.6]
]

ranges = [
    [datetime(2009, 7, 1), 14.3, 27.7], [datetime(2009, 7, 2), 14.5, 27.8],
    [datetime(2009, 7, 3), 15.5, 29.6],
    [datetime(2009, 7, 4), 16.7, 30.7], [datetime(2009, 7, 5), 16.5, 25.0],
    [datetime(2009, 7, 6), 17.8, 25.7],
    [datetime(2009, 7, 7), 13.5, 24.8], [datetime(2009, 7, 8), 10.5, 21.4],
    [datetime(2009, 7, 9), 9.2, 23.8],
    [datetime(2009, 7, 10), 11.6, 21.8], [datetime(2009, 7, 11), 10.7, 23.7],
    [datetime(2009, 7, 12), 11.0, 23.3],
    [datetime(2009, 7, 13), 11.6, 23.7], [datetime(2009, 7, 14), 11.8, 20.7],
    [datetime(2009, 7, 15), 12.6, 22.4],
    [datetime(2009, 7, 16), 13.6, 19.6], [datetime(2009, 7, 17), 11.4, 22.6],
    [datetime(2009, 7, 18), 13.2, 25.0],
    [datetime(2009, 7, 19), 14.2, 21.6], [datetime(2009, 7, 20), 13.1, 17.1],
    [datetime(2009, 7, 21), 12.2, 15.5],
    [datetime(2009, 7, 22), 12.0, 20.8], [datetime(2009, 7, 23), 12.0, 17.1],
    [datetime(2009, 7, 24), 12.7, 18.3],
    [datetime(2009, 7, 25), 12.4, 19.4], [datetime(2009, 7, 26), 12.6, 19.9],
    [datetime(2009, 7, 27), 11.9, 20.2],
    [datetime(2009, 7, 28), 11.0, 19.3], [datetime(2009, 7, 29), 10.8, 17.8],
    [datetime(2009, 7, 30), 11.8, 18.5],
    [datetime(2009, 7, 31), 10.8, 16.1]
]

area_range_plot_object = AreaRange(
    title='July Temperatures',
    y_axis_title='Temperature',
    y_axis_units='*C',
    width='500px',
    height='500px',
    series=[{
        'name': 'Temperature',
        'data': averages,
        'zIndex': 1,
        'marker': {
            'lineWidth': 2,
        }
    }, {
        'name': 'Range',
        'data': ranges,
        'type': 'arearange',
        'lineWidth': 0,
        'linkedTo': ':previous',
        'fillOpacity': 0.3,
        'zIndex': 0
    }]
)

observed_hydrograph = PlotView(plot_object=area_range_plot_object,
                               width='500px',
                               height='500px')

context = {
            'test_string1':test_string,
    'area_range_plot_object':observed_hydrograph,


}

In html

{% load tethys_gizmos %}

{% gizmo  plot_view area_range_plot_object %}

I believe I have installed Tethysplatform 1.4 in my development Ubuntu machine (I am not sure though). It looks like Tethys 2.0 is available. I am open to upgrading to the newer version too, as long as most of the previous gizmos etc. work fine. 

[ezra.j.rice]

Thanks for turning to the Tethys forum for this question. It is difficult to say exactly what is going wrong with your particular instance without seeing your source code. I am able to run the examples just fine using Tethys 1.4 on Ubuntu 14.04. Is it possible to show your source code (just the controller and html should be sufficient) along with any traceback errors you get? There may be errors in either the controller (check terminal) or the JavaScript (check browser console). These would likely help with a more coherent and rapid response.

[ezra.j.rice]

One other thing to note is to remove the last comma after your import statement. If you leave that in, you will get an invalid syntax error. I don't know if you have that in your source code, but in the example you posted, it's there.

[swainn]

Can you please post the code that is not working (the entire controller function, specifically). Also, any errors that your are recieving would be helpful as well. You may also want to upgrade to Tethys 2.0. It provides additional options for plotting including Plotly and Bokeh. Those may be simpler to use.

[Prasanna dahal]

The error/warning given is: 

DEPRECATION WARNING: The "PlotView" object has been deprecated as of version 1.2.0. Please use the new method for configuring plot views.

The actual code is something like this (The entire controller function is quite long. If you think this is not enough, let me know and I will post the entire function):

Controller.py

from tethys_sdk.gizmos import TimeSeries, AreaRange, PlotView

import datetime

series_1 = [[datetime.datetime(2010, 10, 2, 0, 0), 0.0], [datetime.datetime(2010, 10, 3, 0, 0), 1.113], [datetime.datetime(2010, 10, 4, 0, 0), 1.17], [datetime.datetime(2010, 10, 5, 0, 0), 1.356], [datetime.datetime(2010, 10, 6, 0, 0), 1.918], [datetime.datetime(2010, 10, 7, 0, 0), 0.0], [datetime.datetime(2010, 10, 8, 0, 0), 0.0], [datetime.datetime(2010, 10, 9, 0, 0), 0.0], [datetime.datetime(2010, 10, 10, 0, 0), 0.161], [datetime.datetime(2010, 10, 11, 0, 0), 2.627], [datetime.datetime(2010, 10, 12, 0, 0), 8.327], [datetime.datetime(2010, 10, 13, 0, 0), 43.355], [datetime.datetime(2010, 10, 14, 0, 0), 0.0], [datetime.datetime(2010, 10, 15, 0, 0), 0.0], [datetime.datetime(2010, 10, 16, 0, 0), 0.0], [datetime.datetime(2010, 10, 17, 0, 0), 1.0], [datetime.datetime(2010, 10, 18, 0, 0), 1.178], [datetime.datetime(2010, 10, 19, 0, 0), 1.577], [datetime.datetime(2010, 10, 20, 0, 0), 4.973], [datetime.datetime(2010, 10, 21, 0, 0), 8.108], [datetime.datetime(2010, 10, 22, 0, 0), 0.0], [datetime.datetime(2010, 10, 23, 0, 0), 0.0], [datetime.datetime(2010, 10, 24, 0, 0), 1.058], [datetime.datetime(2010, 10, 25, 0, 0), 20.553], [datetime.datetime(2010, 10, 26, 0, 0), 17.641], [datetime.datetime(2010, 10, 27, 0, 0), 5.0], [datetime.datetime(2010, 10, 28, 0, 0), 2.0], [datetime.datetime(2010, 10, 29, 0, 0), 0.0], [datetime.datetime(2010, 10, 30, 0, 0), 0.0], [datetime.datetime(2010, 10, 31, 0, 0), 1.122]]
series_2 = [[datetime.datetime(2010, 10, 2, 0, 0), 0.0], [datetime.datetime(2010, 10, 3, 0, 0), 0.113], [datetime.datetime(2010, 10, 4, 0, 0), 0.17], [datetime.datetime(2010, 10, 5, 0, 0), 0.356], [datetime.datetime(2010, 10, 6, 0, 0), 0.918], [datetime.datetime(2010, 10, 7, 0, 0), 0.0], [datetime.datetime(2010, 10, 8, 0, 0), 0.0], [datetime.datetime(2010, 10, 9, 0, 0), 0.0], [datetime.datetime(2010, 10, 10, 0, 0), 0.161], [datetime.datetime(2010, 10, 11, 0, 0), 2.627], [datetime.datetime(2010, 10, 12, 0, 0), 8.327], [datetime.datetime(2010, 10, 13, 0, 0), 13.355], [datetime.datetime(2010, 10, 14, 0, 0), 0.0], [datetime.datetime(2010, 10, 15, 0, 0), 0.0], [datetime.datetime(2010, 10, 16, 0, 0), 0.0], [datetime.datetime(2010, 10, 17, 0, 0), 0.0], [datetime.datetime(2010, 10, 18, 0, 0), 0.178], [datetime.datetime(2010, 10, 19, 0, 0), 1.577], [datetime.datetime(2010, 10, 20, 0, 0), 4.973], [datetime.datetime(2010, 10, 21, 0, 0), 8.108], [datetime.datetime(2010, 10, 22, 0, 0), 0.0], [datetime.datetime(2010, 10, 23, 0, 0), 0.0], [datetime.datetime(2010, 10, 24, 0, 0), 1.058], [datetime.datetime(2010, 10, 25, 0, 0), 6.553], [datetime.datetime(2010, 10, 26, 0, 0), 17.641], [datetime.datetime(2010, 10, 27, 0, 0), 0.0], [datetime.datetime(2010, 10, 28, 0, 0), 0.0], [datetime.datetime(2010, 10, 29, 0, 0), 0.0], [datetime.datetime(2010, 10, 30, 0, 0), 0.0], [datetime.datetime(2010, 10, 31, 0, 0), 1.122]]

observed_hydrograp_obj = AreaRange(
    title='Hydrograph',
    y_axis_title='cfs',
    y_axis_units='cfs',
    series=[{
        'name': 'series_1 Flow',
        'data': series_1,

        'zIndex': 1,
        'marker': {
            'lineWidth': 2,
        }
    }, {

        'name': 'series_2 Flow',
        'data': series_2,
        'type': 'arearange',
        'lineWidth': 0.1,

        'linkedTo': ':previous',
        'fillOpacity': 0.3,
        'zIndex': 0
    }]
)

hydrograph = PlotView(plot_object=observed_hydrograp_obj,

                           width='500px',
                           height='500px')

context = {
           'observed_hydrograph':hydrograph,
           }

In HTML

{% gizmo plot_view observed_hydrograph %}

[ezra.j.rice]

Prasanna,

I have created a Tethys App that gives examples of how to use charts in Tethys 1.4. The source code can be found at 

https://github.com/ezrajrice/tethys_1.4-chart_examples.git 

I have created examples for a single time-series plot, multiple time-series on one plot, and an area-range plot. All of these are done using the HighCharts plotting engine. To view how these were implemented, see the source code at the previously mentioned link. As I have time, I will update this app to include the rest of the plots for Tethys 1.4. I will also be adding a "common mistakes" page to the app (when I have time) that highlights some of the common mistakes of using these plots.

Let us know if you have further questions.

Sincerely,

Ezra

On Saturday, July 1, 2017 at 8:36:09 PM UTC-7, Prasanna dahal wrote:

[Prasanna dahal]

Hi Ezra,

The examples were tremendous help. Thank you very much. I used the code from the example, and it worked like a charm.  I used the TimeSeries gizmo replacing the AreaRange I was using earlier. 

On a side note I would also like to remind other users to be mindful of datetime element while using these examples. I had my rest of code as:

import datetime

so, my datetime elements were of the form:

datetime.datetime(2010,1,1,0,0)

 However, in the example the datetime function is already imported as: 

from datetime import datetime

so, its datetime elements are of the form: 

datetime(2010,1,1,0,0)

To make the code work for me, I added the line 

from datetime import datetime

just before the example code.

Thank you Ezra and everyone for helping.

Sincerely,

Prasanna