Line graphs

Line Graphs are an interactive, proven and therefore frequently used form of data visualization. They show complex data in a clear way and allow to shpow and hide single dimensions.

We use Amcharts as the underlying framework, but they can also be drawn with any other framework.
 
 

Clicks
2,423
-73
Impressions
37,831
-3,101
Click-through rate
6%
+1%
Position
8.9
-0.7

 
 
General CSS for line graphs

#chartdiv {
  width: 100%;
  height: 250px;
}

Example Javascript for line graphs

let listLegend = ["clicks", "impressions"];

const firstDate = {date: "11.04.2042", clicks: 13, impressions: 1400};

let balloonFunction = (graphDataItem, graph) => {
  const currentDate = graphDataItem.dataContext;

  return `<div class='content'>
    <h3 class='amcharts-balloon-top'>${currentDate.date}</h3>
    ${listLegend.indexOf('clicks') > -1 ? `<div class='amcharts-balloon-label'><div class='amcharts-balloon-bubble' style='background:#0277BD'></div><span class='amcharts-balloon-key'>Clicks</span><span class='amcharts-balloon-value'>${currentDate.clicks}</span><span id='clicks' class='amcharts-balloon-delta'>${(currentDate.clicks - firstDate.clicks > 0) ? `+${currentDate.clicks - firstDate.clicks}` : currentDate.clicks - firstDate.clicks} since ${firstDate.date}</span></div>` : ''}
    ${listLegend.indexOf('impressions') > -1 ? `<div class='amcharts-balloon-label'><div class='amcharts-balloon-bubble' style='background:#2796C9'></div><span class='amcharts-balloon-key'>Impressions</span><span class='amcharts-balloon-value'>${currentDate.impressions}</span><span class='amcharts-balloon-delta'>${(currentDate.impressions - firstDate.impressions > 0) ? `+${currentDate.impressions - firstDate.impressions}` : currentDate.impressions - firstDate.impressions} since ${firstDate.date}</span></div>` : ''}
  </div>`;
};

const chart = AmCharts.makeChart("chartdiv", {
  "addClassNames": true,
  "type": "serial",
  "categoryField": "date",
  "columnSpacing": 0,
  "autoMargins": true,
  "marginRight": 16,
  "marginBottom": 70,
  "marginLeft": 16,
  "plotAreaBorderAlpha": 0,
  "startDuration": 0,
  "sequencedAnimation": false,
  "color": "#415068",
  "fontFamily": "Nunito, sans-serif",
  "fontSize": 12,

  "categoryAxis": {
    "gridPosition": "middle",
    "startOnAxis": true,
    "axisColor": "#E6EBF0",
    "gridAlpha": 0,
    "gridPosition": "middle",
    "minHorizontalGap": 128,
    "labelOffset": 10,
    "autoGridCount": false,
    "gridCount": 5,
  },

  "chartCursor": {
    "adjustment": -1,
        "animationDuration": 0.15,
        "bulletsEnabled": true,
        "bulletSize": 14,
        "color": "#000",
        "cursorAlpha": 1,
        "cursorColor": "#D4DAE1",
        "categoryBalloonEnabled": false,
        "enabled": true,
        "leaveAfterTouch": false,
        "oneBalloonOnly": true,
        "selectWithoutZooming": false,
        "selectionAlpha": 1,
        "showNextAvailable": true,
        "tabIndex": 0,
        "valueLineAlpha": 0,
        "valueLineBalloonEnabled": false,
        "zoomable": false,
  },

  "trendLines": [],

  "graphs": [
    {
      "id": "clicks",
      "lineColor": "#0277BD",
      "lineThickness": 3,
      "title": "Clicks",
      "valueField": "clicks",
      "valueAxis": "clicks",
      balloonFunction,
    },
    {
      "id": "impressions",
      "lineColor": "#2796C9",
      "lineThickness": 3,
      "title": "Impressions",
      "valueField": "impressions",
      "valueAxis": "impressions",
      balloonFunction,
    }
  ],

  "guides": [],

  "valueAxes": [
    {
      "id": "clicks",
      "minimum": 0,
      "strictMinMax": true,
      "integersOnly": true,
      "axisAlpha": 0,
      "axisColor": "#E6EBF0",
      "fontSize": 12,
      "gridAlpha": 1,
      "gridColor": "#F4F7FA",
      "autoGridCount": false,
      "gridCount": 2,
      "offset": 15,
      "title": "Clicks",
      "titleColor": "#415068",
      "titleBold": false,
      "labelsEnabled": true,
      "position": "left",
    },
    {
      "id": "impressions",
      "minimum": 0,
      "strictMinMax": true,
      "integersOnly": true,
      "axisAlpha": 0,
      "axisColor": "#E6EBF0",
      "fontSize": 12,
      "gridAlpha": 1,
      "gridColor": "#F4F7FA",
      "autoGridCount": false,
      "gridCount": 4,
      "offset": 15,
      "title": "Impressions",
      "titleColor": "#415068",
      "titleBold": false,
      "labelsEnabled": true,
      "position": "right",
    }
  ],

  "allLabels": [],

  "balloon": {
    "animationDuration": 0.15,
    "borderAlpha": 0,
    "borderThickness": 0,
    "cornerRadius": 3,
    "fillAlpha": 1,
    "fillColor": "transparent",
    "horizontalPadding": 0,
    "shadowAlpha": 0,
    "verticalPadding": 0,
  },

  "legend": {
    "enabled": false,
  },

  "titles": [],

  "dataProvider": [
    {
      "date": "12.04.2042",
      "clicks": 8,
      "impressions": 5,
    },
    {
      "date": "13.04.2042",
      "clicks": 32,
      "impressions": 71,
    },
    {
      "date": "14.04.2042",
      "clicks": 2,
      "impressions": 13,
    },
    {
      "date": "15.04.2042",
      "clicks": 12,
      "impressions": 13,
    },
    {
      "date": "16.04.2042",
      "clicks": 72,
      "impressions": 19,
    },
    {
      "date": "17.04.2042",
      "clicks": 31,
      "impressions": 29,
    },
    {
      "date": "18.04.2042",
      "clicks": 69,
      "impressions": 81,
    },
    {
      "date": "19.04.2042",
      "clicks": 56,
      "impressions": 81,
    },
    {
      "date": "20.04.2042",
      "clicks": 42,
      "impressions": 82,
    },
    {
      "date": "21.04.2042",
      "clicks": 38,
      "impressions": 77,
    }
  ]
});

