Add chart to html project

Question

I am a newbie in this field. I want add chart.js code to my project. But I can't do it. Here is my main.html - main area:

<!-- main area -->
<div class="main-content">
    <div class="row mb25">
        <div class="col-xs-12">
            <div class="panel">
                <div class="panel-heading border">
                    Line chart
                </div>
                <div class="panel-body">
                    <div class="line-chart">
                        <svg style='height:500px;width:100%;'></svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /main area -->

and chartjs code on nvd3.js page:

(function ($) {
    'use strict';
  
    // Line chart
  
    d3.json('cumulativeLineData.json', function(data) {
      nv.addGraph(function() {
        var lineChart = nv.models.lineChart()
                      .x(function(d) { return d[0] })
                      .y(function(d) { return d[1]/100 }) //adjusting, 100% is 1.00, not 100 as it is in the data
                      .color(d3.scale.category10().range())
                      .useInteractiveGuideline(true)
                      ;
    
         lineChart.xAxis
            .tickValues([1078030800000,1122782400000,1167541200000,1251691200000])
            .tickFormat(function(d) {
                return d3.time.format('%x')(new Date(d))
              });
    
        lineChart.yAxis
            .tickFormat(d3.format(',.1%'));
    
        d3.select('.line-chart svg')
            .datum(data)
            .call(lineChart);
    
        //TODO: Figure out a good way to do this automatically
        nv.utils.windowResize(lineChart.update);
    
        return lineChart;
      });
    });
  
})(jQuery);

Thanks in advance Here is appearance for now:

But I want to display :

Answer 1

Did you import your script to the HTML document?

<script src="chart.js"></script>

You can add it below the other tags and inside the body tag.