move custom_rhino out of plotkit

[dygraphs.git] / plotkit_v091 / tests / demo.js

/* actual tests */

function drawDemo(element, layout, options) {
    var renderer = new PlotKit.CanvasRenderer(element, layout, options);
    renderer.render();
}

function demoWithStyle(style) {
    // datasets 
    var dataset = [
       [0,1],
       [1,4],
       [2,16],
       [3,8],
       [4,16],
       [5,4],
       [6,1]
    ];

    var dataset_rev = [
       [6,0],
       [5,1],
       [4,4],
       [3,9],
       [2,16],
       [1,25],
       [0,36]
    ];


    var options = {
        "IECanvasHTC": "../plotkit/iecanvas.htc",
        "drawBackground": false,
        "shouldFill": true,
        "shouldStroke": true,
        "drawXAxis": true,
        "drawYAxis": true,
        "padding": {left: 40, right: 10, top: 10, bottom: 20},
        "strokeColor": null,
        "strokeColorTransform": "asStrokeColor"
    };

    if (style == "pie") {
        options["padding"] = {left: 50, right: 50, top: 50, bottom: 50}
    }

    var layout = new PlotKit.Layout(style, options);
    layout.addDataset("noname", dataset);
    layout.evaluate();

    // stroke/fill toggle
    drawDemo($('test1'),  layout, options);
    options["shouldFill"] = false;
    drawDemo($('test2'),  layout, options);
    options["shouldStroke"] = false;
    options["shouldFill"] = true;
    drawDemo($('test3'),  layout, options);
    
    // drawing axis
    options["shouldFill"] = true;
    options["shouldStroke"] = true;
    options["drawXAxis"] = false;
    options["drawYAxis"] = false;
    drawDemo($('test4'),  layout, options);
    options["drawXAxis"] = true;
    drawDemo($('test5'),  layout, options);
    options["drawYAxis"] = true;
    options["drawXAxis"] = false;
    drawDemo($('test6'),  layout, options);    

    // changing background color and axis color
    options["drawXAxis"] = true;
    options["colorScheme"] = PlotKit.Base.colorScheme().reverse()
    drawDemo($('test7'),  layout, options);
    options["drawBackground"] = true;
    options["backgroundColor"] = Color.blueColor().lighterColorWithLevel(0.4);
    drawDemo($('test8'),  layout, options);
    options["drawBackground"] = false;
    options["axisLineColor"] = Color.grayColor();
    options["axisLabelColor"] = Color.grayColor();
    options["axisLabelFontSize"] = 8;
    drawDemo($('test9'),  layout, options);    

    // layout customisation
    options["colorScheme"] = PlotKit.Base.colorScheme();
    options["axisLineColor"] = Color.blackColor();
    options["axisLabelColor"] = Color.blackColor();
    options["axisLabelFontSize"] = 9;
    options["yNumberOfTicks"] = 3;

    layout.options.yNumberOfTicks = 3;
    layout.evaluate();
    drawDemo($('test10'), layout, options);

    layout.options.xNumberOfTicks = 3;
    layout.evaluate();
    drawDemo($('test11'), layout, options);

    layout.options.barWidthFillFraction = 0.5;
    layout.evaluate();
    drawDemo($('test12'), layout, options);
       

    // custom labels
    layout.options.barWidthFillFraction = 0.75;
    layout.options.yTicks = [{v:10}, {v:20}, {v:30}, {v:40}];
    layout.evaluate();
    drawDemo($('test13'), layout, options);

    layout.options.xTicks = [
            {v:1, label:"one"}, 
            {v:2, label:"two"}, 
            {v:3, label:"three"}, 
            {v:4, label:"four"},
            {v:5, label:"five"},
            {v:6, label:"six"}];
    layout.evaluate();
    drawDemo($('test14'), layout, options);

    layout.addDataset("reversed", dataset_rev);
    layout.options.yTicks = null;
    layout.options.xTicks = null;
    layout.options.xNumberOfTicks = 10;
    layout.options.yNumberOfTicks = 5;
    layout.options.xTicks = null;
    layout.options.yTicks = null;
    layout.evaluate();
    drawDemo($('test15'), layout, options);

}

function demo() {
    demoWithStyle("pie");
}

addLoadEvent(demo);