Line graph components

Legend

The legend represents the dimensions displayed in the chart. Any number of dimensions can be shown and they can contain a delta. You can show and hide them individually.

Clicks
2,423
-73
Impressions
37,831
-3,101
Click-through rate
6%
+1%
Position
8.9
-0.7

 
 
CSS for the line graph legend

.graph-legend {
  display: flex;
}
 
.graph-legend-item {
  flex: 1;
  max-width: 25%;
  border: 1px solid #eef4f8;
  border-top-width: 4px;
  user-select: none;
  cursor: pointer;
  transition: all .25s ease;
}
 
.graph-legend-item:not(:last-of-type) {
  border-right: 0;
}
 
.graph-legend-item .graph-legend-item-container {
  padding: 4px 16px 12px;
  pointer-events: none;
}
 
.graph-legend-item.active {
  background: #fafcfd;
}
 
.graph-legend-item-clicks.active {
  border-top-color: #0277BD;
}
 
.graph-legend-item-impressions.active {
  border-top-color: #2796C9;
}
 
.graph-legend-item-ctr.active {
  border-top-color: #53BBD8;
}
 
.graph-legend-item-position.active {
  border-top-color: #B3F0F7;
}
 
.graph-legend-item .graph-legend-title {
  font-size: 14px;
  line-height: 1.4;
}
 
.graph-legend-item .graph-legend-value {
  color: #33445c;
  font-size: 26px;
  line-height: 1.4;
}

Balloon

The balloon displays important additional information at a specific time when you hover on it.

21.04.2042

Clicks38+25 since 11.04.2042

Impressions77-1323 since 11.04.2042

Click-through rate9%+6.4% since 11.04.2042

Position66-64.4 since 11.04.2042

 
 
CSS for the line graph balloon

.amcharts-balloon-div {
  width: 220px;
  padding: 8px 16px;
  text-align: left;
  color: #fff;
  border-radius: 3px;
  background: #212b36;
}
 
.amcharts-balloon-div > div {
  max-width: unset !important;
  text-align: left !important;
  color: inherit !important;
  font-size: 12px;
}
 
.amcharts-balloon-label {
  overflow: hidden;
}
 
.amcharts-balloon-label .amcharts-balloon-key {
  float: left;
  max-width: 200px;
  margin: 0 16px 0 0;
}
 
.amcharts-balloon-label .amcharts-balloon-value {
  float: right;
  text-align: right;
  font-weight: 700;
}
 
.amcharts-balloon-label .amcharts-balloon-delta {
  width: 100%;
  float: left;
  margin: 0 0 0 18px;
  color: rgba(255, 255, 255, .5);
}
 
.amcharts-balloon-top {
  margin: 0 0 4px;
  color: #fff;
  font: 700 12px/26px "Lato", sans-serif;
}
 
.amcharts-balloon-bubble {
  width: 10px;
  height: 10px;
  float: left;
  margin: 5px 8px 0 0;
  border-radius: 50%;
  background: #f5f5fd;
}