I am using chart.js to render data passed from a Django view. I have various types of charts all working well, EXCEPT when my chart title includes as apostrophe.
For example, the title: My child's learning gets displayed as: My child's learning
The code below shows how I use the title which is the variable chart_row.heading_2 passed from the Django view
options: {
title: {
display: true,
text: '{{ chart_row.heading_2 }}'
}
}
The title works in all other instances where there is no apostrophe.
Is there any workaround to this?
OK, I found the answer was to use escapejs:
text: '{{ chart_row.heading_2|escapejs }}'
From the doc: Django built-in template tags
Try rendering the title as safe.
options: {
title: {
display: true,
text: '{{ chart_row.heading_2|safe }}'
}
}
Related
Line is not rendering correctly. It's rendering as instead of
My code is as follows:
LineGraph.js:
import React from 'react'
import {Line} from 'react-chartjs-2';
function Linegraph() {
return (
<div className="linegraph">
<Line
data={{
datasets:[{
type:"line",
data:[{x:10,y:20},{x:15,y:10},{x:12,y:4}],
backgroundColor:"black",
borderColor:'#5AC53B',
borderWidth:2,
pointBorderColor:'rgba(0,0,0,0)',
pointBackgroundColor:'rgba(0,0,0,0)',
pointHoverBackgroundColor:'#5AC53B',
pointHoverBorderColor:"#000000",
pointHoverBorderWidth:4,
pointHoverRadius:6,
}]
}}
/>
</div>
)
}
export default Linegraph
I'm following a tutorial here and at 1:33:17 they were successfully able to implement it while mine remained as the vertical line going straight down.
Here's also a screenshot of my project set-up:
Your help is greatly appreciated!
You could change the chart type to 'scatter' and add the property drawLine: true to the dataset.
datasets:[{
type: "scatter",
drawLine: true,
data:[{x:10,y:20},{x:15,y:10},{x:12,y:4}],
...
The Chart.js documentation states that scatter charts are based on basic line charts with the x axis changed to a linear axis.
Therefore, assuming you're using react-chartjs-2 together with Chart.js v3, you may also keep type: 'line' but will have to define the x-axis as type: 'linear' as follows:
data={{
type: "line",
...
}}
options={{
scales: {
x: {
type: "linear"
}
}
}}
We ended up getting this to work by going inside package.json and setting the following versions:
'chart.js':'^2.9.4',
'react-chartjs-2':'^2.11.1'
=)
I am new to CropperJs. I am working on a Angular application and I would like to display the CropperJs preview without displaying the actual cropper.
Is this possible? I so how?
Here is my code:
Html:
<div class="preview">
<img
#image
[src]="urlSafe"
/>
</div>
Component:
public cropper: any;
#ViewChild('image', { static: false })
public image: ElementRef;
this.cropper = new Cropper(this.image.nativeElement, { preview: '.preview' });
this.cropper.setAspectRatio(this.selectedRatio.value);
Can anyone please help?
edit: I have put together a stackblitz here: https://stackblitz.com/edit/angular-ivy-xerqiw?file=src%2Fapp%2Fpreview%2Fpreview.component.ts
Can someone please have a look at it?
Initializing CropperJS with this option hides the crop area:
autoCrop: false
Might need to also disable cropper to prevent a user from drawing the crop area manually:
cropper.disable()
I would like to print a block region inside a layout file. However the layout template doesnt have access to the 'page' variable. So I cannot do:
{{ page.regionname }}
Is there any code to print block regions? Oooor how can I get the page variable in one of my layouts? The layout and template file is defined in my yml file as follows:
services_overview:
label: services - Overview
category: ssld Layouts
template: templates/layouts/ssld-hs-overview
regions:
sidebar_left:
label: Sidebar Left
right:
label: Right
left:
label: Left
middle:
label: Middle
(It might be worth mentioning that I'm not too familiar with twig. This is the first time I work with Drupal 8)
You can print the regions in page.html.twig file as {{page.sidebar_left}}. Your your_theme.info.yml file should look something like this
name: Bartik
type: theme
base theme: classy
description: 'A flexible, recolorable theme with many regions and a responsive, mobile-first layout.'
package: Core
version: VERSION
core: 8.x
libraries:
- bartik/global-styling
regions:
sidebar_left: 'Sidebar Left'
right: 'Right'
left: Left
content: Content
middle: 'Middle'
Above is a sample from bartik theme info file. A.F.A.I.K content region is mandatory
I'm currently working on a rendering in Sitecore 7.2 (MVC) that will show a jwPlayer given a link to a video (either in the Media Library or from an external source, like YouTube). When I add the rendering (with a valid data source) through Presentation Details in the Content Editor everything looks fine, and works perfectly. The trouble that I'm running into right now, though, is that when I try to do the same thing from the Page Editor (with the exact same rendering and data source), nothing is showing up in that placeholder at all.
The part of the rendering that deals with the video is as follows:
#if (Model.VideoLink != null && Model.Image != null)
{
var vidid = Guid.NewGuid().ToString();
<div class="article-video-module">
<p class="video-placeholder-text">#Html.Raw(Model.Heading)</p>
<div id="#vidid">Loading the player...</div>
<script type="text/javascript">
jwplayer("#vidid").setup({
file: "#Model.VideoLink.Url",
image: "#Model.Image.Src",
width: "100%",
aspectratio: "16:9",
sharing: {
link: "#Model.VideoLink.Url"
},
primary: 'flash'
});
jwplayer('videodiv-#vidid').onPlay(function () {
$(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').hide();
});
jwplayer('videodiv-#vidid').onPause(function () {
$(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').show();
});
</script>
</div>
#Editable(a => Model.Description)
}
Other things that might help:
When I comment out everything in the <script> tag above the rendering shows up perfectly.
A reference to jwplayer.js is found on the page (that was my first thought)
Console errors in Javascript:
No suitable players found and fallback enabled on jwplayer.js
Uncaught TypeError: undefined is not a function on jwplayer("#vidid").setup({ and on jwplayer('videodiv-#vidid').onPlay(function () { from above.
How can I get jwPlayer and Page Editor to work nicely with each other?
The issue is that when you add a component through Page Editor, the script is fired before the div <div id="#vidid"> element is added to DOM. Don't ask me why...
The solution is really simple: wrap your javascript code with if condition, checking if the div is already there:
<script type="text/javascript">
if (document.getElementById("#vidid")) {
jwplayer("#vidid").setup({
file: "#Model.VideoLink.Url",
image: "#Model.Image.Src",
width: "100%",
aspectratio: "16:9",
sharing: {
link: "#Model.VideoLink.Url"
},
primary: 'flash'
});
jwplayer('videodiv-#vidid').onPlay(function () {
$(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').hide();
});
jwplayer('videodiv-#vidid').onPause(function () {
$(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').show();
});
}
</script>
There is also another issue with your code - Guid can start with number, and this is not a valid id for html elements. You should change your code to:
var vidid = "jwp-" + Guid.NewGuid().ToString();
I wouldn't rule out a conflict with the version of JQuery that the Page Editor uses - this usually messes stuff up. There's a good post here on to overcome the issues.
http://jrodsmitty.github.io/blog/2014/11/12/resolving-jquery-conflicts-in-page-editor/
I've embedded a series of views into my document using the following code:
{{view App.View.PersonProfile.Name itemBinding="person"}}
And I'm using the following code for my main container view, and its two sub-views:
App.View.PersonProfile = Ember.ContainerView.extend(
{
tagName: 'a',
person: null,
childViews: ['Name', 'NameAvatar'],
click: function()
{
App.View.Window.Profile.create({ person: this.get('person') });
},
name: Ember.View.extend(
{
template: Ember.Handlebars.compile('{{ view.parentView.person.formalName }}')
}),
nameAvatar: Ember.View.extend(
{
template: Ember.Handlebars.compile
(
'<img class="avatar" {{bindAttr src="view.parentView.person.avatar"}} />' +
'<div class="name">{{ view.parentView.person.formalName }}</div>'
)
})
});
However, when I run the script, "App.View.PersonProfile.Name" apparently cannot be found. Is this expected behaviour? And if so, what is the solution? Is it better to extend the PersonProfile abstract?
The reason this not working is likely that the property "App.View.PersonProfile.Name" is not present in your app. Your code defines a property with lowercase n for name, that will exist on instances of the PersonView. So, there are multiple layers of issues here.
A better way to approach this would be to have a PersonView extending from Ember.View with a template. If you need subviews (it doesn't look like you would from your example, but maybe you have other needs), you would reference them from the template associated with PersonView.
If you try this approach and have a problem, please post a JS Fiddle that illustrates the problem in executable code. You can start from the one on emberjs.com/community.