javascript interactive plot context

Question

I am trying to embed an interactive plot into a ConText presentation. I'm not entirely sure if this is possible. I am using javascript code from amCharts. For this I need three java scripts, two of which are fairly long, so I figured I could try to read them in using the \input command (not sure if this works within \startJScode)

From there I make the chart and call the object "plot." If I wanted to draw this plot in html I would simply create a div container. How can I make container (field?) in context to draw the chart? Also how can I reference the "plot" object in the container/field?

Here is the way I have set up the JS code:

\setuppapersize[S6][S6]
\setuppagenumbering[state=stop]
\setuptolerance[verytolerant,stretch] 
\switchtobodyfont[modern,20pt]
\setupbackgrounds[page][background=color,backgroundcolor=white]
\usemodule[fields,abr-pseudocaps]

\starttext
\startJScode {EXAMPLE}
\input amchars.js
\input serial.js
AmCharts.makeChart("plot",{
  "type": "serial",
  "categoryField": "category",
  "categoryAxis": {
  "gridPosition": "start"
},
  "graphs": [
    {
      "title": "Graph title",
      "valueField": "column-1"
    }
],
  "valueAxes": [
    {
      "title": "Axis title"
    }
  ],
  "legend": {
    "useGraphSettings": true
  },
  "titles": [
    {
      "size": 15,
      "text": "Chart Title"
    }
  ],
  "dataProvider": [
     {
        "category": "category 1",
        "column-1": 8
      },
     {
         "category": "category 2",
         "column-1": 10
      },
   ]
});
\stopJScode


\stoptext

AlexG · Accepted Answer · 2015-09-28T13:15:55.257

2

JavaScript engines in web browsers (at which amCharts target) are very different from those shipping with the few JavaScript supporting PDF viewers (A-Reader, Foxit, PDF-XChange; which else?).

The most important ingredient for interactivity is a drawing canvas which is not available in PDF related JS engines (whose functionality beyond core JavaScript, version 1.5 of ISO-16262, is defined by Adobe ).

The canvas element is part of HTML5 but not of core JavaScript. Thus, it is not possible to get toolkits such as amCharts working in the PDF context.

edited Sep 28 '15 at 13:15

answered Sep 28 '15 at 12:26

AlexG

54,894

Thanks @AlexG, not the answer I was hoping for but the one I expected. Hopefully in time these drawing canvas will be added so we can make presentation with interactive charts that can run without an internet connection. – Christine Braun Sep 28 '15 at 21:17
@ChristineBraun: I principle, chart apps could also be created in Flash, using the Apache Flex SDK, and embedded with the media9 LaTeX package. See http://tex.stackexchange.com/a/98686 for example. – AlexG Sep 29 '15 at 09:07
@ChristineBraun: See http://flex.apache.org/tourdeflex for demos of the various charts widgets available with the Flex SDK. Go to "Spark Framework Components"-->"Charts". – AlexG Sep 29 '15 at 09:17

javascript interactive plot context

1 Answers1