plotkit_v091/tests/demo.js

   1 /* actual tests */
   2
   3 function drawDemo(element, layout, options) {
   4     var renderer = new PlotKit.CanvasRenderer(element, layout, options);
   5     renderer.render();
   6 }
   7
   8 function demoWithStyle(style) {
   9     // datasets
  10     var dataset = [
  11        [0,1],
  12        [1,4],
  13        [2,16],
  14        [3,8],
  15        [4,16],
  16        [5,4],
  17        [6,1]
  18     ];
  19
  20     var dataset_rev = [
  21        [6,0],
  22        [5,1],
  23        [4,4],
  24        [3,9],
  25        [2,16],
  26        [1,25],
  27        [0,36]
  28     ];
  29
  30
  31     var options = {
  32         "IECanvasHTC": "../plotkit/iecanvas.htc",
  33         "drawBackground": false,
  34         "shouldFill": true,
  35         "shouldStroke": true,
  36         "drawXAxis": true,
  37         "drawYAxis": true,
  38         "padding": {left: 40, right: 10, top: 10, bottom: 20},
  39         "strokeColor": null,
  40         "strokeColorTransform": "asStrokeColor"
  41     };
  42
  43     if (style == "pie") {
  44         options["padding"] = {left: 50, right: 50, top: 50, bottom: 50}
  45     }
  46
  47     var layout = new PlotKit.Layout(style, options);
  48     layout.addDataset("noname", dataset);
  49     layout.evaluate();
  50
  51     // stroke/fill toggle
  52     drawDemo($('test1'),  layout, options);
  53     options["shouldFill"] = false;
  54     drawDemo($('test2'),  layout, options);
  55     options["shouldStroke"] = false;
  56     options["shouldFill"] = true;
  57     drawDemo($('test3'),  layout, options);
  58
  59     // drawing axis
  60     options["shouldFill"] = true;
  61     options["shouldStroke"] = true;
  62     options["drawXAxis"] = false;
  63     options["drawYAxis"] = false;
  64     drawDemo($('test4'),  layout, options);
  65     options["drawXAxis"] = true;
  66     drawDemo($('test5'),  layout, options);
  67     options["drawYAxis"] = true;
  68     options["drawXAxis"] = false;
  69     drawDemo($('test6'),  layout, options);
  70
  71     // changing background color and axis color
  72     options["drawXAxis"] = true;
  73     options["colorScheme"] = PlotKit.Base.colorScheme().reverse()
  74     drawDemo($('test7'),  layout, options);
  75     options["drawBackground"] = true;
  76     options["backgroundColor"] = Color.blueColor().lighterColorWithLevel(0.4);
  77     drawDemo($('test8'),  layout, options);
  78     options["drawBackground"] = false;
  79     options["axisLineColor"] = Color.grayColor();
  80     options["axisLabelColor"] = Color.grayColor();
  81     options["axisLabelFontSize"] = 8;
  82     drawDemo($('test9'),  layout, options);
  83
  84     // layout customisation
  85     options["colorScheme"] = PlotKit.Base.colorScheme();
  86     options["axisLineColor"] = Color.blackColor();
  87     options["axisLabelColor"] = Color.blackColor();
  88     options["axisLabelFontSize"] = 9;
  89     options["yNumberOfTicks"] = 3;
  90
  91     layout.options.yNumberOfTicks = 3;
  92     layout.evaluate();
  93     drawDemo($('test10'), layout, options);
  94
  95     layout.options.xNumberOfTicks = 3;
  96     layout.evaluate();
  97     drawDemo($('test11'), layout, options);
  98
  99     layout.options.barWidthFillFraction = 0.5;
 100     layout.evaluate();
 101     drawDemo($('test12'), layout, options);
 102
 103
 104     // custom labels
 105     layout.options.barWidthFillFraction = 0.75;
 106     layout.options.yTicks = [{v:10}, {v:20}, {v:30}, {v:40}];
 107     layout.evaluate();
 108     drawDemo($('test13'), layout, options);
 109
 110     layout.options.xTicks = [
 111             {v:1, label:"one"},
 112             {v:2, label:"two"},
 113             {v:3, label:"three"},
 114             {v:4, label:"four"},
 115             {v:5, label:"five"},
 116             {v:6, label:"six"}];
 117     layout.evaluate();
 118     drawDemo($('test14'), layout, options);
 119
 120     layout.addDataset("reversed", dataset_rev);
 121     layout.options.yTicks = null;
 122     layout.options.xTicks = null;
 123     layout.options.xNumberOfTicks = 10;
 124     layout.options.yNumberOfTicks = 5;
 125     layout.options.xTicks = null;
 126     layout.options.yTicks = null;
 127     layout.evaluate();
 128     drawDemo($('test15'), layout, options);
 129
 130 }
 131
 132 function demo() {
 133     demoWithStyle("pie");
 134 }
 135
 136 addLoadEvent(demo);