Commit | Line | Data |
---|---|---|
6a1aa64f DV |
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 %} |