DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Patrick has posted 1 posts at DZone. View Full User Profile

Active Graphs and Charts

06.30.2013
| 3125 views |
  • submit to reddit
    <div id="graph"></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(
                'line',
                'graph',
                data,
                {
                  width                 : 800,
                  height                : 500,
                  backgroundColor       : '#f9f5da',
                  series1               : "title: Standard Widgets; color:#ea7532; scale:left",
                  series2               : "title: Special Widgets; color:#00a550; scale:left",
                  series3               : "title: Custom Widgets; color:#367adf; scale:left",
                  target1               : "value: 3750.00; color: #948; text:Break even; linewidth: 3; scale:left; fontSize:12; fontFamily: Helvetica, Arial, sans-serif;fontWeight: normal;",
                  target2               : "value: 7700.00; color: #161; text:Sales target; linewidth: 3; scale:left; fontSize:12; fontFamily: Helvetica, Arial, sans-serif;fontWeight: normal;",
                  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",
                  threeD                : true,
                  depth                 : 10,
                  animationTime         : 750,
                  gridBackgroundColor   : "#dbd39a",
                  gridBanding           : true,
                  gridOpacity           : 1.0,
                  gridBackgroundImage   : "",
                  gridLineWidth         : 0.3,
                  gridLineStyle         : ". ",
                  gridAxisWidth         : 2,
                  gridAxisStyle         : "- ",
                  gridNRows             : 6,
                  gridColSpacing        : 65,
                  gridRowSpacing        : 50,
                  gridxPos              : 75,
                  gridyPos              : 400,
                  xLabelPre             : "",
                  xLabelPost            : "",
                  yLabelColor           : "#777",
                  yLabelPre             : "$",
                  yLabelPost            : "",
                  x2LabelPre            : "",
                  x2LabelPost           : "",
                  y2LabelPre            : "",
                  y2LabelPost           : " units",
                  ndecplaces            : 0,
                  ndecplaces2           : 3,
                  xrotation             : 315,
                  legendXpos            : 250,
                  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>
With the advanced graphing functionality you will be quickly adding impressive and dynamic charting capabilities. The graphing software is completely self contained within a single file making this an ideal solution for the incorporation of graphs and charts into web / intranet pages and applications. Versatile components provide the ability for web authors and developers to easily build and publish dynamic and interactive graphs and charts.
AttachmentSize
AdvGraphChart.zip270.55 KB