1
$\begingroup$

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.

enter image description here

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?

$\endgroup$

1 Answer 1

2
$\begingroup$

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.

$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.