Hi,

Is it possible to show an example for pie chart using php-mysql?

How to parse the json data to pie data in chart js?

Regards,
Diwahar S

I am a beginner to php. I am not getting how to display it. Can you help me solve this.

Thanks for this awesome tutorial. I am fairly new to jquery and chartjs. I got my first chart working and it's awesome. If I wanted to update this chart every 60 seconds, how would I go about that?

Normally, I'd do something like:
setInterval(function(){
functionName();
}, 60000 );

But since this doesn't have a function name, it just does a document ready function, I am not sure what to do. Also, chartjs has an update function. I'd love to know how to utilize that.

I have a solution to handle images in the radar js

https://github.com/ptjuanramos/chartjs_image_modification

I tried your code but the line graph is not displayed at all..
also the http://localhost/mysqlchartjs/followersdata.php file displays the content in a completely different way.
my chrome version is 50.

I tried in IE and mozilla firefox too still the same issue..
please help

it shows something like this -

Wondering if you would be able to help me with a setinterval function so the data can be dynamically updated with data that gets added to the database? I cannot figure out how to that function into your linegraph.js

Any help is appreciated!!

Hi, I have included chart.js custom tooltip using example in official docs.

Problem:
If someone have mouse on chart then this custom tooltip is displayed. And while the mouse is in chart, if someone uses tabs/enter to navigate to another page, this custom tooltip function is not called. As a consequence, tooltip is not removed from UI in rest of the interactions with app. I have inspected the core library and I think it was only detecting mouseout event which in this case, didn't call this custom tooltip hook.

Below attached is my code for tooltip configuration, and I am using react-chartjs-2 wrapper to consume chart.js
Chart.js version: 2.9.1
react-chartjs-2: 2.8.0

tooltips: {
              enabled: false,
              placement: 'left',
              caretSize: 5,
              cornerRadius: 6,
              custom: function(tooltipModel) {
                let tooltipEl = document.getElementById('custom-tooltip');

                // Create element on first render
                if (!tooltipEl) {
                  tooltipEl = document.createElement('div');
                  tooltipEl.id = 'custom-tooltip';
                  document.body.appendChild(tooltipEl);
                }

                // Hide if no tooltip
                if (tooltipModel.opacity === 0) {
                  tooltipEl.style.opacity = 0;
                  return;
                }

                let position = this._chart.canvas.getBoundingClientRect();
                let clickPointPosition = position.left + window.pageXOffset + tooltipModel.caretX;
                // Display, position, and set styles for font
                tooltipEl.style.opacity = 0.9;
                tooltipEl.style.position = 'absolute';
                tooltipEl.style.left = (clickPointPosition < tooltipEl.offsetWidth ? clickPointPosition : clickPointPosition - tooltipEl.offsetWidth) + 'px';
                tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
                tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
                tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
                tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
                tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
                tooltipEl.style.pointerEvents = 'none';
              }
            },

@yusufshakeel From your chartjs project I followed and it work pretty good. but I need to separate chart by records of json data. if I have 10 records it should be 10 charts per one page. How to do it ? Please share your code if it's possible