I am using your dc js in node js for rendering dc chart via server but i am facing many problems.
First I found all result of the svg in variable, but i want to know how to render chart in web browser.
When i write that SVG tags to file like "index.html" trying to run that file to browser, Chart is displayed but filter is not wroking
How we can use dc.js with node.js in browser?
I have tried many ways to get result, but i am not successed. If you have any tutorial or any guid Please let me know
I have not experimented with using dc.js on the server side with node, but you should be able to write the svg tag into an html document.
For example, if you browse the DOM of a live site like http://dc-js.github.io/dc.js/ in the DOM, using the Elements tab of Chrome's Developer Tools, you'll see something like this:
<div class="row">
<div id="yearly-bubble-chart" class="dc-chart">
<strong>Yearly Performance</strong> (radius: fluctuation/index ratio, color: gain/loss)
<a class="reset" href="javascript:yearlyBubbleChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
<svg width="990" height="250"><g>
...
Note: I don't think you can get the interactive features of dc.js using it this way.
Related
I have a next.js (react) application and I wanted to embed a few graphs that were written as static files (i.e., HTML, CSS, JS). How can I do that?
Example Graph: https://gist.github.com/mbostock/4061961
I found some answers around dangerouslySetInnerHTML but not sure how this applies as I am new to nextjs.
dangerouslySetInnerHTML will set HTML directly. Its mostly used to add libraries such as facebook, hotjar,... to your app. when using dangerouslySetInnerHTML be careful please read this doc and this one.
you can add script to your _document.js file. Something like:
<script dangerouslySetInnerHTML={{
__html: `// your html here`,
}}
/>
Using 2sxc on DNN, I have a website that uses SVGs for icons in content types. The client wants to be able to upload the SVG icons to 2sxc via a Link field but then instead of rendering <img src="#Content.SVG" />, they want it to render the source code of the SVG (so we could manipulate the fill color via CSS). Is this even possible and how could it be done?
Basically 2 steps
Get the real file name using 2sxc and DNN
Then load the file as a string using normal .net stuff System.IO and add it to your html - https://learn.microsoft.com/en-us/dotnet/api/system.io.file.readalltext?view=netframework-4.5.1
ca. like this
<div>
#Html.Raw(System.IO.File.ReadAllText(fileName)
</div>
Some examples of how to do this can be found below
Using the fetch API
How to convert image (svg) to rendered svg in javascript?
Older methods such as XMLHttpRequest or jQuery
Include SVG files with HTML, and still be able to apply styles to them?
Using D3
(Embed and) Refer to an external SVG via D3 and/or javascript
Using a custom JS library
One example: SVGInjector
Interestingly Dnn is doing this nowadays and you can look at the code here. If you ignore the caching, you might be able to do similar in a View.
https://github.com/dnnsoftware/Dnn.Platform/blob/0d3b931d8483b01aaad0291a5fde2cbc0bac60ca/DNN%20Platform/Website/admin/Skins/Logo.ascx.cs#L123
And that is called from above, see ~line 71, so they are doing a real inject of the file contents to inline. Obviously caching file-access stuff should be a priority for caching if the website is high-traffic, but otherwise it is not needed or at least secondary.
I am trying to show MathML equations using MathJax. I have included the script reference for MathML in the head portion. For Razor pages application, MathML is rendered properly. In Blazor (server side app), it shows as plain linear text.
When I refresh the page, it seems like it renders the MathML correctly but quickly reverts to plain text.
I am using .NET Core 3.0. I have also tried it on .NET Core 2.2 but does not work either.
Using the script below does not work...
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/mml-svg.js"></script>
but if I use this instead,
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script>
it works only after page is refreshed manually.
<p>
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mi>x</mi> <mo>=</mo>
<mrow>
<mfrac>
<mrow>
<mo>−</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>−</mo>
<mn>4</mn><mi>a</mi><mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn><mi>a</mi>
</mrow>
</mfrac>
</mrow>
<mtext>.</mtext>
</math>
</p>
Instead of showing the value of x of quadratic equation, it shows "x = − b ± b2 − 4ac 2a ." All math symbols / formatting are omitted.
If I refresh the page, then the MathML formatting is rendered properly. If I navigate to other pages and back to the page with MathML, page has to be refreshed in order to see the correct rendering.
The basic answer is that MathJax used this way is not going to work in Blazor. Anything that modifies the DOM is going to conflict with Blazor.
As soon as a Blazor re-render occurs, Blazor is going to wonder what happened to the tags that used to be there that MathJax removed.
Either:
You need to render this as part of a component where the MathML is not part of the DOM but rather a string parameter to your component.
For every re-render, you need to undo what MathJax has done to the page, let it re-render, then re-do MathJax's stuff.
I've done #1 for both Tex and MathML. For #2, I've only done this with Tex formatting... I haven't been able to get it to work with MathML yet. See how in my repo or just try the Nuget package.
https://github.com/limefrogyank/MathJaxBlazor
Hey there folks :) I am trying to set up a search engine with elasticsearch/node.js, express and vue.js. I would like the search results to be clickable links, but they are only returning non-clickable html. I have tried adding normal html A- tags to the .json file, but on the front end this renders as a non clickable html text and not as a clickable link. Any suggestions would be really appreciated
this is what I have tried, just as a test:
Visit our HTML tutorial
I have had a look on google for possible solutions but all I could find were references to the normal html a-tag and that both j.son and vue.js can take those?
If I correctly get the issue, At FE your link get rendered as sting which is Google . You need to use v-html in this case to tell element to render the passed value as html not as string
//Suppose you have this vue data prop
let url = Google
Now In you html part Just use v-html to render
<div class="foo">
<template v-html="url" />
</div>
I am using Kentico 7 as the CMS to create the website. I am searching for a Rolling Banner web part, to put on the home page as the head banner, which can:
Be responsive.
Have caption area.
have navigation button on left and right.
would be nice to have instruction for me to insert to Kentico 7.
Must works in IE8, Firefox and Chrome.
I have tried to use Camera Slider but it does not work in IE8.
Checkout Slick.
It's a pretty easy to implement slider that has good browser support, with good documentation, and can be responsive if you pass it the right arguments.
I typically place the wrapper for my rotators in the HTML Envelope of a repeater, then use build a transformation for my slides, like this:
<!--Envelope before-->
<div class="slick-wrapper">
<!--Transformation-->
<div class="slide">
<img src="{% GetImageMethod() %}">
</div>
<!--Envelope after---->
</div>
However, keep in mind that IE 8 does not support media queries, so you'll want to use a JS feature detection library like Modernizr