I want to figure out how to grab the title in a plugin in ChartJS I have the title in the configuration like so:
title: {
display: true,
fontSize: 10,
text: "This is my title",
padding: titlePadding,
}
I was just curious if I want to do some afterDraw work, how do I grab it and alter it? I want to do some manipulation later in the event sequence.
You can get the title text by calling chart.titleBlock.options.text, although even if you update it and call chart.update() it will render the updated title in the first draw tick but the other draw ticks it will use the normal defined title again, see fiddle: https://jsfiddle.net/Leelenaleee/kc8qua61/12/
You are better off using a scriptable option for the title as shown in de documentation sample of chart.js here: https://www.chartjs.org/docs/master/samples/line/stepped.html.
It takes a part of the config to show in the title as a dynamic part and internally chart.js handles it, you can also use external variables here.
Related
My blog is https://testfnm.blogspot.com based on the Blogger Emporio template.
On the homepage, under the titles of the snippets, I would like to add a second line of text with the country name.
So for instance, under the title "Milford Sound" I would like to add the country name "New Zealand". Similarly, under Amsterdam, I would like to add Netherlands. And so on...
How do I do that please?
As an alternative to adding a second line of text to the snippets, I have found a method to make the Labels permanently visible on the snippets of the homepage. I have put only one label per post, the label being the country name. Thus against each snippet a label (the country name) is now visible both on desktop and mobile.
I used this CSS code to make the labels visible:
.labels-outer-container {opacity: 1 !important;}
body.feed-view .post-labels {display: inline-block;}
You can see how the results look here: https://www.firozemistry.com
I have a modelform in which i've added a taggitselect2 widget as part of django-autocomplete-light.
This looks up tags from taggablemanager to allow an autocompletion. The autocomplete is working fine - but the alignment of the text inside the select box is off. The text aligns with the bottom of the select box, leaving a big gap between the top of the tag and the top of the select box. Easier with a picture:
https://imgur.com/a/WxFMLfF
forms.py
widgets = {
'tags': autocomplete.TaggitSelect2(
url='recordings:recording-autocomplete',
attrs={
'data-placeholder': 'Start typing to autocomplete...',
}
....inside def __init__
self.helper.layout = Layout(
Row(Column(Field('tags')),css_class='form-row'),
I've tried looking at styling options - this is a bootstrap project so ideally i would like the same styling you get with data_role="tagsinput" but if i assign that to the widget i guess it overrides the custom part and i get some broken output.
Couldn't work out why the default rendering is so poorly formatted so as a workaround I've just overridden the css.
On inspection, the selection elements have a 5px margin, enough to align them with the bottom. Hence applying the following in css:
.select2-selection__choice{
margin-top: 0px !important;
}
'fixes' the problem. Without '!important' it gets overridden to 5px, so this is required.
I need a help. I followed this tutorial https://www.dyclassroom.com/chartjs/chartjs-how-to-draw-line-graph-using-data-from-mysql-table-and-php.
I managed to start chartjs-plugin-zoom.
Now i want to add button "Reset zoom"
I fallowed this tutorial:
Add zoom event handler to charts for chartjs with chartjs-plugin-zoom
But when i add right after $.ajax({}); in app.js
$('#reset_zoom').click(function() {
mycanvas.resetZoom();
})
and press the button error is displayed:
app.js:131 Uncaught TypeError: mycanvas.resetZoom is not a function
at HTMLButtonElement.<anonymous> (app.js:131)
at HTMLButtonElement.dispatch (datatables.min.js:15)
at HTMLButtonElement.r.handle (datatables.min.js:15)
Can you give me an advice?
Kind of surprised this hasn't been answered yet. I remember running into this myself a while back. You are doing the same thing I was doing..
Effectively what you're doing is trying to run the .resetZoom() function on an HTML canvas element. You need to do this on the chart object, not the canvas element.
YouTube video walking you through it: https://www.youtube.com/watch?v=tWlENvyr9cY
Working CodePen: https://codepen.io/vpolston/pen/MWGVmrX
A couple examples of what not to do..
document.getElementById('myChart').resetZoom() // vanilla JavaScript
or even
$("#myChart").resetZoom() // jQuery
What you actually need to do is tack the .resetZoom() onto the Chart object from when you instantiated the chart. So in your code here:
const myChart = new Chart('myChart', {}
Whatever you set the variable to when you created the chart is what needs to have the .resetZoom(). So this would work:
myChart.resetZoom();
Now to make that a clickable button we can create a function. That function accepts whatever the chart Object was named.
JS
resetZoomBtn = (chart) => {
chart.resetZoom()
};
and then in our HTML we call that function and pass whatever you called the chart when you instantiated it as the parameter.
<div class="chart-container">
<canvas id="myChart"></canvas>
<button onclick="resetZoomBtn(myChart)">reset zoom</button>
</div>
Hopefully that helps anyone who views this question since it comes up at the top of the search results on Google. I know chances of it being marked 'answer' four years later are slim.
Thanks,
VP
I have made a collapsible section for the portfolio (extensive) gallery on my one page website. The gallery has Isotope filters applied to it. On default only the header is shown, but when clicking on the header, the filter names and gallery should be unhidden (content hidden via CSS using display:none) as per JQuery code below:
$(document).ready(function () {
$('h5').click(function () {
$(this).toggleClass("open");
$(this).next().toggle();
}); //end toggle
}); //end ready
When I click the header, it expands the filter names, but gallery content isn't displayed. This only happens after clicking one of the filters. When toggling the collapsible section, the gallery remains shown as intended.
So the only problem is the initial unhiding of the gallery. I think by clicking the header, the "Show all" filter or other relevant div has to be reloaded/refreshed in order for the gallery to appear. I've tried multiple commands, but can't seem to find the correct one.
Thank you for the help and let me know if you need any more information.
Apologies for the delay, but please find setup via link below:
http://www.davidmaes.eu/#work
Thanks for the help.
I took a look at the site and isotope doesn't have time to calculate the image sizes, so it's giving the UL container a height of 0: <ul class="portfolio-wrap isotope" style="position: relative; overflow: hidden; height: 0px;"> which is why the images aren't showing up.
When the user clicks a filter, isotope recalculates the images sizes and applies it to the UL, and voila, the images reappear.
You can manage this by using the imagesloaded script, which will only call isotope once the images have finished loading.
Here's the isotope documentation on integrating isotope with imagesloaded.
I am looking to create a progress bar in Liferay, hopefully inside the Dynamic List Display plugin but not necessarily. The data for the progress bar will be coming from the List though.
Any suggestions?
You can do it easily with AlloyUI in Liferay 6.2. You need a placeholder for the progressbar - something like this:
<div id="myProgressBar" style="width:100%;height:20px;"></div>
And then you can create it with javascript like this:
<aui:script use="aui-base,aui-progressbar">
var progressBar = new A.ProgressBar({
boundingBox: '#myProgressBar',
label: '<%=percentage%>%',
orientation: 'horizontal',
value: '<%=percentage%>',
}).render();
</aui:script>
You can read more about the progress bar config options here:
http://alloyui.com/api/classes/A.ProgressBar.html
And some samples here:
http://alloyui.com/versions/2.0.x/tutorials/progress-bar/