HighCharts Interview Questions & Answers

Question 1. Does Highcharts Refer To Files Outside Our Domain?

Answer :

For basic usage, Highcharts doesn't refer to any files other than highcharts.js/highstock.js, though there are some cases that you should be aware of.

• The exporting module. Since not all browsers are able to convert the chart to an image format, this operation is by default done on our web service. The generated SVG is sent from your browser to the export server, and an image is sent back. If you're concerned about your data content being passed over the internet, you should set up your own export server. See Setting up the export server. An alternative, if you don't need to support IE <= 9, is to use the module for client-side export.
• Certain features, including client side exporting, may require third-party dependencies. Some of these are loaded on demand from our servers, but in these cases the loading location is configurable. Details on all external dependencies, including licensing and security details, can be found in the optional dependencies documentation article.

Question 2. My Charts Are Not Showing In Internet Explorer 7 Or 8?

Answer :

The most common reason why a chart works in modern browsers but fails in IE6, 7 and 8, is stray commas in the configuration options. Stray commas are commas after the last item of an object or an array in JavaScript. These will pass silently in modern browsers, but cause a JavaScript error in legacy IE.

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        type: 'datetime'
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5,
               216.4, 194.1, 95.6, 54.4],
        pointStart: Date.UTC(2012, 0, 1),
        pointInterval: 24 * 3600 * 1000,
    }]
});

Another case where legacy IE fails to show charts, is when the security setting "ActiveX controls and plug-ins" => "Binary and script behavious" is disabled. This happens very rarely on user computers, but we have seen it from time to time on company networks. In this case, IE fails to draw any of the vector graphics, only the the text is shown. 

Question 3. Can I Use Highcharts With A ... Server?

Answer :

Highcharts runs entirely on the client, and works with any web server that can deliver HTML and JavaScript content. Whether your server is PHP, Perl, ASP, ASP.NET, Node.js or whatever, Highcharts is completely ignorant of it. The HTML/JavaScript files may also be loaded from the file system, which is the case in app platforms where Highcharts is loaded in a web component inside the app.

The best practice in integrating Highcharts may differ from system to system. You should follow the common practice for handing JavaScript on your specific system. Some prefer to serve a clean JSON or JavaScript file with the Highcharts setup, others to write the JavaScript setup directly to the web page. Data can be loaded in form of JSON or CSV files (see Working with data in the left menu), or printed inline in the chart setup. When working with a databased powered backend, it may be cleaner to have your server system serve JSON or CSV files.

Question 4. Can I Use Features From Highstock In Highcharts?

Answer :

Yes, most Highstock features can be applied to standard charts. From a licensing point of view, using features of the Stock package obviously requires a Highstock license.

Technically Highcharts Stock is implemented as a set of plugins for Highcharts. The entire code base for Highcharts is included in the Stock package, and you can invoke a chart using Highcharts.Chart and enable certain features that are normally associated with a stock chart.

Examples:

• Using flags in Highcharts
• Enabling a scrollbar in Highcharts
• Gap size in Highcharts

Question 5. Can I Add A Data Table To The Exported Chart?

Answer :

Yes, with a little programming on top of the Highcharts data and drawing API you can draw a table. 

Question 6. How Can I Get The Best Performance Out Of Highcharts?

Answer :

When working with series with a high number of data points, there are a few things to consider.

1. First of all, consider using the Boost module.
2. Otherwise, for line plots, it is recommended that you disable point markers, as these will add a performace overhead. See http://highcharts.com/demo/line-time-series.
3. Disabling shadows increases performance, as three shadow elements are created for each shape that includes a shadow.
4. For large column series, it is recommended that you disable the initial animation, plotOptions.column.animation, at least for VML based browsers. The best way to distinguish between fast SVG browsers and slower VML browsers is to use the Highcharts.svg boolean property.

Question 7. Can I Export Multiple Charts To The Same Image Or Pdf?

Answer :

Currently this isn't implemented in the core, but there are a couple of paths you can go to achieve this. 

1. Use our hack for exporting multiple charts. Basically, this code gets the SVG of all charts, modifies it and applies it to one single SVG file that is sent to the server for image conversion. We also support using our client side exporting module, if sending data to our server is a concern. See this demo for an example of this approach.
2. Create a HTML file on your server that contains all your desired charts, and do a pure server side conversion of this. 

