#main {
  width: 600px;
  height: 400px;
  border: 1px solid red;
}

var container = document.getElementById('main');
var chart = echarts.init(container);

var baseUrl = 'https://oss.x-lab.info/open_digger/github/';
var repoName = 'X-lab2017/open-digger';

$.getJSON(`${baseUrl}${repoName}/code_change_lines_add.json`, addLines => {
  $.getJSON(`${baseUrl}${repoName}/code_change_lines_remove.json`, removeLines => {
    chart.setOption({
      title: { text: `Code change lines of ${repoName}`, left: 'center' },
      xAxis: {
        type: 'category',
        data: Object.keys(addLines),
      },
      yAxis: { type: 'value' },
      series: [{
        type: 'line',
        data: Object.values(addLines),
        symbol: 'none',
        areaStyle: { color: 'green' },
      }, {
        type: 'line',
        data: Object.values(removeLines).map(v => -v),
        symbol: 'none',
        areaStyle: { color: 'red' },
      }],
    });
  });
});