score:5
Accepted answer
you can set the popover options in javascript directly, and you can also listen to events.
the important option here is html: true
which enables placing html within the popover content, otherwise shown as a string.
the content
option documentation states:
default content value if
data-content
attribute isn't present.
then, listening to the shown.bs.popover
event, we get the previously placed <canvas>
with jquery and pass it as the context for a new chart.js instance.
$('[data-toggle="popover"]').popover({
html: true,
content: '<canvas id="mychart" width="400" height="400"></canvas>',
}).on('shown.bs.popover', function() {
new chart($('#mychart'), {
// the type of chart we want to create
type: 'line',
// the data for our dataset
data: {
labels: ["january", "february", "march", "april", "may", "june", "july"],
datasets: [{
label: "my first dataset",
backgroundcolor: 'rgb(255, 99, 132)',
bordercolor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
},
// configuration options go here
options: {}
});
});
<button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="good vs. evil winrate" data-placement="bottom">who's winning?</button>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.6.0/chart.bundle.min.js"></script>
Source: stackoverflow.com
Related Query
- Placing JavaScript content in Bootstrap Popover
- Passing an Array from a Flask view to the javascript code of another view
- 'require is not defined' error when attempting to use chartjs in javascript code
- Fit all content inside a HTML page designed using bootstrap in the viewable area without need to scroll
- How pass a variable from code behind to javascript
- How to run Chart.js samples using source code
- Adapting a JavaScript code to be dynamic
- Bootstrap tab is working but the tab content is not showing
- Javascript highcharts code similar to image
- JavaScript Chart.js - Custom data formatting to display on tooltip
- Dynamically update the options of a chart in chartjs using Javascript
- Bootstrap 3 tabs & Chart.js - charts not loading on tabs
- Bootstrap grid not working with canvas
- How to add datas to chart js from javascript array itself?
- Bootstrap modal showing when clicking individual points in Linechart but not in individual bars in Barchart
- Javascript Chart.js scale fix
- ChartJS won't draw graph inside bootstrap tab until window resize
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- Chart.JS full-width, responsive doughnut chart with Bootstrap
- How to pass model object to javascript function in asp.net Core
- Laravel - Bootstrap Javascript's conflict with Chart.js
- How to convert an array of strings to float in Javascript
- Drawing line chart in chart.js placing dots only when value changes
- Is there a JavaScript Method/ Function to loop Objects via Keys into a array?
- convert javascript to dart
- Loop Dataset ChartJS Javascript
- Chart.js is it possible to fire javascript when clicking on point on the graph?
- JavaScript - Chart.js tooltip shows wrong x-axis value
- How can I show Bootstrap modal when on click in individual bars in chart.js
- Populating javascript chart with Razor model data
More Query from same tag
- Create Chart.js pie chart data from PHP
- Responsive Chart.js Canvas barplot height?
- Create multiple dynamic charts
- Vuejs - Chartjs - turning a doughnut chart to a gauge - rotation
- Display totals for Label (or simply display a string) inside a chart in Chart.js
- ng2-charts tooltip and legend stopped working
- How to place extra text on canvas (not using HTML) beside chart?
- How to render multiple Chart.JS charts on the same page with AJAX data and variables
- npm chart.js is big after minimization
- I would like to rotate yAxes scaleLabel in Angular Chart.js
- Tick - no negative
- Get multiple boxes in background in ChartJs
- How to plot chart from external JSON and format X-AXIS to show time using Chart.JS?
- Strikethough labels when data is hidden
- Charts.js dynamic data call (Angular)
- chart.js reduce file size
- Formatting Chart.js Chart
- How to put rounded corners on a Chart.js Bar chart
- Chart.js wrong x axis date time?
- Charts.js Dynamic Ticks
- How can I reload data from chartjs after JSON file was modified in a HTTP POST
- Chart.js Show labels on Pie chart
- Increase padding between legend and chart with react-chartjs-2
- ChartJS Pie Chart How default just show 2 legend datas
- How to make react-chartjs-2 responsive on mobile?
- Chart js: bar width
- Show value on Mixed chart, Charts.js
- Dynamic Pie Chart With Json Data using chart.js
- Chart.js showing nothing on canvas
- Update Chart JS data dynamically and add new data, remove old data to create timeline "like" chart