CODEWITHSUNDEEP
javascriptjqueryhtmlhighcharts
hcharge
hcharge

Reputation: 1246

Adding flags to Highstock chart (highcharts) with JavaScript

I've been working on this demo chart http://jsfiddle.net/hcharge/G7rsh/ and I'm struggling to add flags to the x axis.

In the examples on the highchart webpage they use UTC to locate the flag, however the series on this chart are plotted in a different way, using this format [1330560000000,32.29]

Would anybody have an answer? I'm not sure if this is specific to JavaScript or Highcharts but thought it would be worthwhile posting on here.

I've tried adding

series: [{ type: 'flags', data : [{'text':'Flag Set','title':'E','x':1330560000000} ], width: 16 }],

to the javascript but this doesn't seem to do anything, any help would be amazing, thanks

Upvotes: 2

Views: 4197

Answers (2)

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

if (seriesCounter == names.length) {
    selectSeries(0);
    // build flags
    seriesOptions.push({
        'type': 'flags',
        //'name': 'myflag',
        'data': [{
            'title':'E',
            'x':1330560000000
        }],
        'width': 16,
        // if you want to place to some serie add the following line
        //'onSeries': 1 //serie id
    });
    createChart();
}

You can see the following demo.

Upvotes: 3

Mina Gabriel
Mina Gabriel

Reputation: 25080

this is unix time format , when working with highstock you have to use unix time format to represent the xaxis

this is how you add flags to highstock 

         var alarms = { type: 'flags', name:'flag',color: 'red',
              data : 
              [{x:1326845030000,title : 'Alarm 1',text : 'Alarm 1'} ,                                                             
               {x:1326847030000,title : 'Alarm 2',text : 'Alarm 3'} , 
               {x:1326840030000,title : 'Alarm 3',text : 'Alarm 2'} ],
                shape : 'squarepin',width : 50  };

alarm variable will then be pushed to your series array

x is where you will place your flag on the xAxis , if you want your flag on a series , use onSeries : 'series_id' object in the alarm object

Upvotes: 1

Related Questions