Explore topic-wise InterviewSolutions in Current Affairs.

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();
}
};
});

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();
}
};
});

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

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

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
}

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
}

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

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

This to REMOVE all chart SERIES,

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

This to remove all chart series,

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

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"];
}

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"];
}

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

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:

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:

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

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

Chart's width is TAKEN from jQuery.width(CONTAINER), so if you have chart in some hidden TABS or something similar, width will be UNDEFINED. In that case default width and height are set (600x400).

Chart's width is taken from jQuery.width(container), so if you have chart in some hidden tabs or something similar, width will be undefined. In that case default width and height are set (600x400).

It could be DONE really EASY with PhantomJS. You can render Highchart CHART and SAVE it to SVG, PNG, JPEG or PDF.

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

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

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

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'
}
]
} ]
} );

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'
}
]
} ]
} );

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()

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:

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. 

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. 

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.

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.

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.

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.

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.

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

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>

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.

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. 

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

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.

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

Yes, with a LITTLE PROGRAMMING on top of the Highcharts DATA and drawing API you can draw a table. 

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

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

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:

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.

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.

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. 

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. 

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.

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.