Search Posts

Category: highcharts

Multiple series in Highcharts

Request help for the Scenario. Say i have an array of categoryid as controller.dataList = [ {pvalue:10,nvalue:20,categoryid: 1,date:”12-03-1998″}, {pvalue:40,nvalue:40,categoryid: 2,date:”13-03-1998″}, {pvalue:60,nvalue:150,categoryid: 3,date:”14-03-1998″}]. Now for each catergoryid i want a high chart series of pvalue and nvalue.So in AngularJs code i am calling a common method to generateChart like: function generateChart() { var localDl = angular.copy(controller.dataList); var NValueList = { return {x:, “GMT”).valueOf(), y: Math.round(obj.nvalue), data: angular.copy(obj)}; }); var PvalueList = { return […]

Highcharts : How to apply padding between each bar on Y-axis

I am trying to add more spacing between the bars on y-axis in Highcharts. Currently, it looks like below: I have added a scrollbar on y-axis. But, the scroll bar doesn’t seem to be working. Instead, the bars on y-axis are pushed together and look cluttered. How can I fix this ? I am using the Highstocks API. The chart options I am using right now is :- $scope.mychart = new Highcharts.Chart({ chart: { renderTo: […]

Filter data in highcharts by date and time

My web page initially loads the highchart (scatter plot) using the timestamp data for the whole month, but I want to create custom input field that allows to enter date/time range and dynamically plot only those points that are in the range and “hide” everything else. What I already have in mind is that I can add an event listener that listens to change in the input field and reloading the whole chart and filter, […]

Call angularJS controller functions in highchart click event

events: { click: function (e) { showHourlyPopup(‘datevariablehere’); }.bind(this) } I have the click event which is supposed to call the function in my controller. The function is not in scope but a controller function declared as this.showHourlyPopup. It is showing up as not defined in the logs as I believe the config is out of the controller. Anyway i can call the function in my angularJS controller? <highchart class=”chartContainer” id=”totalNoOfAPICallsChart” config=”overviewCtrl.chartConfig.totalNoOfAPICalls”></highchart> Source: AngularJS

Create async multi-level drilldown – Highcharts

I am creating a column chart and I need to create a two level drilldown through API’s. I achieved the first one but not able to achieve the second one. Can someone enlighten me on this? Thanks. $scope.getJobFunctionHits = function() { axios.get(‘/stats/getJobFunctionHits’) .then(function(res) { $scope.jobFunctionHits =; _.forEach($scope.jobFunctionHits, function(value, key) { if($scope.jobFunctionHits[key].universal_job_function === null) { $scope.jobFunctionHits[key].universal_job_function = ‘N/A’; } }); Highcharts.chart(‘container-jobFunctionHits’, { chart: { type: ‘column’, events: { drilldown: function(e) { var chart = this; […]

Highchart is not working when I am fetching the axis values from database

I am using ASP .Net web api to fetch the data from the database, And trying to make a graph of the derived data , using Highchart. When I am giving the axis values in the form: xAxis: { categories:[“Sabab”,”Sunjare”,”Ety”] }, series: [{ data: [20,30,40] }] it is working fine. But when I am initializing the categories of xAxis and data of series , by the data , derived from the database, no graph is […]

Combine an object parameter with array values in Highcharts reduce method

Sorry don’t know how to exactly search this since English is not my first language. What I want do is combine array values to an object parameter. I am using highcharts reduce method to show the occurrences of a word My object is obj{} var data = Highcharts.reduce(series, function(arr, word) { var obj = Highcharts.find(arr, function(obj) { return === word; }); obj = { name: word, weight: sortWeight() }; arr.push(obj); console.log(obj); return arr; }, […]

Next Page »