How do I add json data to custom flags in Highstock?

Question

Using Highstock (StockChart type) I’ve created a timeline using flags with HTML and images. I’ve currently hard-coded the data but I’d like to add it via json. I’ve added the json file to the top of my code and created a variable for it (flagData). How can I add this using the json data to replace the hard-coded data?

https://jsfiddle.net/SkiWether/2cxgkmsv/

    var flagData = [{

        "productName": "Test Product A",
        "weekEndingData": [{
            "weekEnding": "11/16/2015",
            "testValue": 711,
            "flagBlocks": [{
                "blockName": "Box - 1",
                "imgUrl": "https://placeimg.com/75/50/nature"
            }]
        }, {
            "weekEnding": "11/23/2015",
            "testValue": 644,
            "flagBlocks": [{
                "blockName": "Box - 1",
                "imgUrl": "https://placeimg.com/75/50/animals"
            }]
        }, {
            "weekEnding": "11/30/2015",
            "testValue": 844,
            "flagBlocks": [{
                "blockName": "Box - 1",
                "imgUrl": "https://placeimg.com/75/50/nature"
            }, {
                "blockName": "Box - 2",
                "imgUrl": "https://placeimg.com/75/50/tech"
            }, {
                "blockName": "Box - 3",
                "imgUrl": "https://placeimg.com/75/50/animals"
            }]
        }, {
            "weekEnding": "12/07/2015",
            "testValue": 340,
            "flagBlocks": [{
                "blockName": "Box - 1",
                "imgUrl": "https://placeimg.com/75/50/tech"
            }, {
                "blockName": "Box - 2",
                "imgUrl": "https://placeimg.com/75/50/animals"
            }]
        }]
    }]

Answer 1

Define empty array for flags, and then format your data properly, for example:

var flagSeries = []; // placeholder

$.each(flagData[0].weekEndingData, function(i, flag) {
  var week = flag.weekEnding.split('/'),
      x = Date.UTC(week[2], parseInt(week[1]) - 1, week[0]);

  $.each(flag.flagBlocks, function(j, block) {
    flagSeries.push({
      x: x,
      title: '<div class="flagContainer"><div class="innerText">' + block.blockName + '</div><span class="innerImage"><img src="' + block.imgUrl + '" width="75" height="52"></span></div>'
    });
  });
});

And demo: https://jsfiddle.net/2cxgkmsv/7/ (not I disabled min+max and selected just for a showcase).