Line Graph with Dual Scales

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

    <script type="text/javascript" charset="utf-8">
    window.onload = function () {

        /**
         * set graph data
         */
        var data = ({series1data : new Array('6097','5970','5230','7236','6236','5723','7546','6236','7236','5246','4928','6296'),
                     series2data : new Array('45','42','58','57','52','57','62','52','54','52','52','58')
                    });

        /**
         * draw the graph
         */
        var graph = new JpGraph(
                'line',
                'graph',
                data,
                {
                  width                 : 800,
                  height                : 500,
                  backgroundColor       : '#ddd',
                  series1               : "title: Gross Value; color:#ea7532; scale:left",
                  series2               : "title: Number of Units; color:#00a550; scale:right",
                  xLabels               : 'January|February|March|April|May|June|July|August|September|October|November|December',
                  xfontColor            : "#444",
                  xopacity              : 1.0,
                  xfontSize             : 12,
                  xfontWeight           : "normal",
                  xfontStyle            : "normal",
                  xfontFamily           : "Helvetica, Arial, Verdana, sans-serif",
                  xtextAnchor           : "end",
                  xrotation             : 315,
                  displayValues         : false,
                  title                 : "Sales by Month",
                  titleFontSize         : "24px",
                  titleFontWeight       : "normal",
                  titleFontStyle        : "normal",
                  titleFontFamily       : "Helvetica, Arial, Verdana, sans-serif",
                  titleFontColor        : "#444",
                  xTitle                : "Months",
                  xTitleFontSize        : 16,
                  xTitleFontWeight      : "normal",
                  xTitleFontStyle       : "normal",
                  xTitleFontFamily      : "Helvetica, Arial, Verdana, sans-serif",
                  xTitleFontColor       : "#444",
                  yTitle                : "Gross Value",
                  yTitleFontSize        : 16,
                  yTitleFontWeight      : "normal",
                  yTitleFontStyle       : "normal",
                  yTitleFontFamily      : "Helvetica, Arial, Verdana, sans-serif",
                  yTitleFontColor       : "#444",
                  y2Title               : "Items Sold",
                  y2TitleFontSize       : 16,
                  y2TitleFontWeight     : "normal",
                  y2TitleFontStyle      : "normal",
                  y2TitleFontFamily     : "Helvetica, Arial, Verdana, sans-serif",
                  y2TitleFontColor      : "#444",
                  threeD                : true,
                  depth                 : 10,
                  animationTime         : 750,
                  gridBackgroundColor   : "#333",
                  gridBanding           : true,
                  gridOpacity           : 1.0,
                  gridBackgroundImage   : "",
                  gridLineWidth         : 0.3,
                  gridLineStyle         : ". ",
                  gridAxisWidth         : 2,
                  gridAxisStyle         : "- ",
                  gridNRows             : 6,
                  gridColSpacing        : 58,
                  gridRowSpacing        : 50,
                  gridxPos              : 75,
                  gridyPos              : 400,
                  xLabelPre             : "",
                  xLabelPost            : "",
                  yLabelColor           : "#777",
                  yLabelPre             : "$",
                  yLabelPost            : "",
                  x2LabelPre            : "",
                  x2LabelPost           : "",
                  y2LabelPre            : "",
                  y2LabelPost           : " Units",
                  ndecplaces            : 0,
                  ndecplaces2           : 0,
                  labelFontSize         : 11,
                  labelFontWeight       : "lighter",
                  labelFontStyle        : "normal",
                  labelFontFamily       : "Helvetica, Arial, Verdana, sans-serif",
                  labelFontColor        : "#f62",
                  xrotation             : 315,
                  legendXpos            : 320,
                  legendYpos            : 45,
                  legendPadding         : 6,
                  legendRoundRadius     : 6,
                  legendOpacity         : 0.7,
                  legendBackground      : false,
                  legendBackgoundColor  : '#ffffff',
                  legendBorderColor     : '#888',
                  legendBorderWidth     : 0,
                  legendStyle           : 'horizontal',
                  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

Line Graph with Dual Scales
