gistfile1.phtml

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
<script>
YUI().use('charts', function (Y)
    {

        var scoreDataValues = [
            {category:"You",val:4000},
            {category:"Efficient Neighbors",val:4000},
            {category:"All Neighbors",val:7475}
        ];

        var scoreTooltip = {
            markerLabelFunction: function(categoryItem, valueItem, itemIndex, series, seriesIndex)
            {
                return '<div style="border:2px solid #CCCCCC;padding:3px">'+ valueItem.value+" gallons</div>";
            }
        };

        var stylesDef = {
            series:{
                neighbors:{
                    marker: {
                        fill:{
                            color:"#426AB3"
                        }
                    }
                },
                efficient:{
                    marker: {
                        fill:{
                            color:"#77BB22"
                        }
                    }
                },
                you: {
                    marker: {
                        fill:{
                            color:"#E57627"
                        }
                    }
                }
            }
        };

        var score_chart = new Y.Chart({
            dataProvider: scoreDataValues,
            type: "bar",
            render: "#water_score_chart1",
            verticalGridlines: {
                styles: {
                    line: {
                        color: "#C4C4C4"
                    }
                }
            },
            stacked: true,
            tooltip: scoreTooltip,
            axes: {
                values: {
                    keys: ["val"],
                    roundingMethod: 2000,
                    styles:{
                        majorTicks:{
                            display: "none"
                        },
                        majorUnit: {
                            count: 5                        }
                    }


                },
                dateRange:{
                    keys:["category"],
                    position:"left",
                    type:"category",
                    styles:{
                        label: {
                            margin:{right:5},
                            fontWeight:"bold",
                            fontSize:"13px",
                            fontFamily:"arial,helvetica,clean,sans-serif"
                        }
                    }
                }
            },
            seriesCollection: [
                {
                    type: "bar",
                    keys: ["val"],
                    styles: {
                        fill: {
                            color: ["#E57627", "#77BB22", "#426AB3"]
                        },
                        //height: '15px',
                    }
                }
            ]
            //styles: stylesDef
        });
    });
</script>
<script>
YUI().use('charts', function (Y)
    {

        var scoreDataValues = [
            {category:"You",val:4000},
            {category:"Efficient Neighbors",val:4000},
            {category:"All Neighbors",val:7475}
        ];

        var scoreTooltip = {
            markerLabelFunction: function(categoryItem, valueItem, itemIndex, series, seriesIndex)
            {
                return '<div style="border:2px solid #CCCCCC;padding:3px">'+ valueItem.value+" gallons</div>";
            }
        };

        var stylesDef = {
            series:{
                neighbors:{
                    marker: {
                        fill:{
                            color:"#426AB3"
                        }
                    }
                },
                efficient:{
                    marker: {
                        fill:{
                            color:"#77BB22"
                        }
                    }
                },
                you: {
                    marker: {
                        fill:{
                            color:"#E57627"
                        }
                    }
                }
            }
        };

        var score_chart = new Y.Chart({
            dataProvider: scoreDataValues,
            type: "bar",
            render: "#water_score_chart",
            verticalGridlines: {
                styles: {
                    line: {
                        color: "#C4C4C4"
                    }
                }
            },
            stacked: true,
            tooltip: scoreTooltip,
            axes: {
                values: {
                    keys: ["val"],
                    roundingMethod: 2000,
                    styles:{
                        majorTicks:{
                            display: "none"
                        },
                        majorUnit: {
                            count: 5                        }
                    }


                },
                dateRange:{
                    keys:["category"],
                    position:"left",
                    type:"category",
                    styles:{
                        label: {
                            margin:{right:5},
                            fontWeight:"bold",
                            fontSize:"13px",
                            fontFamily:"arial,helvetica,clean,sans-serif"
                        }
                    }
                }
            },
            seriesCollection: [
                {
                    type: "bar",
                    keys: ["val"],
                    styles: {
                        fill: {
                            color: ["#E57627", "#77BB22", "#426AB3"]
                        },
                        height: '15px',
                    }
                }
            ]
            //styles: stylesDef
        });
    });
</script>
<div class="inner_long" style="width:410px; height:100px;" id="water_score_chart">
<div style='clear:both'/>
<div class="inner_long" style="width:410px; height:100px;" id="water_score_chart1">