Reputation: 11
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:
Upvotes: 0
Views: 196
Reputation: 158
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.
Upvotes: -1