---
title: Basic Line Chart
charts:
  - Line Chart
---

<h5>{{title}}</h5>
<p>
  The line series chart is used to compare a series of data elements grouped
  along the xAxis.
</p>
<p>
  This example also demonstrates one of the various data parsers available to
  developers using d4. In this example, we use the <code>nestedGroup</code> parser
  which makes it trivial for the developer to prepare the incoming data in a way
  that the chart expects it.
</p>
<hr/>
<script type="text/javascript" charset="utf-8" id='source_code'>
'use strict';

$(document).ready(function(){
  var data = [
    { year: '2010', unitsSold:-100, salesman : 'Bob' },
    { year: '2011', unitsSold:200, salesman : 'Bob' },
    { year: '2012', unitsSold:300, salesman : 'Bob' },
    { year: '2013', unitsSold:400, salesman : 'Bob' },
    { year: '2014', unitsSold:500, salesman : 'Bob' },
    { year: '2010', unitsSold:100, salesman : 'Gina' },
    { year: '2011', unitsSold:100, salesman : 'Gina' },
    { year: '2012', unitsSold:-100, salesman : 'Gina' },
    { year: '2013', unitsSold:500, salesman : 'Gina' },
    { year: '2014', unitsSold:600, salesman : 'Gina' },
    { year: '2010', unitsSold:400, salesman : 'Average' },
    { year: '2011', unitsSold:0, salesman : 'Average' },
    { year: '2012', unitsSold:400, salesman : 'Average' },
    { year: '2013', unitsSold:400, salesman : 'Average' },
    { year: '2014', unitsSold:400, salesman : 'Average' }
  ];
  var parsedData = d4.parsers.nestedGroup()
    .x(function(){
      return 'year';
    })
    .nestKey(function(){
      return 'salesman';
    })
    .y(function(){
      return 'unitsSold';
    })
    .value(function(){
      return 'unitsSold';
    })(data);

  var chart = d4.charts.line()
  .width($('#example').width())
  .x(function(x){
    x.key('year');
  })
  .y(function(y){
    y.key('unitsSold');
  });

  d3.select('#example')
  .datum(parsedData.data)
  .call(chart);
});

</script>
<div id="example"></div>
<h6>JavaScript Code</h6>
<pre><code id="code" class="language-javascript"></code></pre>