How can I draw a constant line? #49
Description
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