Area

Select a theme:

                     <html>
<head>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-sparkline.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-table.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/themes/dark_turquoise.min.js"></script>
  <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
  <style type="text/css">

    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  
</style>
</head>
<body>
  
  <div id="container"></div>
  

  <script>

    anychart.onDocumentReady(function () {
	// set chart theme
anychart.theme('darkTurquoise');
      // The data used in this sample can be obtained from the CDN
      // https://cdn.anychart.com/samples/sparkline-charts/area-chart/data.json
      anychart.data.loadJsonFile(
        'https://cdn.anychart.com/samples/sparkline-charts/area-chart/data.json',
        function (data) {
          // create line chart
          var lineChart = anychart.line();

          lineChart.title('Web Analytics for April 2015');
          lineChart.xAxis().labels(false).ticks(false).stroke(null);

          lineChart.crosshair().enabled(true).yStroke(null).yLabel(false);

          lineChart
            .legend()
            .enabled(true)
            .title('Visits for months')
            .inverted(true);

          // create line series based on 'sessions' data
          lineChart.line().name('Current Month').data(data.sessions);

          // create line series based on 'lastMonthSessions' data
          lineChart.line().name('Last Month').data(data.lastMonthSessions);

          lineChart.tooltip().title('Visits');

          // create table for sparkline charts layout
          var sparklineTable = anychart.standalones.table();

          // set content for sparklineTable
          sparklineTable.contents([
            [
              'Session Metrics',
              '30 Days',
              '4/10/2015',
              null,
              'Traffic Metrics',
              '30 Days',
              '4/10/2015'
            ],
            [
              'Unique Sessions',
              createSparkLine(data.uniqueSessions),
              sum(data.uniqueSessions),
              null,
              'Direct Traffic',
              createSparkLine(data.directTraffic),
              21
            ],
            [
              'Page Sessions',
              createSparkLine(data.pageSessions),
              sum(data.pageSessions),
              null,
              'Referring Sites',
              createSparkLine(data.referringSites),
              19
            ],
            [
              'Page/Session',
              createSparkLine(data.pageToSession),
              sum(data.pageToSession),
              null,
              'Search Engines',
              createSparkLine(data.searchEngine),
              19
            ],
            [
              'New Sessions',
              createSparkLine(data.newSessions),
              sum(data.newSessions),
              null,
              'Goal Metrics',
              '30 Days',
              '4/10/2015'
            ],
            [
              'Bounce Rate',
              createSparkLine(data.bonusRate),
              '27%',
              null,
              'Goal 1',
              createSparkLine(data.goal1),
              18
            ],
            [
              'Avg. Time on Site',
              createSparkLine(data.avgTime),
              sum(data.avgTime) / 30 + 'ms',
              null,
              'Goal 2',
              createSparkLine(data.goal2),
              17
            ]
          ]);
          sparklineTable
            .hAlign('center')
            .vAlign('middle')
            .fontSize(11)
            .cellBorder(null);

          sparklineTable.getCol(0).hAlign('left');
          sparklineTable.getCol(4).hAlign('left');
          sparklineTable.getCol(2).width(70);
          sparklineTable.getCol(6).width(70);
          sparklineTable.getCol(3).width(30);

          setupCell(sparklineTable.getRow(0));
          setupCell(sparklineTable.getCell(4, 4));
          setupCell(sparklineTable.getCell(4, 5));
          setupCell(sparklineTable.getCell(4, 6));

          sparklineTable
            .getCell(0, 3)
            .border()
            .bottom({ color: '#fff', thickness: 1 });

          // create table with four rows and three columns
          // this table provides layout for the line chart and sparkline charts table
          var layoutTable = anychart.standalones.table(4, 3);

          // disable borders for all table cells
          layoutTable.cellBorder(null);

          // set table parameters
          layoutTable.getCol(1).width('95%');
          layoutTable.getRow(1).height(20);
          layoutTable.getRow(0).minHeight(200);
          layoutTable.getRow(2).maxHeight(250);
          layoutTable.getRow(3).height(20);

          // set content for the tables cells
          layoutTable.getCell(0, 1).content(lineChart);
          layoutTable.getCell(2, 1).content(sparklineTable);

          // set container id for the table
          layoutTable.container('container');
          // draw the table and all elements it contains
          // (you don't need to call the draw method for internal tables and charts)
          layoutTable.draw();
        }
      );
    });

    /**
     * Helper function, setups header cell.
     * @param {Cell.<anychart.standalones.table.cell>} Cell to setup
     */
    function setupCell(cell) {
      cell.vAlign('bottom');
      cell.fontColor('#545f69');
      cell.border().bottom({ color: '#EAEAEA', thickness: 1, dash: '1 1 1' });
    }

    /**
     * Helper function, creates sparkline chart using anychart.sparkline method,
     * sets passed data and visual preference.
     * @param {Array.<number>} array Sparkline data.
     * @return {anychart.charts.Sparkline} New sparkline chart with passed data.
     */
    function createSparkLine(array) {
      // create sparkline chart with passed data
      var sparkLine = anychart.sparkline(array);
      sparkLine.seriesType('area');
      // enable minimum point
      sparkLine.minMarkers().enabled(true);
      return sparkLine;
    }

    /**
     * Calculate sum of values in passed Array.
     * @param {Array.<number>} array List of numbers to calculate.
     * @return {number} Calculation result.
     */
    function sum(array) {
      var summ = 0;
      for (var i = 0, count = array.length; i < count; i++) {
        summ += array[i];
      }
      return summ;
    }
  
</script>
</body>
</html>

Sparklines are small charts with no axes, labels and tooltips – they are intended to display the situation in general, opposite to basic charts which show as much as possible using all appropriate features.

In this Dashboard Web Analytics for one month is shown using basic Line Chart and a table with several Area Sparklines below. The Line Chart has two series, one for the current month and the second for the last month. The series’ points can be hovered with the crosshair. There is no X axis; tooltips hold the days as titles, and both numbers of visits for the same day in the current and the last months are given in the tooltips’ bodies.

The table with sparklines is divided into two parts, it gives more detailed information. The left part shows the Session Metrics for 30 days: Unique Sessions, Page Sessions, Page per Session, New Sessions, Bounce Rate (in %), Av. Time on Site (in ms). The right part of the table contains Traffic Metric for 30 days (Direct Traffic, Traffic from Referring Sites and from Search Engines) and two Goal Metrics. All totals are given for the 10th of March 2015.

The Area Sparklines have no axes, tooltips or labels, as usual for Sparklines. Though, the lowest points are marked.

Warning!

Area

Area