Are you a person willing to work on data visualization including d3 and high charts? Are you a person with an experience as Java script developer then log on to www.wisdomjobs.com. High charts are a charting library written in pure java script offering an easy way of adding interactive charts to your web site. We can create simple like bar, pie, polar and so on or even time series based bar, line area charts etc using high charts. It makes easy for developers to set up interactive charts in their web pages. It uses Jquery to creative interactive data visualization. So try your luck in the business management and marketing sectors, IT sectors, banking sectors by looking into High charts job interview question and answers given.
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.
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:
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.
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.
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.
Question 9. Can I Generate Charts On The Server Without Using A Browser?
Answer :
There are also other approaches for server-side chart generation:
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.
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:
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'
}
]
} ]
} );
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
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 Answer : 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). Question 18. How To Add Items To An Array Dynamically In Javascript? Answer : $(function() { 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: This unit is then used find a format for the axis labels. The default patterns are: second: '%H:%M:%S', 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: 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(); 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'); 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) 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("..."); 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: { Answer : Not got a chance to run the code below, but this should work or something very similar to this $series=array(); 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) { And you can create a custom HTML tag1 specifying the model you want to get data from <chart ng-model='data'></chart>
var options = {
series: [{
type: 'pie',
name: 'service status',
data: []
}]
};
var objData={ "type":'bar','name':'second','data':[]};
options.series.push(objData);
});
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b '%y',
year: '%Y'
Highcharts 2.3.4
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"];
}
chart.series[0].remove(true);
$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);
ordinal: false
}
while($item = mysql_fetch_assoc($result)) {
$serie=array(
"name" => $item['name'],
"data" => array(floatval($item['data']))
);
array_push($series,$serie);
}
echo json_encode($series);
$scope.data = [[[0, 1], [1, 5], [2, 2]]];
});
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();
}
};
});
HighCharts Related Tutorials |
|
---|---|
Python Tutorial | CSS3 Tutorial |
HTML Tutorial | HTML 5 Tutorial |
MVC Framework Tutorial | CSS Advanced Tutorial |
Javascript Advanced Tutorial | Grunt Tutorial |
HighCharts Related Practice Tests |
|
---|---|
Python Practice Tests | CSS3 Practice Tests |
HTML Practice Tests | HTML 5 Practice Tests |
Angular JS Practice Tests |
All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.