CloudDeploy and using 'OverLay"

Question

To explain my question, I use a simpel dataset:

testdata = {
{DateObject[{2017, 1, 1}, "Day"], 486, 1, 2}, 
{DateObject[{2017, 1, 2}, "Day"], 487, 2, 3}, 
{DateObject[{2017, 1, 3}, "Day"], 487, 3, 4}, 
{DateObject[{2017, 1, 4}, "Day"], 486, 4, 5}, 
{DateObject[{2017, 1, 5}, "Day"], 487, 5, 6}, 
{DateObject[{2017, 1, 6}, "Day"], 485, 6, 7}};

head = {"nr1" -> 2, "nr2" -> 3, "nr3" -> 4};

For a website dashboard I want to make a interactive chart. This charts shows values for 6 days. In the same shart I want to show the differences between two days. The function 'shows'doesn't works because the plotranges in the y-axes are different. in the(offline & online Notebook) the function 'OverLay' works fine.

however, when I deploy the same code as a FormPage, then it goes wrong.

CloudDeploy[FormPage[{ "kop" -> {head} -> 2},
  (testdata1 = 
     TimeSeries[Map[Flatten, testdata, {-4}][[All, {1, #kop}]]];
    test1 = DateListPlot[testdata1,
      , PlotStyle -> {Red, Thick}
      , PlotTheme -> {"Scientific", "Wide", "Sans"}
      , Frame -> {{True, True}, {False, True}}
      , FrameStyle -> {Automatic, Red, Automatic, Automatic}
      , FrameTicks -> {{All, None}, {All, None}}
      , ImagePadding -> 40
      ];
    test2 = 
     DateListPlot[
      TimeSeriesInsert[
       Differences[testdata1], {"January 1st, 2017", 0}]
      , PlotStyle -> {Blue, Thick}
      , PlotTheme -> {"Scientific", "Wide", "Sans"}
      , Frame -> {{False, True}, {True, False}}
      , FrameStyle -> {Automatic, Automatic, Automatic, Blue}
      , FrameTicks -> {{None, All}, {All, None}}
      , ImagePadding -> 40];
    Overlay[{test1, test2}]
    ) &
  ], Permissions -> "Public"]

Who has a suggestion for solving this issue?

Answer 1

My practice is to build these forms in parts, then assemble as a last step. With that in mind the following works for me:

overlayFO = FormObject[{"kop" -> {head} -> 2}];

overlayFunc = Function[
  testdata1 = 
    TimeSeries[Map[Flatten, testdata, {-4}][[All, {1, #kop}]]]; 
  test1 = DateListPlot[testdata1, , PlotStyle -> {Red, Thick}, 
    PlotTheme -> {"Scientific", "Wide", "Sans"}, 
    Frame -> {{True, True}, {False, True}}, 
    FrameStyle -> {Automatic, Red, Automatic, Automatic}, 
    FrameTicks -> {{All, None}, {All, None}}, ImagePadding -> 40]; 
  test2 = DateListPlot[
    TimeSeriesInsert[
    Differences[testdata1], {"January 1st, 2017", 0}], 
    PlotStyle -> {Blue, Thick}, 
    PlotTheme -> {"Scientific", "Wide", "Sans"}, 
    Frame -> {{False, True}, {True, False}}, 
    FrameStyle -> {Automatic, Automatic, Automatic, Blue}, 
    FrameTicks -> {{None, All}, {All, None}}, ImagePadding -> 40];
  Rasterize[
    Overlay[{test1, test2}]
  ]
];

overlayFP = FormPage[
  testdata = {
    {DateObject[{2017, 1, 1}, "Day"], 486, 1, 2}, 
    {DateObject[{2017, 1, 2}, "Day"], 487, 2, 3}, 
    {DateObject[{2017, 1, 3}, "Day"], 487, 3, 4}, 
    {DateObject[{2017, 1, 4}, "Day"], 486, 4, 5}, 
    {DateObject[{2017, 1, 5}, "Day"], 487, 5, 6}, 
    {DateObject[{2017, 1, 6}, "Day"], 485, 6, 7}}; 
  head = {"nr1" -> 2, "nr2" -> 3, "nr3" -> 4};
overlayFO,
overlayFunc
];

CloudDeploy[
  overlayFP,
  "overlayV1",
  Permissions -> "Public"
]

Note, wrapping Rasterize[ ] around graphs is just one way to make such requirements work reasonably well in HTML.