CODEWITHSUNDEEP
javascripthtmlc3.js
Manjunath Siddappa
Manjunath Siddappa

Reputation: 2157

Line break in C3 generated SVG chart via JavaScript

I need a help on generating line break in html.

Javascript

var x = "jun";
var y = "2015";

var calculate= x + "<br>" + y;

Html returns like below

<div>jan <br> 2015</div>

expected result: i need a line break in html but should not render <br> tag.

Update: what i want is "jan" in first line and next line "2015"

I am using these values in c3 chart x values.

JSFIDDLE

Thanks in Advance.

Upvotes: 7

Views: 1823

Answers (4)

Sanjay
Sanjay

Reputation: 2503

i have tried following code in abc.html and it's working.please try.

    <!DOCTYPE html>
<html>
<body>
<div id="demo"></div>
<script>
var x = "jun";
var y = "2015";
document.getElementById("demo").innerHTML =x+"<br>"+y;
</script>
</body>
</html>

Upvotes: -1

Kaiido
Kaiido

Reputation: 136796

Your question statement was a bit unprecise : You are using C3.js which will produce svg element.

So the markup returned was actually <tspan dx="0" dy=".71em" x="0">0&lt;br&gt;2014</tspan>.

C3 will use the textContent property of the tspan to append the text content returned by your function.
As already said in other questions, you can't add a line break into <tspan> elements.

So the solution is effectively to create a new tspan just under the other one, in the same <text> element.

Unfortunately, there is no way to get these precise elements except by looping through all others tspans, so this may sounds like a real hack but here is a script that will do what you want...

// get our svg doc
var svg  = document.querySelector('svg');
// get our tspans element
var tspans = svg.querySelectorAll('tspan');
// transform it to an array so the clones don't add to the list
var ts = Array.prototype.slice.call(tspans);

for(var i = 0; i<ts.length; i++){
  // get the content
  var cont = ts[i].textContent.split('\n');
  // that wasn't the good one...
  if(cont.length<2) continue;
  // create a clone
  var clone = ts[i].cloneNode(1);
  // set the text to the new line 
  clone.textContent = cont[1];
  // space it a litlle bit more
  clone.setAttribute('dy', '0.9em')
  // set the good text to the upperline
  ts[i].textContent = cont[0];
  // append our clone
  ts[i].parentNode.insertBefore(clone, ts[i].nextSibling)
};


var chart = c3.generate({
    data: {
        json: [{
            date: '2014-01-01',
            upload: 200,
            download: 200,
            total: 400
        }, {
            date: '2014-01-02',
            upload: 100,
            download: 300,
            total: 400
        }, {
            date: '2014-02-01',
            upload: 300,
            download: 200,
            total: 500
        }, {
            date: '2014-02-02',
            upload: 400,
            download: 100,
            total: 500
        }],
        keys: {
            x: 'date',
            value: ['upload', 'download']
        }
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: function (x) {
                    if (x.getDate() === 1) {
                        return x.getMonth() + '\n' + x.getFullYear();
                      
                    }
                }
            }
        }
    }
});
// get our svg doc
var svg  = document.querySelector('svg');
// get our tspans element
var tspans = svg.querySelectorAll('tspan');
// transform it to an array so the clones don't add to the list
var ts = Array.prototype.slice.call(tspans);

for(var i = 0; i<ts.length; i++){
  // get the content
  var cont = ts[i].textContent.split('\n');
  // that wasn't the good one...
  if(cont.length<2) continue;
  // create a clone
  var clone = ts[i].cloneNode(1);
  // set the text to the new line 
  clone.textContent = cont[1];
  // space it a litlle bit more
  clone.setAttribute('dy', '0.9em')
  // set the good text to the upperline
  ts[i].textContent = cont[0];
  // append our clone
  ts[i].parentNode.insertBefore(clone, ts[i].nextSibling)
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet">
<div id="chart"></div>

Upvotes: 5

cluster1
cluster1

Reputation: 5694

Perhaps that's what you need: 

var calculate= '<pre>' + x + '\n' + y + '</pre>';

You have to put the whole thing in pre-tags that the \n is interpreted as a line break.

About: http://www.sitepoint.com/everything-need-know-html-pre-element/

Demo on CodePen: http://codepen.io/mizech/pen/gPOrEz

Upvotes: -1

Paran0a
Paran0a

Reputation: 3457

You need to create new <tspan> for each new line. Reason is that <tspan> is usually found inside <text> element. Which has certain coordinates. You cannot go "against" those coordinates.

The only thing you can do is create another <tspan> with different set of coordinates and position it as you like.

Because SVG Text Elements are rendered using the same rendering methods as the rest of the SVG Graphical Elements, the same coordinate system, transformations, ... etc also apply.

The SVG Text Element renders the first character at the initial current text position.

This position is defined by the 'x' and 'y' attributes of the SVG Text Element.

Within a <text> element, text and font properties and the current text position can be adjusted with absolute or relative coordinate values by including a <tspan> element.

Upvotes: 1

Related Questions