Question 8. My Non-english Characters Don't Display Right In My Charts

Answer :

If you're using German umlauts, Scandinavian vowels or non-European alphabets, you need to use UTF-8 encoding for your files. There are two ways of doing this.

1. Make sure your HTML page where your charts are defined, is UTF-8. The file itself and if applicable its database content must be encoded as UTF-8. Additionally, either the content-type HTTP header or the corresponding meta tag must reflect this:
   
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   
   
2.  If you don't have access to change your whole HTML file, you can define your charts in a separate JS file that has UTF-8 encoding.
   
   <script src="/charts.js" charset="UTF-8"></script>

Question 9. Can I Generate Charts On The Server Without Using A Browser?

Answer :

There are also other approaches for server-side chart generation:

• David Padbury wrote a very interesting piece about running Highcharts on a Node JS server.
• Travis Hansen has kindly shared his Phantom JS module.

Question 10. How Do I Define Irregular Time Data?

Answer :

To add data points with irregular intervals, instead of defining pointStart and pointInterval for the series, define an X value (date) for each point.

If you want the line to be broken for missing dates, insert null values instead.

Question 11. How Do I Add Data From A Mysql Database?

Answer :

Highcharts runs on the client side only, and is completely ignorant of how your server is set up. This means that if your server is running PHP and MySQL, or any other type of server technology coupled with any SQL engine, you can dynamically produce the HTML and JavaScript required by Highcharts. 

There are a number of ways to do this. One way is to make a specific PHP file that only contains the data, call this dynamically from jQuery using Ajax, and add it to the configuration object before the chart is generated. Or you can have one PHP file that returns the entire JavaScript setup of your chart. Or, in the most basic way, just add some PHP code within your parent HTML page that handles the data from the chart. Below is a basic, low level example of how to pull data from a MySQL table and add it to your chart.

Question 12. Your Map Of My Country Does Not Include A Disputed Area?

Answer :

We do our best not to take sides in border conflicts, however we realize the need for maps including disputed areas. To solve this, we try to keep our default maps conforming to neutral de facto borders or conventions, while providing alternative maps that include disputed areas. 

Question 13. Why Are Bootstrap Tabs Displaying Tab-pane Divs With Incorrect Widths When Using Highcharts?

Answer :

The problem is that Highcharts can not calculate width of the container which has CSS: display:none, so applied is default width (600px). In fact, browser is not able to calculate width for such elements.

For example when you will use separator to resize Result window, chart will resize and will work. So you have three options:

• render chart after first click on that tab
• render chart at the beginning, but after each click and window resize use chart.setSize(w,h) with new width and height
• render chart at the beginning, but after tab click call chart.reflow()

Question 14. Is There Any Way To Pass Some Additional Data To The Series Object That Will Use To Show In The Chart 'tooltip'?

Answer :

Yes, if you set up the series object like the following, where each data point is a hash, then you can pass extra values:

new Highcharts.Chart( {
    ...,
    series: [ {
        name: 'Foo',
        data: [
            {
                y : 3,
                myData : 'firstPoint'
            },
            {
                y : 7,
                myData : 'secondPoint'
            },
            {
                y : 1,
                myData : 'thirdPoint'
            }
        ]
    } ]
} );

Question 15. I Have A Column Chart Which Has A Number Of Categories, Each With A Single Data Point (e.g. Like This One). Is It Possible To Change The Color Of The Bar For Each Category? I.e. So Each Bar Would Have Its Own Unique Color Rather Than All Being Blue?

Answer :

You can also set the color individually for each point/bar if you change the data array to be configuration objects instead of numbers.

data: [
      {y: 34.4, color: 'red'},     // this point is red
      21.8,                        // default blue
      {y: 20.1, color: '#aaff99'}, // this will be greenish
      20]                          // default blue

Question 16. What I'd Like To Do Is To Create A Link That Saves The Image On The Server, Instead Of Downloading It. How Could I Do That ?

Answer :

It could be done really easy with PhantomJS. You can render Highchart chart and save it to SVG, PNG, JPEG or PDF.

Question 17. I'm Using Highcharts Column Chart And I Want It To Be 100% Width Responsive Chart. The Container Is A Simple

Question 18. How To Add Items To An Array Dynamically In Javascript?

Answer :

