Implementing a D3.js chart in Wagtail
1
Is it possible to add custom D3 charts to the draftail editor and insert an interactive D3 chart in the body wherever we want (just the way we insert an image)? I was trying to find tutorials on this but I might be wording my questions wrong, if you have any suggestions, please let me know.
Thanks in advance.
javascript d3.js wagtail
asked Nov 21 '18 at 11:18
AJH
134
|
show 1 more comment
1
Is it possible to add custom D3 charts to the draftail editor and insert an interactive D3 chart in the body wherever we want (just the way we insert an image)? I was trying to find tutorials on this but I might be wording my questions wrong, if you have any suggestions, please let me know.
Thanks in advance.
javascript d3.js wagtail
asked Nov 21 '18 at 11:18
AJH
134
1
StreamField is a far better approach for mixed-media content than putting everything into a rich text field: docs.wagtail.io/en/v2.3/topics/streamfield.html
– gasman
Nov 21 '18 at 11:22
Thanks, I will go through that and look up the advantages of it!
– AJH
Nov 21 '18 at 11:27
1
I managed to go through the documentation on streamfield, any suggestions how would I add a d3.js script as I could not really find anything on that topic.
– AJH
Nov 22 '18 at 14:43
I passed by RawHTMLBlock a few times, guess that is the solution but has its limitations. :)
– AJH
Nov 23 '18 at 14:58
That's a bit broad to answer here. You need to decide what data you're collecting on the edit form to represent a chart, and define a new block type with the relevant fields. For example, if chart data consists of a list of numbers along with a dropdown to select the chart type, you want aStructBlockconsisting of aListBlockofDecimalBlocksalong with aChoiceBlock. Alternatively, if it's appropriate for users to paste in chart data as a blob of JSON, it can be a single TextBlock. After that, write whatever template code you need to render that data through d3.js.
– gasman
Nov 23 '18 at 15:45
|
show 1 more comment
1
1
1
Is it possible to add custom D3 charts to the draftail editor and insert an interactive D3 chart in the body wherever we want (just the way we insert an image)? I was trying to find tutorials on this but I might be wording my questions wrong, if you have any suggestions, please let me know.
Thanks in advance.
javascript d3.js wagtail
asked Nov 21 '18 at 11:18
AJH
134
Is it possible to add custom D3 charts to the draftail editor and insert an interactive D3 chart in the body wherever we want (just the way we insert an image)? I was trying to find tutorials on this but I might be wording my questions wrong, if you have any suggestions, please let me know.
Thanks in advance.
javascript d3.js wagtail
javascript d3.js wagtail
asked Nov 21 '18 at 11:18
AJH
134
asked Nov 21 '18 at 11:18
AJH
134
asked Nov 21 '18 at 11:18
AJH
134
asked Nov 21 '18 at 11:18
AJH
134
asked Nov 21 '18 at 11:18
AJH
134
134
1
StreamField is a far better approach for mixed-media content than putting everything into a rich text field: docs.wagtail.io/en/v2.3/topics/streamfield.html
– gasman
Nov 21 '18 at 11:22
Thanks, I will go through that and look up the advantages of it!
– AJH
Nov 21 '18 at 11:27
1
I managed to go through the documentation on streamfield, any suggestions how would I add a d3.js script as I could not really find anything on that topic.
– AJH
Nov 22 '18 at 14:43
I passed by RawHTMLBlock a few times, guess that is the solution but has its limitations. :)
– AJH
Nov 23 '18 at 14:58
That's a bit broad to answer here. You need to decide what data you're collecting on the edit form to represent a chart, and define a new block type with the relevant fields. For example, if chart data consists of a list of numbers along with a dropdown to select the chart type, you want aStructBlockconsisting of aListBlockofDecimalBlocksalong with aChoiceBlock. Alternatively, if it's appropriate for users to paste in chart data as a blob of JSON, it can be a single TextBlock. After that, write whatever template code you need to render that data through d3.js.
– gasman
Nov 23 '18 at 15:45
|
show 1 more comment
1
StreamField is a far better approach for mixed-media content than putting everything into a rich text field: docs.wagtail.io/en/v2.3/topics/streamfield.html
– gasman
Nov 21 '18 at 11:22
Thanks, I will go through that and look up the advantages of it!
– AJH
Nov 21 '18 at 11:27
1
I managed to go through the documentation on streamfield, any suggestions how would I add a d3.js script as I could not really find anything on that topic.
– AJH
Nov 22 '18 at 14:43
I passed by RawHTMLBlock a few times, guess that is the solution but has its limitations. :)
– AJH
Nov 23 '18 at 14:58
That's a bit broad to answer here. You need to decide what data you're collecting on the edit form to represent a chart, and define a new block type with the relevant fields. For example, if chart data consists of a list of numbers along with a dropdown to select the chart type, you want aStructBlockconsisting of aListBlockofDecimalBlocksalong with aChoiceBlock. Alternatively, if it's appropriate for users to paste in chart data as a blob of JSON, it can be a single TextBlock. After that, write whatever template code you need to render that data through d3.js.
– gasman
Nov 23 '18 at 15:45
1
1
StreamField is a far better approach for mixed-media content than putting everything into a rich text field: docs.wagtail.io/en/v2.3/topics/streamfield.html
– gasman
Nov 21 '18 at 11:22
StreamField is a far better approach for mixed-media content than putting everything into a rich text field: docs.wagtail.io/en/v2.3/topics/streamfield.html
– gasman
Nov 21 '18 at 11:22
Thanks, I will go through that and look up the advantages of it!
– AJH
Nov 21 '18 at 11:27
Thanks, I will go through that and look up the advantages of it!
– AJH
Nov 21 '18 at 11:27
1
1
I managed to go through the documentation on streamfield, any suggestions how would I add a d3.js script as I could not really find anything on that topic.
– AJH
Nov 22 '18 at 14:43
I managed to go through the documentation on streamfield, any suggestions how would I add a d3.js script as I could not really find anything on that topic.
– AJH
Nov 22 '18 at 14:43
I passed by RawHTMLBlock a few times, guess that is the solution but has its limitations. :)
– AJH
Nov 23 '18 at 14:58
I passed by RawHTMLBlock a few times, guess that is the solution but has its limitations. :)
– AJH
Nov 23 '18 at 14:58
That's a bit broad to answer here. You need to decide what data you're collecting on the edit form to represent a chart, and define a new block type with the relevant fields. For example, if chart data consists of a list of numbers along with a dropdown to select the chart type, you want a
StructBlock consisting of a ListBlock of DecimalBlocks along with a ChoiceBlock. Alternatively, if it's appropriate for users to paste in chart data as a blob of JSON, it can be a single TextBlock. After that, write whatever template code you need to render that data through d3.js.– gasman
Nov 23 '18 at 15:45
That's a bit broad to answer here. You need to decide what data you're collecting on the edit form to represent a chart, and define a new block type with the relevant fields. For example, if chart data consists of a list of numbers along with a dropdown to select the chart type, you want a
StructBlock consisting of a ListBlock of DecimalBlocks along with a ChoiceBlock. Alternatively, if it's appropriate for users to paste in chart data as a blob of JSON, it can be a single TextBlock. After that, write whatever template code you need to render that data through d3.js.– gasman
Nov 23 '18 at 15:45
|
show 1 more comment
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53410987%2fimplementing-a-d3-js-chart-in-wagtail%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53410987%2fimplementing-a-d3-js-chart-in-wagtail%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
StreamField is a far better approach for mixed-media content than putting everything into a rich text field: docs.wagtail.io/en/v2.3/topics/streamfield.html
– gasman
Nov 21 '18 at 11:22
Thanks, I will go through that and look up the advantages of it!
– AJH
Nov 21 '18 at 11:27
1
I managed to go through the documentation on streamfield, any suggestions how would I add a d3.js script as I could not really find anything on that topic.
– AJH
Nov 22 '18 at 14:43
I passed by RawHTMLBlock a few times, guess that is the solution but has its limitations. :)
– AJH
Nov 23 '18 at 14:58
That's a bit broad to answer here. You need to decide what data you're collecting on the edit form to represent a chart, and define a new block type with the relevant fields. For example, if chart data consists of a list of numbers along with a dropdown to select the chart type, you want a
StructBlockconsisting of aListBlockofDecimalBlocksalong with aChoiceBlock. Alternatively, if it's appropriate for users to paste in chart data as a blob of JSON, it can be a single TextBlock. After that, write whatever template code you need to render that data through d3.js.– gasman
Nov 23 '18 at 15:45