title: Conditions within highcharts code
body: <p><strong>Problem</strong></p>
  
  <p>I am trying to use Highcharts on my mobile app which am developing using Phonegap. I have got the data from database through AJAX. That's tested and working fine basically when am putting <strong>If{}Else{}</strong> conditions based on the data I have got inside the highcharts code, it is giving me an error. Whichever If, ELSE condition I put after <strong>$(function () {</strong> it just throws an error. Code is attached below. Is there any way I can put conditions normally? Thanks in advance</p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>    //Get values from local storage
      var teamactivitygameGraph = window.localStorage.getItem("teamactivitygameGraph");
      AGW = JSON.parse(teamactivitygameGraph);
  
      //Assign values to the variables
  
      var game_start_on = AGW.game_start_on;
      var data_string = AGW.data_string;
      var data_avail = AGW.data_avail;
      var subText = AGW.subText;
      var graphdefault = user.graphdefault;
      var noofsundays = AGW.noofsundays;
      var total_user = AGW.total_user;
      var data = AGW.data;
      var yellowLineData = AGW.yellowLineData;
      var game_type = AGW.game_type;
      var danger_point = AGW.danger_point;
      var graph_image = AGW.graph_image;
  
      //Graph..
  
      $(function () {
         //var graphdefault = graphdefault;
         //var noofsundays = noofsundays;
  
         if(data_avail == 'no') {
              var styles = "x: -60,y:100,style: {color: '#8eb3ef',fontWeight: 'bold',fontSize: '36px'}";
          }else{
              var styles = "x: -25,";
          }
  
         if(graphdefault == 1 || (noofsundays == 1 &amp;&amp; graphdefault == 1)){
              var showLabels = 'showFirstLabel: false,showLastLabel: false,';
          }
  
         $('#team_container').highcharts({
          chart: {
              type: 'bar',
              renderTo: 'container',
              zoomType: 'xy',
              events: {
                  load: function() {
                      this.renderer.image(graph_image)
                          .add();
                  }
              },
              zIndex: 5
          },
          title: {
              text: 'Team Activity Game',
              x: -20 //center
          },
          subtitle: {
               text: subText,
              if(data_avail == 'no') {
                  x: -60, //center
                  y:100,
                  style: {
                   color: '#8eb3ef',
                   fontWeight: 'bold',
                   fontSize: '36px'
                  }
              }else{
                  x: -25, //center
              }
           },
          xAxis: {
          showLabels
            title: {
                 text: 'Week Ending'
                },
              type: 'datetime',
              maxZoom: 24 * 3600000, // Two days
              labels: {
                   rotation: -45,
                   align: 'right',
                   formatter: function() {
                     return Highcharts.dateFormat('%d/%m/%Y', this.value);
                   }
               },
              if(graphdefault == 0){
              tickInterval: 24 * 3600 * 1000 * 7,
              startOfWeek: 0
              }elseif(graphdefault == 1){
              tickInterval: 24 * 3600 * 1000
              }
          },
  </code></pre>
  
  <p><strong>Json Problem</strong></p>
  
  <pre><code>//I am taking this data from my Local Storage
  
  var teamactivitygameGraph = window.localStorage.getItem("teamactivitygameGraph");
  AGW = JSON.parse(teamactivitygameGraph);
  var data = AGW.data;
  
  alert (data);
  </code></pre>
  
  <p>When I alert var data it outputs the correct response i.e. "{name: "Joe",data: [[Date.parse('10/20/2013 UTC'), 8.9905667952813 ]]},{name: "Mark",data: []},{name: "Don",data: []}"</p>
  
  <p>But when I put the same variable in my Highchart code (below) it doesn't display anything.</p>
  
  <pre><code>series: [
                data
               ,{
              name: 'yellowline',
              visible: false,
              showInLegend: false,
              data: yellowLineData
               }
  
          ]
     });
  </code></pre>