Topic: Chart.js integration fails
Hi guys,
I want to build charts on my website and I'm experimenting a little with the examples from the MDB's Charts section.
Unfortunately, I have been unable to get this up and running, although I tried to follow the instructions point by point.
INFO:
1. canvas tag in index.html:
<!-- SECTION 1 -->
<section class="section extra-margins" id="line">
<!--Section heading-->
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">LINE CHART</h1>
<!--Section description-->
<p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<div class="container">
<div class="row">
<div class="col-lg-6" class="col_black" style="background-color: darkgrey">
<canvas id="lineChart" width="400" height="400"></canvas>
</div>
<div class="col-lg-6" class="col_grey" style="background-color: lightgrey">
Second column
</div>
</div>
</div>
</section>
<!-- /SECTION 1 -->
I divided the Section for my LineChart into two columns. I placed my canvas script into the left column.
2. script tags in index.html:
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Chart.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<!-- Chart.js JavaScript -->
<script type="text/javascript" src="../../../js/chart.js"></script>
<script>
new WOW().init();
</script>
I inserted the Chart.js-CDN and after that created a chart.js file in the js folder, where I placed my Javascript for the chart.
Question: Do I maybe have to change the order of the script tags?
3. chart.js Javascript
In the JavaScript file chart.js I tried a couple of different variations and started with the MDB sample.
Because it didn't work, I YouTubed other models. Here is the latest one in my file:
$(document).ready(function(){
var ctx = $("lineChart").get(0).getContext("2d");
//pie chart data
//sum values
var data = [
{
value: 30,
color: "cornflowerblue",
highlight: "lightskyblue",
label: "Obese"
},
{
value: 90,
color: "chocolate",
highlight: "papayawhip",
label: "Over-weight"
},
{
value: 240,
color: "darkorange",
highlight: "orange",
label: "Normal weight"
}
];
//draw
var piechart = new Chart(ctx).Pie(data);
});
Is there any MDB user or employee that can help me out with a solution to this problem?
I'm kind of stuck and would appreciate any help.
Happy coding
L.
Add comment
Hello,
I put MDB chart to your code and it works, so try this:
<div class="container-fluid">
<!– SECTION 1 –>
<section class="section extra-margins" id="line">
<!–Section heading–>
<h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">LINE CHART</h1>
<!–Section description–>
<p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<div class="row">
<div class="col-lg-6 col_black" style="background-color: darkgrey">
<canvas id="myChart"></canvas>
</div>
<div class="col-lg-6 col_grey" style="background-color: lightgrey">
Second column
</div>
</div>
</section>
<!– /SECTION 1 –>
</div><script>
$(function () {
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
var option = {
responsive: true,
};
// Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext('2d');
var myLineChart = new Chart(ctx).Line(data, option); //'Line' defines type of the chart.
});
</script>
Hi,
Thx, it works just perfect!
I just started coding 1,5 month ago, so I still have to make a lot of connections by the principle of try and error.
Better so that I now understand that in this case, I don't need any additional chart.js scripts to create a chart.
Thx to you!
Best Leo
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags
Related topics