voidlabs / elycharts

Interactive Javascript (SVG|VML) Charting Library
http://elycharts.com
Other
10 stars 6 forks source link

How can I draw a constant line? #49

Open R1100 opened 7 years ago

R1100 commented 7 years ago

Hello all,

I need one serial and two constant lines. How can I draw the two constant lines?

And how can I limit the minimum of 0 to 150? I need the range from Y Axis 150 to 400 and not from 0 to 400.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="jquery.js" type="text/javascript"></script>
<script src="raphael.js" type="text/javascript"></script>
<script src="elycharts.js" type="text/javascript"></script>

<script type="text/javascript">
    $.elycharts.templates['line_basic_2'] = {
                type : "line",
                margins : [20, 20, 70, 70],
                defaultSeries : {
                    plotProps : {
                        "stroke-width" : 4
                    },
                    dot : true,
                    dotProps : {
                        stroke : "white",
                        "stroke-width" : 2
                    }
                },
                series : {
                    serie1 : {
                        color : "red"
                    },
                    serie2 : {
                        color : "blue"
                    },
                    serie3 : {
                        color: "yellow"
                    }
                },
                defaultAxis : {
                    labels : true,
                    labelsProps: {
                        //fill: "#FFF" //,
                    "font-size": "14px"
                    }
                },

        features: {
            grid: {
                draw: [true, false],
                forceBorder: true,
                //ny: 3, // use 10 divisions for y grid
                //nx: 5, // 10 divisions for x grid
                props: {
                    stroke: "#FFF" // color for the grid
                }
            },
            legend: {
                horizontal: false,
                width: 310,
                height: 50,
                x: 70,
                y: 340,
                borderProps: {
                    "fill-opacity": 0.5
                }
            }
        }
            }
</script>

<div id="chart1" style="width: 400px; height: 400px; background-color: white; position: relative; top: 50px; left: 50px;">
    <h3>Huber, Peter</h3>
</div>
<script type="text/javascript">
    $("#chart1").chart({
        template : "line_basic_2",
        tooltips : {
            serie1 : ["365", "367", "198", "344"],
            serie2 : ["287.30", "287.30", "287.30", "287.30"],  //<<<<<<<<<<<<<<<constant line1
            serie3 : ["200", "200", "200", "200"] //<<<<<<<<<<<<<<<constant line2
        },
        values : {
            serie1 : [365, 367, 198, 344],
            serie2 : [287.3, 287.3, 287.3, 287.3], //<<<<<<<<<<<<<<<constant line1 at y=287.3 from left to right
            serie3 : [200, 200, 200, 200] //<<<<<<<<<<<<<<<constant line2 at y=200 from left to right
        },
        labels : [""],
        legend : {serie1 : "series with data",
                  serie2 : "Average of data",
                  serie3 : "Team Average"},
        defaultSeries : {
            fill : true,
            stacked : false,
            highlight : {
                scale : 2
            },
            startAnimation : {
                active : true,
                type : "grow",
                easing : "bounce"
            }
        }
    });

</script>

</body>
</html>

Regards, Kostas