title: Check if element exists before trying to call getContext
body: <p>This JS contains 3 line charts (Line Chart, Line Chart with Dots, Line Chart Unfilled). How do I check if a chart exists before trying to call getContext for one of the charts?</p>
  
  <p>I found this the below snippet to use to check if the element exists but I'm new and unsure how to replace the function name in the script properly.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  if ( typeof function_name == 'function' ) { 
          //function_name is a function
  }
  else
  {
   //do not exist
  }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//------------- Line chart -------------//
   var lineData = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
     {
      label: "PayPal",
      fillColor : "rgba(186,195,210,0.2)",
      strokeColor : "rgba(186,195,210,1)",
      pointColor : "rgba(186,195,210,1)",
      pointStrokeColor : "#fff",
      pointHighlightFill : "#fff",
      pointHighlightStroke : "rgba(186,195,210,1)",
      data : [3+randNum(),5+randNum(),8+randNum(),13+randNum(),17+randNum(),21+randNum(),23+randNum()]
     },
     {
      label: "Credit card",
      fillColor : "rgba(96,177,204,0.2)",
      strokeColor : "rgba(96,177,204,1)",
      pointColor : "rgba(96,177,204,1)",
      pointStrokeColor : "#fff",
      pointHighlightFill : "#fff",
      pointHighlightStroke : "rgba(96,177,204,1)",
      data : [randNum()-5,randNum()-2,randNum()-4,randNum()-1,randNum()-3,randNum()-2,randNum()-5]
     }
    ]
  
   }
   var ctx = document.getElementById("line-chartjs").getContext("2d");
   var myLineChart = new Chart(ctx).Line(lineData, {
    responsive: true,
    scaleShowGridLines : true,
       scaleGridLineColor : "#bfbfbf",
       scaleGridLineWidth : 0.2,
       bezierCurve : false,
       //points
       pointDot : false,
       datasetStroke : true,
       datasetStrokeWidth : 2,
       datasetFill : true,
       //animations
       animation: true,
       animationSteps: 60,
       animationEasing: "easeOutQuart",
       //scale
       showScale: true,
       scaleFontFamily: "'Roboto'",
       scaleFontSize: 13,
       scaleFontStyle: "normal",
       scaleFontColor: "#333",
       //tooltips
       showTooltips: true,
       tooltipFillColor: "#344154",
       tooltipFontFamily: "'Roboto'",
       tooltipFontSize: 13,
       tooltipFontColor: "#fff",
       tooltipYPadding: 8,
       tooltipXPadding: 10,
       tooltipCornerRadius: 2,
       tooltipTitleFontFamily: "'Roboto'",
   });
  
   //------------- Line chart with dots -------------//
   var lineDotsData = {
    labels : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
    datasets : [
     {
      label: "Suites",
      fillColor : "RGBA(198, 215, 233, .8)",
      strokeColor : "RGBA(198, 215, 233, 1)",
      pointColor : "RGBA(198, 215, 233, 1)",
      pointStrokeColor : "#fff",
      pointHighlightFill : "#fff",
      pointHighlightStroke : "RGBA(198, 215, 233, 1)",
      data : [50220,48719,55398,64298,127198,125102,173261,153901,74698,51598,44320,48720]
     },
              {
      label: "Multi Family",
      fillColor : "RGBA(105, 162, 219, .8)",
      strokeColor : "RGBA(105, 162, 219, 1)",
      pointColor : "RGBA(105, 162, 219, 1)",
      pointStrokeColor : "#fff",
      pointHighlightFill : "#fff",
      pointHighlightStroke : "RGBA(105, 162, 219, 1)",
      data : [49796,48296,54827,63627,126127,124131,171690,151530,74127,51127,43896,48296]
     },
              {
      label: "Bulk",
      fillColor : "RGBA(251, 203, 164, .8)",
      strokeColor : "RGBA(251, 203, 164, 1)",
      pointColor : "RGBA(251, 203, 164, 1)",
      pointStrokeColor : "#fff",
      pointHighlightFill : "#fff",
      pointHighlightStroke : "RGBA(251, 203, 164, 1)",
      data : [47127,45627,51627,59627,121127,119631,162190,139627,70627,47627,41227,45627]
     },
              {
      label: "Commercial",
      fillColor : "RGBA(233, 128, 35, .8)",
      strokeColor : "RGBA(233, 128, 35, 1)",
      pointColor : "RGBA(233, 128, 35, 1)",
      pointStrokeColor : "#fff",
      pointHighlightFill : "#fff",
      pointHighlightStroke : "RGBA(233, 128, 35, 1)",
      data : [43501,42001,48001,56001,117501,116005,158564,136001,67001,44001,37601,42001]
     },
              {
      label: "Single Family",
      fillColor : "RGBA(72, 117, 161, .8)",
      strokeColor : "RGBA(72, 117, 161, 1)",
      pointColor : "RGBA(72, 117, 161, 1)",
      pointStrokeColor : "#fff",
      pointHighlightFill : "#fff",
      pointHighlightStroke : "RGBA(72, 117, 161, 1))",
      data : [38001,36501,42501,48501,105501,101501,142064,121501,59501,38501,32101,36501]
     },
              {
      label: "Non-Revenue Water",
      fillColor : "RGBA(181, 181, 181, .8)",
      strokeColor : "RGBA(181, 181, 181, 1",
      pointColor : "RGBA(181, 181, 181, 1)",
      pointStrokeColor : "#fff",
      pointHighlightFill : "#fff",
      pointHighlightStroke : "RGBA(181, 181, 181, 1)",
      data : [24501,24501,24501,24501,24501,24501,24501,24501,24501,24501,24501,24501]
     },
              {
      label: "System Total",
      fillColor : "RGBA(68, 76, 88, 0)",
      strokeColor : "RGBA(68, 76, 88, 1)",
      pointColor : "RGBA(68, 76, 88, 1)",
      pointStrokeColor : "#fff",
      pointHighlightFill : "#fff",
      pointHighlightStroke : "RGBA(68, 76, 88, 1)",    
      data : [49123,45595,51550,62804,133871,126178,178002,161593,80090,53421,34521,40582]
     }
    ]
  
   }
   var ctxDots = document.getElementById("line-dots-chartjs").getContext("2d");
   var myLineDotsChart = new Chart(ctxDots).Line(lineDotsData, {
    responsive: true,
    scaleShowGridLines : true,
       scaleGridLineColor : "#bfbfbf",
       scaleGridLineWidth : 0.2,
       bezierCurve : false,
       bezierCurveTension : 0.4,
       //points
       pointDot : true,
       pointDotRadius : 2,
       pointDotStrokeWidth : 1,
       pointHitDetectionRadius : 20,
       datasetStroke : true,
       datasetStrokeWidth : 2,
       datasetFill : true,
       //animations
       animation: true,
       animationSteps: 60,
       animationEasing: "easeOutQuart",
       //scale
       showScale: true,
       scaleFontFamily: "'Roboto'",
       scaleFontSize: 13,
       scaleFontStyle: "normal",
       scaleFontColor: "#333",
       //tooltips
       showTooltips: true,
       tooltipFillColor: "#344154",
       tooltipFontFamily: "'Roboto'",
       tooltipFontSize: 13,
       tooltipFontColor: "#fff",
       tooltipYPadding: 8,
       tooltipXPadding: 10,
       tooltipCornerRadius: 2,
       tooltipTitleFontFamily: "'Roboto'",
   });
  
   //------------- Line chart unfilled -------------//
   var lineData1 = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
     {
      label: "PayPal",
      fillColor : "rgba(186,195,210,0.2)",
      strokeColor : "rgba(186,195,210,1)",
      pointColor : "rgba(186,195,210,1)",
      pointStrokeColor : "#fff",
      pointHighlightFill : "#a1a1a1",
      pointHighlightStroke : "#fff",
      data : [3+randNum(),5+randNum(),8+randNum(),13+randNum(),17+randNum(),21+randNum(),23+randNum()]
     },
     {
      label: "Credit card",
      fillColor : "rgba(67,174,168,0.2)",
      strokeColor : "rgba(67,174,168,1)",
      pointColor : "rgba(67,174,168,1)",
      pointStrokeColor : "#fff",
      pointHighlightFill : "#fff",
      pointHighlightStroke : "rgba(67,174,168,1)",
      data : [randNum()-5,randNum()-2,randNum()-4,randNum()-1,randNum()-3,randNum()-2,randNum()-5]
     }
    ]
  
   }
   var ctx1 = document.getElementById("line-unfilled-chartjs").getContext("2d");
   var myLineChart1 = new Chart(ctx1).Line(lineData1, {
    responsive: true,
    scaleShowGridLines : true,
       scaleGridLineColor : "#bfbfbf",
       scaleGridLineWidth : 0.2,
       bezierCurve : true,
       //points
       pointDot : false,
       datasetFill : false,
       //animations
       animation: true,
       animationSteps: 60,
       animationEasing: "easeOutQuart",
       //scale
       showScale: true,
       scaleFontFamily: "'Roboto'",
       scaleFontSize: 13,
       scaleFontStyle: "normal",
       scaleFontColor: "#333",
       //tooltips
       showTooltips: true,
       tooltipFillColor: "#344154",
       tooltipFontFamily: "'Roboto'",
       tooltipFontSize: 13,
       tooltipFontColor: "#fff",
       tooltipYPadding: 8,
       tooltipXPadding: 10,
       tooltipCornerRadius: 2,
       tooltipTitleFontFamily: "'Roboto'",
   });</code></pre>
  </div>
  </div>
  </p>