score:3
That's not how jQuery html
is intended to be used. You are not supposed to load entire HTML pages including scripts using html
method; it's a big security issue and that's why most likely is not going to work that way.
Instead, you should load all the libraries needed to the main page and fetch using AJAX, ONLY the data needed for the chart. Then use that data to generate/draw/append the chart inside your page.
For example using your code:
$.ajax({
type : 'POST',
url : `//${base_url}/ajax2/dashboard-pie-json-data.php`,
success : function(data) {
var enquiriesquantitysalespeople = data;
// Return just the data needed for the chart using JSON.
// For example, enquiriesquantitysalespeople should contain data such as:
// {
// type: 'doughnut',
// data: {
// datasets: [{...}],
// labels: ['Lee Davies','Lee Davies']
// },
// options: {
// responsive: true,
// ...
// }
// ...
// }
// Then get the 2D context of element you want to render the chart
var enquiriesquantitysalespeople_chart = document
.getElementById('dashboard_graph_quantity_enquiries_salespeople')
.getContext('2d');
// And create the chart using the data you just fetched to the 2D context
window.myDoughnut = new Chart(
enquiriesquantitysalespeople_chart,
enquiriesquantitysalespeople
);
}
});
Sample Data return using PHP
<?php
header('Content-type: application/json');
$data = [
'type' => 'doughnut',
'data' => [
'datasets'=> [[
'data'=> [6, 1],
'backgroundColor' => ["#2585fe", "#71b0ff", "#29bb52", "#497956", "#fcb858", "#f8cd90"],
'borderWidth'=> 0,
]],
'labels'=> ['Lee Davies','Lee Davies']
],
'options'=> [
'responsive'=> true,
'legend'=> [
'position'=> 'right',
'textDirection'=> 'rtl',
'labels'=> [
'boxWidth'=> 14,
'fontSize'=> 14,
'fontColor'=> "#000",
'fontFamily'=> 'proxima-nova',
]
],
'animation'=> [
'animateScale'=> true,
'animateRotate'=> true
]
]
];
echo json_encode($data);
This code snippet will make the AJAX request and dynamically create the canvas element each time the AJAX call finishes after we hit the load button.
Run it to see it in action:
document.getElementById('load').addEventListener('click', function() {
$.ajax({
type: 'POST',
dataType : 'json',
url: 'https://zikro.gr/dbg/so/65660138/data.php',
success : function(data) {
// console.log('Got AJAX data', data);
$('#dashboard_pie_pop_cont')
.empty()
.append(
$('<canvas/>', {
id: 'dashboard_graph_quantity_enquiries_salespeople'
})
);
var enquiriesquantitysalespeople_chart =
document
.getElementById('dashboard_graph_quantity_enquiries_salespeople')
.getContext('2d');
window.myDoughnut = new Chart(
enquiriesquantitysalespeople_chart,
data
);
}
});
});
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
<button id="load">Load AJAX Chart</button>
<div id="dashboard_pie_pop_cont" style="width: 100%; height: 100px"></div>
iFrame solution
Also, an other option is to load the chart page inside an iFrame and not make an AJAX call at all.
Source: stackoverflow.com
Related Query
- Trying to load a chart with chart.js, through ajax and php
- Dynamic line chart with chart.js and PHP
- Send data from php to chart with ajax
- Dynamically create chart with Chart.js and PHP
- Trying to export chart with Chartjs and React but getting erorr
- Draw a Chart.js with ajax data and responsive. A few problems and questions
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Chart.js Mixed Bar and Line chart with different scales
- Problem for display a chart with Chart.js and Angular
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Can we draw a Line Chart with both solid and dotted line in it?
- Increase padding between legend and chart with react-chartjs-2
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- React chart : prevent chart's canvas scaling with height and width
- Why would a ChartJS chart end up with width 0 and height 0?
- Configure Pie Chart Colors Using Chart.js and PHP
- update chart data called through ajax via PHP, MySQL
- Redraw Chart.js Chart with Json_encoded array from ajax request
- Using chart js options with react-chartjs-2 and typescript
- ERROR TypeError: "this.canvas is undefined" | Problem with creating a chart with angular and chart.js
- Issue while plotting bar chart with custom x-axis with month and year in chart.js
- Grouped Bar Chart from mySQL database using ChartJS and PHP
- chart.js not getting linked with online database and php
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- Vue Chart.js Doughnut Chart with rounded and spaced arcs (vue3-chart-v2)
- How to create Bar chart that gets updated from new ajax requests with ChartJS?
- Chart load time and animation slow on mobile device
- Chart only prints out first value using jquery ajax php
- Doughnut Chart not displaying data with Chart Js and Backbone js
- how to display multiple sum with chart js and laravel?
More Query from same tag
- Chart.js line chart set background color
- Chartjs working with large and small values
- Change background transparency of Chart.js chart
- Chartjs stacked bar separate tooltip for all stacked
- Chart.js hiding lable
- Angular 6 ChartJS create canvas dynamically and create graph on it - an example?
- Can you add an action to an element within the tooltip in chart.js?
- Select data based on value of ID
- Make a chart clickable when placed under another SVG <View>
- How to feed hour and minute data into chartJS
- Points cut at half at the edges of top and bottom, at chartjs
- charts.js show dates 1 year
- Correct config location of chartjs-plugin-annotation with ng2-charts?
- Chart.js unable to display data
- How to plot multiple value for one X-axis chart.js
- Trying to display different types of charts using select/option tag
- Custom tooltip on Chart.js is coming undefined
- ChartJS - radar chart options not working
- "Inline" labels in ChartJS
- Chart.js: Get point index from chart.getPointsAtEvent(e)
- React-Chartjs-2 and Chartjs v3:Option Property
- Using a prepared dataset in chart.js
- Extjs with Devexpress ChartJS
- chart js in an especific label
- Highlighting point in all datasets on hover over
- With Chart js, I am trying to color every 7th vertical (x axis) grid line (representing each week beginning visually)
- angular-chart cannot recognize value with thousands separator
- Chart.js (3.7) - Why do the tooltips not appear?
- charts.js tooltips on different data ranges
- Drawing line chart in chart.js with json data