title: how to render d3-timeseries graph with json
body: <p>Render D3-timeseries graph using customized json.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;svg width="960" height="500"&gt;&lt;/svg&gt;
  &lt;script src="https://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://mcaule.github.io/d3-timeseries/src/d3_timeseries.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  var data = [{
    date: new Date('2013-01-01'),
    n: 120,
    n3: 124,
    ci_up: 130,
    ci_down: 118
  }, {
    date: new Date('2013-01-02'),
    n: 121,
    n3: 124,
    ci_up: 130,
    ci_down: 118
  }, {
    date: new Date('2013-01-03'),
    n: 122,
    n3: 124,
    ci_up: 130,
    ci_down: 118
  }, {
    date: new Date('2013-01-04'),
    n: 123,
    n3: 124,
    ci_up: 130,
    ci_down: 118
  }, {
    date: new Date('2013-01-05'),
    n: 124,
    n3: 124,
    ci_up: 130,
    ci_down: 118
  }, {
    date: new Date('2013-01-06'),
    n: 125,
    n3: 124,
    ci_up: 130,
    ci_down: 118
  }, {
    date: new Date('2013-01-07'),
    n: 126,
    n3: 124,
    ci_up: 130,
    ci_down: 118
  }, {
    date: new Date('2013-01-08'),
    n: 127,
    n3: 124,
    ci_up: 130,
    ci_down: 118
  }, {
    date: new Date('2013-01-09'),
    n: 128,
    n3: 124,
    ci_up: 130,
    ci_down: 118
  }, {
    date: new Date('2013-01-10'),
    n: 129,
    n3: 124,
    ci_up: 130,
    ci_down: 118
  }]
  var chart = d3.timeseries()
    .addSerie(data.slice(0, 60), {
      x: 'date',
      y: 'n'
    }, {
      interpolate: 'linear',
      color: "#a6cee3",
      label: "value"
    })
    .addSerie(data.slice(50), {
      x: 'date',
      y: 'n3',
      ci_up: 'ci_up',
      ci_down: 'ci_down'
    }, {
      interpolate: 'monotone',
      dashed: true,
      color: "#a6cee3",
      label: "prediction"
    })
    .width(900)
  chart("body")
  
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>above code is working fine. But I do not want to use above json, in that json labels X:date and Y:n can be easily specified in code. If my json is in below format, how do i specify labels?</p>
  
  <pre><code>var data = [{
      "2017-06-18 20:00:00": {
        "y0": {
          "abc": [
            "19.009346319350104",
            "18.86377513528457",
            "19.14897759084037"
          ],
          "def": [
            "19.006583977261155",
            "18.859021107208214",
            "19.146434493881344"
          ]
        },
        "y1": {
          "abc": [
            "19.606573982955613",
            "19.542083239833666",
            "19.670561738263423"
          ],
          "def": [
            "19.60606089511234",
            "19.543457128306787",
            "19.669551590667393"
          ]
        }
      },
      "2017-06-18 21:00:00": {
        "y0": {
          "abc": [
            "19.012427351469185",
            "18.859120342583186",
            "19.151724224708172"
          ],
          "def": [
            "19.010479324266342",
            "18.862248149777905",
            "19.149184304624885"
          ]
        },
        "y1": {
          "abc": [
            "19.610420374515755",
            "19.55086449476118",
            "19.672216154191055"
          ],
          "def": [
            "19.61016448534518",
            "19.54595086235455",
            "19.672144443443653"
          ]
        }
      },
      "2017-06-18 22:00:00": {
        "y0": {
          "abc": [
            "19.01550838358827",
            "18.871871993054704",
            "19.162290269570583"
          ],
          "def": [
            "19.014374671271526",
            "18.861438145035137",
            "19.1620368795241"
          ]
        },
        "y1": {
          "abc": [
            "19.614266766075897",
            "19.54791169277493",
            "19.68136057710245"
          ],
          "def": [
            "19.61426807557802",
            "19.55267636120965",
            "19.681166682649557"
          ]
        }
      }]
  </code></pre>
  
  <p>here, x should be time, y should y0[abc][0] ,ci_down should be  y0[abc][1],ci_up should be y0[abc][2]. Please suggest if that's possible or not.</p>