|
|
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Highcharts Example</title>
-
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
- <style type="text/css">
- ${demo.css}
- </style>
- <script type="text/javascript">
- $(function () {
-
- // Get the CSV and create the chart
- $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) {
-
- $('#container').highcharts({
-
- data: {
- csv: csv
- },
-
- title: {
- text: 'Daily visits at www.highcharts.com'
- },
-
- subtitle: {
- text: 'Source: Google Analytics'
- },
-
- xAxis: {
- tickInterval: 7 * 24 * 3600 * 1000, // one week
- tickWidth: 0,
- gridLineWidth: 1,
- labels: {
- align: 'left',
- x: 3,
- y: -3
- }
- },
-
- yAxis: [{ // left y axis
- title: {
- text: null
- },
- labels: {
- align: 'left',
- x: 3,
- y: 16,
- format: '{value:.,0f}'
- },
- showFirstLabel: false
- }, { // right y axis
- linkedTo: 0,
- gridLineWidth: 0,
- opposite: true,
- title: {
- text: null
- },
- labels: {
- align: 'right',
- x: -3,
- y: 16,
- format: '{value:.,0f}'
- },
- showFirstLabel: false
- }],
-
- legend: {
- align: 'left',
- verticalAlign: 'top',
- y: 20,
- floating: true,
- borderWidth: 0
- },
-
- tooltip: {
- shared: true,
- crosshairs: true
- },
-
- plotOptions: {
- series: {
- cursor: 'pointer',
- point: {
- events: {
- click: function (e) {
- hs.htmlExpand(null, {
- pageOrigin: {
- x: e.pageX || e.clientX,
- y: e.pageY || e.clientY
- },
- headingText: this.series.name,
- maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
- this.y + ' visits',
- width: 200
- });
- }
- }
- },
- marker: {
- lineWidth: 1
- }
- }
- },
-
- series: [{
- name: 'All visits',
- lineWidth: 4,
- marker: {
- radius: 4
- }
- }, {
- name: 'New visitors'
- }]
- });
- });
-
- });
- </script>
- </head>
- <body>
- <script src="../../js/highcharts.js"></script>
- <script src="../../js/modules/data.js"></script>
- <script src="../../js/modules/exporting.js"></script>
-
- <!-- Additional files for the Highslide popup effect -->
- <script src="http://www.highcharts.com/joomla/media/com_demo/js/highslide-full.min.js"></script>
- <script src="http://www.highcharts.com/joomla/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
- <link rel="stylesheet" type="text/css" href="http://www.highcharts.com/joomla/media/com_demo/highslide.css" />
-
- <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
-
- </body>
- </html>
|
