/web/js/components/jqwidgets/mobiledemos/jqxchart/javascript_chart_stacked_area_series.htm

https://github.com/jonphipps/Metadata-Registry · HTML · 108 lines · 105 code · 3 blank · 0 comment · 0 complexity · 76c038954f07a50116520984d1ef325c MD5 · raw file 

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    5. 

  5.     <meta name="msapplication-tap-highlight" content="no" />
    6. 

  6.     <title id='Description'>jQWidgets Chart Stacked Area Series Mobile Example</title>
    7. 

  7.     <link rel="stylesheet" href="../styles/demo.css" type="text/css" />
    8. 

  8.     <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    9. 

  9.     <link rel="stylesheet" href="../../jqwidgets/styles/jqx.windowsphone.css" type="text/css" />
    10. 

  10.     <link rel="stylesheet" href="../../jqwidgets/styles/jqx.blackberry.css" type="text/css" />
    11. 

  11.     <link rel="stylesheet" href="../../jqwidgets/styles/jqx.android.css" type="text/css" />
    12. 

  12.     <link rel="stylesheet" href="../../jqwidgets/styles/jqx.mobile.css" type="text/css" />
    13. 

  13.     <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    14. 

  14.     <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    15. 

  15.     <script type="text/javascript" src="../simulator.js"></script>
    16. 

  16.     <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    17. 

  17.     <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    18. 

  18.     <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    19. 

  19.     <script type="text/javascript">
    20. 

  20.         $(document).ready(function () {
    21. 

  21.             var theme = prepareSimulator("chart");
    22. 

  22.             // prepare the data
    23. 

  23.             var source =
    24. 

  24.             {
    25. 

  25.                 datatype: "tab",
    26. 

  26.                 datafields: [
    27. 

  27.                     { name: 'Date' },
    28. 

  28.                     { name: 'Referral' },
    29. 

  29.                     { name: 'SearchPaid' },
    30. 

  30.                     { name: 'SearchNonPaid' }
    31. 

  31.                 ],
    32. 

  32.                 url: '../../demos/sampledata/website_analytics.txt'
    33. 

  33.             };
    34. 

  34. 

  35.             var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
    36. 

  36. 

  37.             // prepare jqxChart settings
    38. 

  38.             var settings = {
    39. 

  39.                 title: "Web Traffic Analysis",
    40. 

  40.                 description: "Unique site visitors in January 2012",
    41. 

  41.                 enableAnimations: true,
    42. 

  42.                 showLegend: true,
    43. 

  43.                 padding: { left: 10, top: 5, right: 10, bottom: 5 },
    44. 

  44.                 titlePadding: { left: 30, top: 0, right: 0, bottom: 10 },
    45. 

  45.                 source: dataAdapter,
    46. 

  46.                 categoryAxis:
    47. 

  47.                     {
    48. 

  48.                         text: 'Category Axis',
    49. 

  49.                         textRotationAngle: 0,
    50. 

  50.                         dataField: 'Date',
    51. 

  51.                         formatFunction: function (value) {
    52. 

  52.                            return value.getDate();
    53. 

  53.                         },
    54. 

  54.                         toolTipFormatFunction: function (value) {
    55. 

  55.                            var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    56. 

  56.                            return value.getDate() + '-' + months[value.getMonth()];
    57. 

  57.                         },
    58. 

  58.                         type: 'date',
    59. 

  59.                         baseUnit: 'day',
    60. 

  60.                         showTickMarks: true,
    61. 

  61.                         tickMarksInterval: 6,
    62. 

  62.                         tickMarksColor: '#888888',
    63. 

  63.                         unitInterval: 6,
    64. 

  64.                         showGridLines: true,
    65. 

  65.                         gridLinesInterval: 6,
    66. 

  66.                         gridLinesColor: '#888888',
    67. 

  67.                         valuesOnTicks: true
    68. 

  68.                     },
    69. 

  69.                 colorScheme: 'scheme02',
    70. 

  70.                 seriesGroups:
    71. 

  71.                     [
    72. 

  72.                         {
    73. 

  73.                             type: 'stackedarea',
    74. 

  74.                             valueAxis:
    75. 

  75.                             {
    76. 

  76.                                 unitInterval: 1500,
    77. 

  77.                                 minValue: 0,
    78. 

  78.                                 maxValue: 4500,
    79. 

  79.                                 displayValueAxis: true,
    80. 

  80.                                 description: 'Daily visitors',
    81. 

  81.                                 //descriptionClass: 'css-class-name',
    82. 

  82.                                 axisSize: 'auto',
    83. 

  83.                                 tickMarksColor: '#888888'
    84. 

  84.                             },
    85. 

  85.                             series: [
    86. 

  86.                                     { dataField: 'SearchNonPaid', displayText: 'Non-Paid Search Traffic' },
    87. 

  87.                                     { dataField: 'SearchPaid', displayText: 'Paid Search Traffic' },
    88. 

  88.                                     { dataField: 'Referral', displayText: 'Referral Traffic' }
    89. 

  89.                                 ]
    90. 

  90.                         }
    91. 

  91.                     ]
    92. 

  92.             };
    93. 

  93. 

  94.             // setup the chart
    95. 

  95.             $('#chart').jqxChart(settings);
    96. 

  96.             initSimulator("chart");
    97. 

  97.         });
    98. 

  98.     </script>
    99. 

  99. </head>
    100. 

  100. <body class='default'>
    101. 

  101.     <div id="demoContainer" class="device-mobile-tablet">
    102. 

  102.         <div id="container" class="device-mobile-tablet-container">
    103. 

  103.             <div id='chart' style="width: 100%; height: 100%">
    104. 

  104.             </div>
    105. 

  105.         </div>
    106. 

  106.     </div>
    107. 

  107. </body>
    108. 

  108. </html>
    109.