0

I have already gone through this link Chart.js - Doughnut show tooltips always?

I have implemented the code in the same way on my machine but the chart is not appearing.

The following is my code:

HTML:

<!doctype html>
<html>
<head>
    <title>Doughnut Chart</title>
    <script src="Chart.js"></script>
</head>
<body>
    <div>
        <canvas id="chart" width="200" height="200"/>
    </div>
</body>

JS:

var data = [
{
    value: 300,
    color:"#F7464A",
    highlight: "#FF5A5E"
},
{
    value: 50,
    color: "#46BFBD",
    highlight: "#5AD3D1"
},
{
    value: 100,
    color: "#FDB45C",
    highlight: "#FFC870"
}
]

    var options = 
{
tooltipTemplate: "<%= value %>",

onAnimationComplete: function()
{
    this.showTooltip(this.segments, true); 
},

tooltipEvents: [],

showTooltips: true  
}

var context = $('#chart').get(0).getContext('2d');
var chart = new Chart(context).Pie(data, options);

Please can anybody help me out with this trouble?

Community
  • 1
  • 1
Zaki Mohammed
  • 969
  • 14
  • 24

3 Answers3

1

You just have to include this line in your html file to include jquery

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
Miguel
  • 126
  • 9
  • you have included that in the header of your page right? i just did that with your copied code and it showed the chart. – Miguel Jul 31 '15 at 10:31
  • Yeah did that only Doughnut Chart – Zaki Mohammed Jul 31 '15 at 10:35
  • you just have to put all the link that i have put in the comment or you can try to download the file with jquery and include like the one you have from charts.js without the ";" at the end. besides that, try to include first the jquery and then chart.js – Miguel Jul 31 '15 at 10:37
  • I just cant believe this! i did as you said but it is still not showing CHART This time i have downloaded the file – Zaki Mohammed Jul 31 '15 at 10:53
  • can you put your html file in a link/page so i can see it? – Miguel Jul 31 '15 at 11:07
  • http://paste.ofcode.org/CjRVShxmjiNcRRMfFJZtBd my index.html page that is the same folder as chart.js – Miguel Jul 31 '15 at 11:11
1

Or you could forget about jquery leave the <head></head as was in the code you posted and substitute

var context = $('#chart').get(0).getContext('2d');

with

var context = document.getElementById("chart").getContext("2d");
Sabba
  • 257
  • 2
  • 6
  • 17
0

In the code above seems to miss the ref to jquery between <head></head> tags

Sabba
  • 257
  • 2
  • 6
  • 17