Define Div text in JavaScript var String

Question

I need Define Div(chartContainer1) value in a JavaScript "Var" So that it can be defined in JavaScript Chart Unfortunately am unable to do

HTML:code

 <div id="chartContainer" style="height: 300px; width: 100%;">

    <div id="chartContainer1">[
    {y: 10, legendText:"Wii U", label: "Wii U 10%"}, 
    {y: 13, legendText:"3DS", label: "3DS 13%"}, 
    {y: 18, legendText:"PS3", label: "PS3 18%"}, 
    {y: 20, legendText:"Xbox One", label: "Xbox One 20%"}
];</div>

Chart Code: I have tried With

var dsp = document.getElementById("mySpan").innerHTML;  
var dps = document.getElementById("chartContainer1").innerText;

dataPoints is the place Where i need to define text of Div

  var chart = new CanvasJS.Chart("chartContainer",{
    title :{
        text: "Test title"
    },

    data: [{
      type: "stackedBar100",
        dataPoints : dps,
        showInLegend: true, 
        toolTipContent:"{label}"
    }],

  });

  chart.render();

why can't you just define it like normal variable in script? — dfsq, Jun 05 '15 at 14:44
CoZ it vl b changing as thy are fetched from database and i have modified with Html in that div — Shaik, Jun 05 '15 at 14:45
If i define as normal variable it is working but Cant it b possible to do that — Shaik, Jun 05 '15 at 14:46
Would it be better to store your data in localstorage or cookies as json, rather than parsing html? then you can use this stored data as the object to chart? — Wesley Skeen, Jun 05 '15 at 14:47

score 0 · Accepted Answer · edited May 23 '17 at 12:06

0

You could use eval to turn it into an object

var dps = eval(document.getElementById("chartContainer1").innerText);

But be warned about using eval Why is using the JavaScript eval function a bad idea?

edited May 23 '17 at 12:06

Community

1
1

answered Jun 05 '15 at 14:48

George

6,630
2
29
36

`eval` should be **extremely avoided**. By your approach, shouldn't it better be `JSON.parse(document.getElementById("chartContainer1").innerText);` ? – TaoPR Jun 05 '15 at 15:05
@TaoP.R. I agree `eval` should be avoided. The only problem here is that it's not JSON data he/she is trying to get it's a JS object – George Jun 05 '15 at 15:19
Parsed JSON string is a JSON object, isn't it? You can access `dps[0].legendText`, `dps[0].y` after get parsed, so on – TaoPR Jun 05 '15 at 15:29
It's not a JSON string, maybe you misunderstood when I say JS object I mean a [JavaScript Object](http://www.w3schools.com/js/js_objects.asp) which although similar is structured different to a [JSON Object](http://www.w3schools.com/json/), notice how with a JS Object the object's properties are not encased in quotes. – George Jun 05 '15 at 15:31

TaoPR · Answer 2 · 2015-06-07T16:24:08.640

It is not a good practice storing the data inside a DIV that way, because that JSON data will get displayed on the screen before the chart is rendered.

Please read : https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

Instead, if you really want to attach the data along with a particular HTML element, you should store it in a data-something attribute like this:

<div id="chartContainer1" data-content='[
    {"y": 10, "legendText":"Wii U", "label": "Wii U 10%"}, 
    {"y": 13, "legendText":"3DS", "label": "3DS 13%"}, 
    {"y": 18, "legendText":"PS3", "label": "PS3 18%"}, 
    {"y": 20, "legendText":"Xbox One", "label": "Xbox One 20%"}
]'></div>

And fetch the data from the attribute for render by:

var dps = JSON.parse(document.getElementById("chartContainer1").dataset.content);

Or classically,

var dps = JSON.parse(document.getElementById("chartContainer1").getAttribute("data-content"));

Define Div text in JavaScript var String

2 Answers2