Stacked Vertical Bar Graph with an Image Background

Mouseover the data points to see the popup display
Here is the HTML source which produced the graph:-
    <div id="bargraph"></div>

    <script type="text/javascript" charset="utf-8">

    window.onload = function () {

        /**
         * set graph data
         */
        var data = ({series1data : new Array('6097','5970','3230','7236','3236','4723','546','6236','3236','5246','4928','1296'),
                     series2data : new Array('500','1200','1800','1235','4231','5738','8236','4230','2432','1236','4237','7234'),
                     series3data : new Array('1200','7000','1560','6230','2230','3720','4230','1652','4378','1462','2654','5321')
                    });

        /**
         * draw the graph
         */
        var graph = new JpGraph(
                'stacked vertical bar',
                'bargraph',
                data,
                {
                  width                 : 800,
                  height                : 500,
                  backgroundColor       : '#f9f5da',
                  backgroundImage       : '../img/AnOceanSunsetByBenjaminMiller.jpg',
                  series1               : "title: Standard Widgets; color:#e94933; scale:left",
                  series2               : "title: Special Widgets; color:#008bd0; scale:left",
                  series3               : "title: Custom Widgets; color:#00a550; scale:left",
                  xLabels               : 'January|February|March|April|May|June|July|August|September|October|November|December',
                  xfontColor            : "#eee",
                  xopacity              : 1.0,
                  xfontSize             : 12,
                  xfontWeight           : "normal",
                  xfontStyle            : "normal",
                  xfontFamily           : "Helvetica, Arial, Verdana, sans-serif",
                  xtextAnchor           : "end",
                  xrotation             : 315,
                  barWidth              : 38,
                  barGap                : 20,
                  displayValues         : false,
                  title                 : "Sales by Month",
                  titleFontSize         : "24px",
                  titleFontWeight       : "normal",
                  titleFontStyle        : "normal",
                  titleFontFamily       : "Helvetica, Arial, Verdana, sans-serif",
                  titleFontColor        : "#fff",
                  xTitle                : "Months",
                  xTitleFontSize        : 16,
                  xTitleFontWeight      : "normal",
                  xTitleFontStyle       : "normal",
                  xTitleFontFamily      : "Helvetica, Arial, Verdana, sans-serif",
                  xTitleFontColor       : "#fff",
                  yTitle                : "Gross Value",
                  yTitleFontSize        : 16,
                  yTitleFontWeight      : "normal",
                  yTitleFontStyle       : "normal",
                  yTitleFontFamily      : "Helvetica, Arial, Verdana, sans-serif",
                  yTitleFontColor       : "#fff",
                  threeD                : true,
                  depth                 : 15,
                  animationTime         : 750,
                  gridBackgroundColor   : "#dbd39a",
                  gridBanding           : true,
                  gridOpacity           : 0.1,
                  gridBackgroundImage   : "",
                  gridLineWidth         : 0.3,
                  gridLineStyle         : ". ",
                  gridAxisWidth         : 2,
                  gridAxisStyle         : "- ",
                  gridNRows             : 6,
                  gridColSpacing        : 40,
                  gridRowSpacing        : 50,
                  gridxPos              : 75,
                  gridyPos              : 400,
                  xLabelPre             : "",
                  xLabelPost            : "",
                  yLabelColor           : "#ffffff",
                  yLabelPre             : "$",
                  yLabelPost            : "",
                  x2LabelPre            : "",
                  x2LabelPost           : "",
                  y2LabelPre            : "",
                  y2LabelPost           : "",
                  ndecplaces            : 0,
                  ndecplaces2           : 3,
                  labelFontSize         : 11,
                  labelFontWeight       : "lighter",
                  labelFontStyle        : "normal",
                  labelFontFamily       : "Helvetica, Arial, Verdana, sans-serif",
                  labelFontColor        : "#f62",
                  xrotation             : 315,
                  legendXpos            : 650,
                  legendYpos            : 20,
                  legendPadding         : 6,
                  legendRoundRadius     : 6,
                  legendOpacity         : 0.7,
              /    legendBackground      : true,
                  legendBackgoundColor  : '#ffffff',
                  legendBorderColor     : '#888',
                  legendBorderWidth     : 1,
                  legendStyle           : 'vertical',
                  legendTitle           : 'Products',
                  legendTitleFontSize   : 14,
                  legendTitleFontWeight : 'normal',
                  legendTitleFontStyle  : 'normal',
                  legendTitleFontFamily : 'Helvetica, Arial, Verdana, sans-serif',
                  legendTitleFontColor  : '#000',
                  legendFontSize        : 12,
                  legendFontWeight      : 'normal',
                  legendFontStyle       : 'normal',
                  legendFontFamily      : 'Helvetica, Arial, Verdana, sans-serif',
                  legendFontColor       : '#444'

                });
    }

    </script>
Active Graphs and Charts

Documentation

Tutorials

Examples

Stacked Vertical Bar Graph with an Image Background