$(function() {
var options = {   
    series: [{
        type: 'pie',
        name: 'service status',
        data: []
        }]
};    
    var objData={ "type":'bar','name':'second','data':[]};
    options.series.push(objData);
});

Question 19. How To Get Highcharts Dates In The X Axis?

Answer :

Highcharts will automatically try to find the best format for the current zoom-range. This is done if the xAxis has the type 'datetime'. Next the unit of the current zoom is calculated, it could be one of:

• second
• minute
• hour
• day
• week
• month
• year

This unit is then used find a format for the axis labels. The default patterns are:

second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b '%y',
year: '%Y'

If you want the day to be part of the "hour"-level labels you should change the dateTimeLabelFormatsoption for that level include %d or %e. These are the available patters:

• %a: Short weekday, like 'Mon'.
• %A: Long weekday, like 'Monday'.
• %d: Two digit day of the month, 01 to 31.
• %e: Day of the month, 1 through 31.
• %b: Short month, like 'Jan'.
• %B: Long month, like 'January'.
• %m: Two digit month number, 01 through 12.
• %y: Two digits year, like 09 for 2009.
• %Y: Four digits year, like 2009.
• %H: Two digits hours in 24h format, 00 through 23.
• %I: Two digits hours in 12h format, 00 through 11.
• %l (Lower case L): Hours in 12h format, 1 through 11.
• %M: Two digits minutes, 00 through 59.
• %p: Upper case AM or PM.
• %P: Lower case AM or PM.
• %S: Two digits seconds, 00 through 59

Question 20. How Can I Get Access To A Highcharts Chart Through A Dom-container?

Answer :

Users can use the highcharts plugin

var chart=$("#container").highcharts();
Highcharts 2.3.4

Read from the Highcharts.charts array, for version 2.3.4 and later, the index of the chart can be found from the data on the div

 var index=$("#container").data('highchartsChart');
 var chart=Highcharts.charts[index];
All versions
Track charts in a global objec/map by container id
var window.charts={}; 
function foo(){
  new Highcharts.Chart({...},function(chart){  
      window.charts[chart.options.chart.renderTo] = chart;
  });
}
function bar(){
  var chart=window.charts["containerId"];
}

Question 21. Proper Way To Remove All Series Data From A Highcharts Chart?

Answer :

This to remove all chart series,

while(chart.series.length > 0)
chart.series[0].remove(true);

Question 22. How To Use Json_encode?

Answer :

json_encode is a convenience method to convert an array into JSON format. To have the output you provided, you will need an array of arrays. Each sub-array has keys "name" and "data", where "name" is the Item column, and "data" is another array containing values from 2011 and 2012.

$results = mysql_query("...");
$arr = array();
while ($row = mysql_fetch_assoc($results))
{
    $name = $row['Item'];
    $data = array($row['2011'], $row['2012']);
    $arr[] = array('name' => $name, 'data' => $data);
}
echo json_encode($arr);

Question 23. Highstock Highcharts Irregular Data Gets Wrong X-scale?

Answer :

You will need to set the xAxis.ordinal property to false, this is true by default. True value indicates the points should be placed at fixed intervals w.r.t space (pixels), and False changes points to be placed at fixed intervals w.r.t. time

xAxis: {       
    ordinal: false
}

Question 24. Is There A Way To Get/convert The Resultset In Exactly The Same Format As Is Required By The Series Property Of Highcharts?

Answer :

Not got a chance to run the code below, but this should work or something very similar to this

$series=array();
while($item = mysql_fetch_assoc($result)) {
  $serie=array(
     "name" => $item['name'],
     "data" => array(floatval($item['data']))
  );
  array_push($series,$serie);
}
echo json_encode($series);

An advice is to always stick to json_encode() for doing the jsonification. You may want to go through this example on the reference page to learn about how json_encode works with arrays in particular

Question 25. How To Integrate Flot With Angularjs?

Answer :

Since charting involves heavy DOM manipulation, directives are the way to go.

Data can be kept in the Controller

App.controller('Ctrl', function($scope) {
    $scope.data = [[[0, 1], [1, 5], [2, 2]]];
});

And you can create a custom HTML tag1 specifying the model you want to get data from

 <chart ng-model='data'></chart>
which angular can compile through a directive
App.directive('chart', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            var data = scope[attrs.ngModel];
            $.plot(elem, data, {});
            elem.show();
        }
    };
});