//Deploy data
function showArea2D(element,title,subtitle,foottext,labels,data,myListener){
if(labels.length != 0) {
var chart = new iChart.LineBasic2D({
render : element,
data: [
{
name : 'Product',
value:data,
color:'#1f7e92',
line_width:0
}
],
title : 'Deploy Data',
width : screen.width*25/84,
height : screen.height*34/63,
coordinate:{
height:'90%',
scale:[
{
position:'left',
scale_enable : false,
start_scale:0,
scale_space:1,
end_scale:4,
text_space:5000
},
{
position:'bottom',
label : {color:'#9d987a',font : 'Times New Roman',fontsize:11,fontweight:600},
scale_enable : true,
labels:labels
}
],
background_color:'#f6f9fa'
},
sub_option:{
hollow_inside:false,
point_size:16,
label:false,
//Remove some points from the line
listeners:{
beforedraw:function(target){
return true;
},
initialize:function(target){
for(var i = 0; i < data.length; i++) {
if(data[i] == 2) {
target.intersections[i][0].x=-500;
}
}
console.log(target.intersections);
}
}
}
});
//Custom plugin, show success and failure.
chart.plugin(new iChart.Custom({
drawFn:function(){
//Position
var coo = chart.getCoordinate(),
x = coo.get('originx'),
y = coo.get('originy'),
w = coo.width,
h = coo.height;
//Render the text
chart.target.textAlign('start')
.textBaseline('bottom')
.textFont('600 11px Times New Roman')
.fillText('Success',x-40,y+h/4+5,false,'#3e576f')
.textBaseline('top')
.fillText('Failure',x-40,y+3*h/4-5,false,'#3e576f');
}
}));
//Success line
chart.plugin(new iChart.Custom({
drawFn:function(){
var avg = chart.total/5,
coo = chart.getCoordinate(),
x = coo.get('originx'),
W = coo.width,
S = coo.getScale('left'),
H = coo.height,
h = (avg - S.start) * H / S.distance,
y = chart.y + H/4 ;
chart.target.line(x,y,x+W,y,2,'#009a58')
.textAlign('start')
.textBaseline('middle')
.textFont('600 12px Verdana')
.fillText('',x+W+5,y,false,'#b32c0d');
}
}));
//Failure line
chart.plugin(new iChart.Custom({
drawFn:function(){
var avg = chart.total/5,
coo = chart.getCoordinate(),
x = coo.get('originx'),
W = coo.width,
S = coo.getScale('left'),
H = coo.height,
h = (avg - S.start) * H / S.distance,
y = chart.y + 3*H/4 ;
chart.target.line(x,y,x+W,y,2,'#b32c0d')
.textAlign('start')
.textBaseline('middle')
.textFont('600 12px Verdana')
.fillText('',x+W+5,y,false,'#b32c0d');
}
}));
//No data
chart.plugin(new iChart.Custom({
drawFn:function(){
var avg = chart.total/5,
coo = chart.getCoordinate(),
x = coo.get('originx'),
W = coo.width,
S = coo.getScale('left'),
H = coo.height,
h = (avg - S.start) * H / S.distance,
y = chart.y + H/2;
chart.target.line(x,y,x+W,y,2,'#00a9d9')
.textAlign('start')
.textBaseline('middle')
.textFont('600 12px Verdana')
.fillText('',x+W+5,y,false,'#b32c0d');
}
}));
chart.draw();
}