Stacked Vertical Bar Graph with Negative Values

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','3970','-2230','-3236'),
                     series2data : new Array('-1500','-500','1800','4235'),
                     series3data : new Array('1200','7000','-1560','6230')
                    });

        /**
         * draw the graph
         */
        var graph = new JpGraph(
                'stacked vertical bar',
                'bargraph',
                data,
                {
                  width                 : 800,
                  height                : 500,
                  backgroundColor       : '#f9f5da',
                  series1               : "title: Standard; color:#e94933; scale:left",
                  series2               : "title: Special; color:#008bd0; scale:left",
                  series3               : "title: Custom; color:#00a550; scale:left",
                  xLabels               : 'Quarter 1|Quarter 2|Quarter 3|Quarter 4',
                  xfontColor            : "#444",
                  xopacity              : 1.0,
                  xfontSize             : 12,
                  xfontWeight           : "normal",
                  xfontStyle            : "normal",
                  xfontFamily           : "Helvetica, Arial, Verdana, sans-serif",
                  xtextAnchor           : "end",
                  xrotation             : 315,
                  barWidth              : 80,
                  barGap                : 80,
                  displayValues         : false,
                  title                 : "Profit by Quarter",
                  titleFontSize         : "24px",
                  titleFontWeight       : "normal",
                  titleFontStyle        : "normal",
                  titleFontFamily       : "Helvetica, Arial, Verdana, sans-serif",
                  titleFontColor        : "#444",
                  xTitle                : "Quarters",
                  xTitleFontSize        : 16,
                  xTitleFontWeight      : "normal",
                  xTitleFontStyle       : "normal",
                  xTitleFontFamily      : "Helvetica, Arial, Verdana, sans-serif",
                  xTitleFontColor       : "#444",
                  yTitle                : "Net Profit / Loss",
                  yTitleFontSize        : 16,
                  yTitleFontWeight      : "normal",
                  yTitleFontStyle       : "normal",
                  yTitleFontFamily      : "Helvetica, Arial, Verdana, sans-serif",
                  yTitleFontColor       : "#444",
                  threeD                : true,
                  depth                 : 25,
                  animationTime         : 750,
                  gridBackgroundColor   : "#dbd39a",
                  gridBanding           : true,
                  gridOpacity           : 1.0,
                  gridBackgroundImage   : "",
                  gridLineWidth         : 0.3,
                  gridLineStyle         : ". ",
                  gridAxisWidth         : 2,
                  gridAxisStyle         : "- ",
                  gridNRows             : 6,
                  gridColSpacing        : 40,
                  gridRowSpacing        : 50,
                  gridxPos              : 75,
                  gridyPos              : 400,
                  xLabelPre             : "",
                  xLabelPost            : "",
                  yLabelColor           : "#777",
                  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            : 550,
                  legendYpos            : 10,
                  legendPadding         : 6,
                  legendRoundRadius     : 6,
                  legendOpacity         : 0.7,
                  legendBackground      : true,
                  legendBackgoundColor  : '#ffffff',
                  legendBorderColor     : '#888',
                  legendBorderWidth     : 1,
                  legendStyle           : 'horizontal',
                  legendTitle           : 'Products',
                  legendTitleFontSize   : 12,
                  legendTitleFontWeight : 'normal',
                  legendTitleFontStyle  : 'normal',
                  legendTitleFontFamily : 'Helvetica, Arial, Verdana, sans-serif',
                  legendTitleFontColor  : '#000',
                  legendFontSize        : 10,
                  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 Negative Values
