notes

/Home ....
....

sestdiena, 2010. gada 29. maijs

Javascript līknes


Projekts atrodams:
https://github.com/flot/flot.github.com

(Samples)


Kods:

<script language="javascript" type="text/javascript"
 src="http://people.iola.dk/olau/flot/jquery.js">
 </script>
<script language="javascript" type="text/javascript"
 src="http://people.iola.dk/olau/flot/jquery.flot.js">
 </script>

<div id="placeholder"
 style="width:300px;height:200px;"></div>

<script id="source" language="javascript"
 type="text/javascript">
$(function () {
    var d1 = [];
    for (var i = 0; i < 14; i += 0.5)
        d1.push([i, Math.sin(i)]);

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

    // a null signifies separate line segments
    var d3 = [[0, 12], [7, 12], 
             null, [7, 2.5], [12, 2.5]];
    
    $.plot($("#placeholder"), [ d1, d2, d3 ]);
});
</script>

Kods:

<script language="javascript" type="text/javascript"
 src="http://people.iola.dk/olau/flot/jquery.js">
 </script>
<script language="javascript" type="text/javascript"
 src="http://people.iola.dk/olau/flot/jquery.flot.js">
 </script>

<div id="placehold2"
 style="width:300px;height:200px"></div>

<script id="source" language="javascript"
 type="text/javascript">
$(function () {
    var d1 = [];
    for (var i = 0; i < Math.PI * 2; i += 0.25)
        d1.push([i, Math.sin(i)]);
    
    var d2 = [];
    for (var i = 0; i < Math.PI * 2; i += 0.25)
        d2.push([i, Math.cos(i)]);

    var d3 = [];
    for (var i = 0; i < Math.PI * 2; i += 0.1)
        d3.push([i, Math.tan(i)]);
    
    $.plot($("#placehold2"), [
        { label: "sin(x)",  data: d1},
        { label: "cos(x)",  data: d2},
        { label: "tan(x)",  data: d3}
    ], {
        series: {
            lines: { show: true },
            points: { show: true }
        },
        xaxis: {
            ticks: [0, [Math.PI/2, "\u03c0/2"],
                   [Math.PI, "\u03c0"],
                   [Math.PI * 3/2, "3\u03c0/2"],
                   [Math.PI * 2, "2\u03c0"]]
        },
        yaxis: {
            ticks: 10,
            min: -2,
            max: 2
        },
        grid: {
            backgroundColor:
               { colors: ["#fff", "#eee"] }
        }
    });
});
</script>

Nav komentāru:

Ierakstīt komentāru