Input

Bars (1)

Number:

Bars (2)

Number: Color:

Bars (3)

Number: Color: Height:

Viz

$('button#show').click(function(){    
    var value = $('input#show').val()    
    console.log(value)
    $('.myviz').html(value)
})

$('button#setheight').click(function(){    
   var value =$('input#setheight').val()
    $('.myviz').css('height',value)
})


$('button#setcolor').click(function(){    
   var value =$('input#setcolor').val()
    $('.myviz').css('background-color',value)
})
// TODO: add an event handler for "Show Bars (1)" to display a specified number of
// vertical bars
$('button#bars2').click(function(){    
   
   var value =$('input#bars2-number').val()
   var color1 =$('input#bars2-color').val()
  var svg=""
    for(i=0;i<value;i++)
    {  
         svg += "<rect height='50' width='10' x = '"+20*i+"' style ='fill :"+color1+"' />"
    }
 
   $('.myviz').html("<svg>"+svg+"</svg>")
})

// TODO: add an event handler for "Show Bars (2)" to display a specified number of
// vertical bars in the specified color
$('button#bars1').click(function(){    
   
   var value =$('input#bars1-number').val()
  var svg=""
    for(i=0;i<value;i++)
    {  
         svg += "<rect height='50' width='10' x = '"+20*i+"' />"
    }
 
   $('.myviz').html("<svg>"+svg+"</svg>")
})
$('button#bars3').click(function(){    
   
   var value =$('input#bars3-number').val()
   var color1 =$('input#bars3-color').val()
   var height =$('input#bars3-height').val()
  var svg=""
    for(i=0;i<value;i++)
    {  
         svg += "<rect height='"+height+"' width='10' x = '"+20*i+"' style ='fill :"+color1+"' />"
    }
 
   $('.myviz').html("<svg>"+svg+"</svg>")
})