Conditions within highcharts code

Question

Problem

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 If{}Else{} 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 $(function () { it just throws an error. Code is attached below. Is there any way I can put conditions normally? Thanks in advance

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 && 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
            }
        },

Json Problem

//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);

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: []}"

But when I put the same variable in my Highchart code (below) it doesn't display anything.

series: [
              data
             ,{
            name: 'yellowline',
            visible: false,
            showInLegend: false,
            data: yellowLineData
             }

        ]
   });

Answer 1

In the JSON you cannot use conditions, it can be done durign preprocesising and in json you can use returend value.

Answer 2

here when you create a chart using highcharts, it expects few options which we pass to it, these are the ones depending on which the charts is rendered,

here in between the set of options you have put a condition,

instead of using if else you can go with a ternary operator

tickInterval: (graphdefault == 0) ? 24 * 3600 * 1000 * 7 : ((graphdefault == 1) ? 24 * 3600 * 1000 * 7 : null),

this will work because the condition is evaluated when the tickInterval option is accessed.

Try it, hope this will be useful