var chartWidth = 400;

var chartData = [{"key":"","values":[{"key":"2017-06-17","value":93.7125748502994},{"key":"2017-06-18","value":94.73684210526315},{"key":"2017-06-19","value":0.2},{"key":"2017-06-20","value":93.05912596401028},{"key":"2017-06-21","value":92.87531806615776},{"key":"2017-06-22","value":90.59139784946237},{"key":"2017-06-23","value":95.37275064267352},{"key":"2017-06-24","value":94.05684754521964},{"key":"2017-06-25","value":50},{"key":"2017-06-26","value":88.23529411764706},{"key":"2017-06-27","value":91.28440366972477},{"key":"2017-06-28","value":92.21556886227546},{"key":"2017-06-29","value":0.01941747572816},{"key":"2017-06-30","value":94.0828402366864}]}];

​

addLineChart(chartData);

addHistoricalChart(chartData);

​

function addLineChart(chartData){

  nv.addGraph(function() {

    var chart = nv.models.lineChart()

      .margin({top: 20, right: 35, bottom: 60, left: 60})

      .interpolate("monotone") // Draws smooth paths

      .clipEdge(false)

      .showLegend(false)

      .x(function(d){ return d3.time.format("%Y-%m-%d").parse(d.key)})

            .y(function(d){ return Math.round(d.value) })

    chart.yAxis

            .showMaxMin(true)

            .tickFormat(function(d){return d3.format("d")(d)})

​

        chart.xAxis

            .showMaxMin(true)

            .tickFormat(function(d) { return d3.time.format('%b %d')(new Date(d)) })

​

    d3.select('#line-chart').append('svg')

      .attr('height', chartHeight)

      .attr('width', chartWidth)

      .attr('class', 'line-chart')

      .datum(chartData)

      .call(chart);

​

    nv.utils.windowResize(chart.update);

    return chart;

  });

}

​

function addHistoricalChart(chartData){

  nv.addGraph(function() {

    var chart = nv.models.historicalBarChart()

      .margin({top: 20, right: 35, bottom: 60, left: 60})

      .clipEdge(false)

      .padData(true)

      .x(function(d){ return d3.time.format("%Y-%m-%d").parse(d.key)})

            .y(function(d){ return Math.round(d.value) })

    chart.tooltip.contentGenerator(function(d){

      var key = d.data.key;

      var key = d3.time.format('%b %d')(new Date(key));

      var y = d3.format('f')(d.data.value);

      return '<p>'+ key + ': ' + y + '</p>';

    });

​

    chart.yAxis

            .showMaxMin(true)

            .tickFormat(function(d){return d3.format("d")(d)})

​

        chart.xAxis

            .showMaxMin(true)

            .tickFormat(function(d) { return d3.time.format('%b %d')(new Date(d)) })

​

    d3.select('#historical-chart').append('svg')

      .attr('height', chartHeight)

      .attr('width', chartWidth)

      .datum(chartData)

      .call(chart);

​

    nv.utils.windowResize(chart.update);

    return chart;

  });

}