| 1 | {% extends "basex.html" %} |
| 2 | {% load markup %} |
| 3 | {% block pageid %}code{% endblock %} |
| 4 | {% block headers %} |
| 5 | <link href="doc.css" media="screen" rel="stylesheet" type="text/css" /> |
| 6 | {% endblock %} |
| 7 | {% block title %}PlotKit.Canvas{% endblock %} |
| 8 | |
| 9 | {% block content %} |
| 10 | <div class="page doc api"> |
| 11 | {% filter markdown %} |
| 12 | [PlotKit Home](PlotKit.html) | [<<](PlotKit.SweetSVG.html) |
| 13 | |
| 14 | PlotKit EasyPlot |
| 15 | ================ |
| 16 | |
| 17 | EasyPlot is a wrapper around the various PlotKit classes to allow you to get a chart plotted as quick as possible with as little code as possible. Using EasyPlot, you will get a chart started with just a single line. |
| 18 | |
| 19 | Constructor |
| 20 | ----------- |
| 21 | ``PlotKit.EasyPlot(style, options, divElement, datasourceArray)`` |
| 22 | |
| 23 | EasyPlot object will automatically choose the supported render method, currently Canvas or SVG in that order, and render the datasources given in ``datasourceArray``. |
| 24 | |
| 25 | ### Arguments: |
| 26 | |
| 27 | * ``style`` may be ``line``, ``bar`` or ``pie``. |
| 28 | * ``options`` is an associative dictionary that is the combined options of both ``Layout`` and ``Renderer``. |
| 29 | * ``divElement`` is the container that the chart should be rendered in. It is best that the ``width`` and ``height`` attribute is set in the ``DIV`` element. |
| 30 | * ``datasourceArray`` is an array of data sources. The elements of the array can either be a two dimensional array given in ``Plotkit.Layout.addDataset`` or it can be a string that points to the relative URL of a comma separated data file. |
| 31 | |
| 32 | EasyPlot Example |
| 33 | ---------------- |
| 34 | |
| 35 | <div id="example" style="margin: 0 auto 0 auto;" width="400" height="400"></div> |
| 36 | |
| 37 | <script type="text/javascript"> |
| 38 | var data = [[0,0], [1,2], [2,3], [3, 7], [4, 8], [5, 6]]; |
| 39 | var plotter = EasyPlot("line", {}, $("example"), [data, "sample.txt"]); |
| 40 | </script> |
| 41 | |
| 42 | |
| 43 | In this example, two datasets are passed, one defined as a 2D array and another which is a comma separated text file (CSV) at the location "sample.txt". A demonstration of this is found in the [QuickStartEasy][] example. |
| 44 | |
| 45 | |
| 46 | [QuickStartEasy]: http://media.liquidx.net/js/plotkit-tests/quickstart-easy.html |
| 47 | |
| 48 | {% endfilter %} |
| 49 | </div> |
| 50 | {% endblock %} |