Using Javascript Arrays in html

Question

How do I use an element from an array in javascript in html which is declared outside the function? I'm trying to use the elements of the array to create a graph but the graph doesnt show up in the webpage, I do not know why.

<!DOCTYPE HTML>
<html>

<head>  
<title>xyz</title>
  <script type="text/javascript">
var x1=[],y1=[];

function define(){
x1={"1780330","1716120","1832015","1822602","1878293","1989673","2093379","2121345","2224831","2325575","2387188","2647722"};
y1={"42053.0","51667.5","47647.5","51539.5","49135.3","52750.1","48508.1","42877.4","53483.1","49935.8","45813.1","53521.8"};}

 window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
     zoomEnabled: true,
     title:{
      text: e11 "vs" e22      
    },
    animationEnabled: true,
    axisX:{

      title: xaxis,
      valueFormatString:  "#", 
      minimum: 1700000,
      maximum: 2700000
    },
    axisY:{
      title: yaxis,
      valueFormatString:  "#",
 minimum: 40000,
      maximum: 55000 
      
      

    },
    legend: {
      verticalAlign: "bottom",
      horizontalAlign: "left"

    },
    data: [
    {        
     type: "scatter",     
     color: "#778899",
     legendText: "Each circle represents one year",
     showInLegend: "true",
     markerType: "circle", 
     
     toolTipContent: "<span style='\"'color: CornflowerBlue;'\"'><strong></strong></span> {x}<br/> <span style='\"'color: ForestGreen;'\"'><strong></strong></span> {y}",

     dataPoints: [

     { x: x1[0], y: y1[0] },
     { x: x1[1], y: y1[1] },
     { x: x1[2], y: y1[2] },
     { x: x1[3], y: y1[3] },
     { x: x1[4], y: y1[4] },

     { x: x1[5], y: y1[5] },
     { x: x1[6], y: y1[6] },
     { x: x1[7], y: y1[7] },
     { x: x1[8], y: y1[8] },
     { x: x1[9], y: y1[9] },
     { x: x1[10], y: y1[10] },
     { x: x1[11], y: y1[11] },
   
     ]
   }
   ]
 });

chart.render();
}

</script>
<script type="text/javascript" src="C:\Users\Rishika\Downloads\canvasjs-1.7.0\canvasjs.min.js"></script>
</head>
<body>

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

</body>

You can't load resources from local disk. You need a web server and a relative path. — SLaks
– SLaks, Commented Oct 2, 2015 at 15:27
text: e11 "vs" e22 does this work ? Doesn't look like valid JavaScript syntax — pomeh
– pomeh, Commented Oct 2, 2015 at 15:33
is canvasjs.min.js loading in the browser. Any error in the console? — ankitr
– ankitr, Commented Oct 2, 2015 at 16:36

TbWill4321 · Accepted Answer · 2015-10-02 15:28:35Z

2

I think there may be an issue with how you define your x1, y1 arrays. Arrays use [], not the {} that Objects use.

Try x1=[...]

answered Oct 2, 2015 at 15:28

TbWill4321

8,6863 gold badges30 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

OstrichProjects · Accepted Answer · 2015-10-02 16:41:00Z

<!DOCTYPE HTML>
<html>

<head>  
<title>xyz</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>

<script type="text/javascript">
  var x1=[], 
      y1=[],
      e11 = "Something",
      e22 = "something else";

  function define(){
    x1= [1780330, 1716120, 1832015, 1822602, 1878293, 1989673, 2093379, 2121345, 2224831, 2325575, 2387188, 2647722];
    y1=[42053.0, 51667.5, 47647.5, 51539.5, 49135.3, 52750.1, 48508.1, 42877.4, 53483.1, 49935.8, 45813.1, 53521.8];
  }

  window.onload = function () {
    define();
    var chart = new CanvasJS.Chart("chartContainer",
      {
        zoomEnabled: true,
        title:{
          text: e11 + " vs " + e22      
        },
        animationEnabled: true,
        axisX:{
          title: "xaxis",
          valueFormatString:  "#", 
          minimum: 1700000,
          maximum: 2700000
        },
        axisY:{
          title: "yaxis",
          valueFormatString:  "#",
          minimum: 40000,
          maximum: 55000 
        },
        legend: {
          verticalAlign: "bottom",
          horizontalAlign: "left"
        },
        data: [
          {        
            type: "scatter",     
            color: "#778899",
            legendText: "Each circle represents one year",
            showInLegend: "true",
            markerType: "circle", 
            toolTipContent: '<span style="color: CornflowerBlue;"><strong></strong></span> {x}<br/> <span style="color: ForestGreen;"><strong></strong></span> {y}',
            dataPoints: x1.map(function(d, i) { return {x: d, y: y1[i]};})
          }
        ]
      }
   );
   chart.render();
 }

</script>
</head>
<body>

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

</body>

There was a ton of stuff that needed fixing. e11 and e22 weren't defined. You never called define to set x1 and y1. x1 and y1 were filled with strings instead of numbers. Your tooltipcontent option had extra apostrophes. Your axis titles weren't strings. All of these things raise errors and prevent the Chart function from finishing.

Collectives™ on Stack Overflow

Using Javascript Arrays in html

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related