Create script with javascript for area chart with negative and positive values

I need a script for an area chart that will be displayed on a web page. The attached image is an example of what I'm trying to create. The x-axis scale runs from -10 to +10, and the y-axis runs from -10 to +10. Neither axis should be visible. The right side of the chart (x=0 to x=10) should be a right triangle whose hypotenuse has a slope of one. This right triangle will be filled with the following color scheme: for x=0 to x=1, color #FFFFFF, for x>1 to x=5, gradually go from lighter green to darker green with the following array of colors: (#85FF5C, #94FF70,#A3FF85,#B2FF99,#C2FFAD,#D1FFC2,#E0FFD6,#F0FFEB), for x>5 to x=10, the color should be #66FF33. The left side of the chart (x=-10 to x=0) should be a right triangle whose hypotenuse has a slope of negative one. This right triangle will be filled with the following color scheme: for x=-1 to x=0, color #FFFFFF, for x=-5 to x<-1, gradually go from lighter red to darker red with the following array of colors: (#FF5C33,#FF704D,#FF8566,#FF9980,#FFAD99,#FFC2B2,#FFD6CC,#FFEBE6), for x<-5, the color should be #FF3300. In addition, there will be a vertical bar on the chart that will take a decimal value, d, from my php script (e.g., 7). This bar will have (x,y) coordinates equal to (d,d), width of 0.5, and have color #46569C. If d is positive, there will be a label above the bar that reads "d%". If d is negative, there will be a label underneath the bar that reads "-d%".