I am using highstock,5.0.10 with angularJS.
In my chart navigator got displayed twice, like below
As you can see, navigator has been rendered twice. However, if you refresh the page, everything looks fine.
Any ideas?
I have added my Highstock code here.
Highcharts.stockChart('FindComputerUsage', {
rangeSelector: {
selected: 1
},
credits: {
enabled: false
},
title: {
text: ''
},
yAxis: {
title: {
text: 'Percentage of time (%) '
}
},
tooltip: {
formatter: function() {
var date = new Date(requiredData[this.points[0].point.index][0]);
return date + '<br>' + 'Percentage:' + requiredData[this.points[0].point.index][1] + '%';
}
},
series: [{
name: 'Percentage (%)',
data: requiredData,
tooltip: {
valueDecimals: 2,
}
}],
lang :{
noData : "No data to display "
}
});
Here you can see a working example: https://plnkr.co/edit/OphM9wf8WyGm8U6HXfTy
You haven't show your HTML view, but I guess it's similar to this.
<div ng-controller="demoCtrl">
<div id="container" style="height: 400px; min-width: 310px"></div>
</div>
Concerning controller scope, I didn't change anything:
var app = angular.module('demoApp', []);
app.controller('demoCtrl', function($scope){
$scope.data = [
[1290729600000,45.00],
[1290988800000,45.27],
[1291075200000,44.45]
];
Highcharts.stockChart('container', {
rangeSelector: {
selected: 1
},
title: {
text: 'Qing Xu Example'
},
series: [{
name: 'Value',
data: $scope.data,
tooltip: {
valueDecimals: 2
}
}]
})
});
Related
I have an angularjs application and I use highcharts-ng to display some graphs. I got the data from an http request and I modify the data to display them in the graph.
If I receive just a just some data, it's ok, it works but when I receive a lot of data, the highcharts component take a long time to display the data. And in this time the browser in freezed.
In my controller, I have:
widgetCtrl.chartDataLine = {
chart: {
type: 'spline',
zoomType: 'xy'
},
title: {
text: 'Power Consumption'
},
xAxis: {
type: 'datetime',
title: {
text: 'Date time'
}
},
yAxis: {
title: {
text: 'Power (W)'
},
min: 0
},
options: {
exporting: {
enabled: true,
allowHTML: true,
buttons: {
contextButton: {
menuItems: null,
onclick: function () {
this.exportChart();
}
}
}
}
},
plotOptions:{
series:{
turboThreshold:60000 // larger threshold or set to 0 to disable
}
},
series: []
};
I call the data like that:
var getMetrics = function (searchText) {
var param = {
target: searchText
};
xcsDatasource.get('beo').callAction('getPowerMetrics', param.target, widgetCtrl.pickerFrom.date, widgetCtrl.pickerTo.date).then(
function (result) {
widgetCtrl.metrics = result;
widgetCtrl.metricsAsString = JSON.stringify(result);
var t = getChartData(result);
widgetCtrl.chartDataLine.series = angular.copy(t);
console.log(widgetCtrl.chartDataLine);
//widgetCtrl.chartDataArea.series = getChartData(result);
},
function () {
widgetCtrl.metrics = {};
widgetCtrl.metricsAsString = '';
}
);
};
And this is my html:
<div ng-if="config.linechart" class="graph-container col-sm-12">
<highchart id="chart1" config="pwrDashboardViewCtrl.chartDataLine"></highchart>
</div>
Do you have an idea how I can do to continue to load the grapph without freezing the browser ?
I am trying to use custom editors for an editable kendo ui grid in my angular app.
For some reason( which I am not able to trace) the custom editor is not triggered.
I am expecting the following to be triggered but it does not work.
console.log("Editor Launched", options);
Here is the plunker for the same:
http://plnkr.co/edit/WioRbXA3LHVVRQD95nXA?p=preview
app.controller('MainCtrl', function($scope) {
$scope.model = {};
$scope.model.dataSource = new kendo.data.DataSource({
data: createRandomData(10),
schema: {
model: {
fields: {
City: { type: "string" },
Title: { type: "string" },
BirthDate: { type: "date" },
Age: { type: "number" }
}
}
},
pageSize: 16,
editable:true
});
$scope.addWWNumEditor= function (container, options) {
console.log("Editor Launched", options);
$('<input kendo-numeric-text-box k-min="10" k-max="20" style="width: 100%;" data-bind="value:' + options.field + '"/>')
.appendTo(container);
}
$scope.controlIsDisabled=function(model){
//console.log("model",(model.Age>=50));
var toReturn = (model.Age>50)?"columnDisabled" : "columnActive";
//console.log('to Return',toReturn);
return toReturn;
}
$scope.model.columns = [
{ field: 'City', title: 'City' },
{
field: 'Title',
title: 'Title',
template:'<span style="color:red;">EDITABLE</span><span ng-
class="controlIsDisabled(dataItem)">#=Title#</span>'
},
{
field: 'Age',
title: 'Age',
template:'<span ng-class="controlIsDisabled(dataItem)">#=Age#</span>'
,
editor:$scope.addWWNumEditor
}
];
});
Assuming your Plunkr mirrors your actual code, the primary problem I'm seeing is in your binding of k-columns on the grid element.
You currently have k-columns="{{model.columns}}", but the {{}} are unnecessary here. Changing to k-columns="model.columns" causes your editor function to execute as expected.
I want to put a legend, but I don´t know why it doesn´t appear. Also, I want to put the database in the fragments of my pie charts.
myapp.controller('myctrl', function ($scope) {
var data = [
['APP Android', 45.0],
['APP Ios', 26.8],
]
$scope.highchartsNG = {
options: {
chart: { type: 'pie'}
},
legend: {
enabled: true
},
series: [ {
name: 'Avisos',
innerSize: '50%'
},
{
name: 'Plataforma',
size: '80%',
innerSize: '65%',
showInLegend: false,
data: data
}],
loading: false
}
});
This example is public in http://jsfiddle.net/Cp73s/2038/
Check this out
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function($scope) {
var data = [
['APP Android', 45.0],
['APP Ios', 26.8],
['Widget Web', 12.8],
['MTC BAckoffice', 8.5],
['Correo electrónico', 6.2],
['Facebook', 6.2],
['Twitter', 6.2],
['Teléfono', 6.2],
['Presencial', 6.2],
]
$scope.highchartsNG = {
options: {
chart: {
type: 'pie'
},
plotOptions: {
pie: {
dataLabels: {
distance: -25 //adjust this value to change label distance
}
}
},
},
title: {
text: '550<br>AVISOS',
align: 'center',
verticalAlign: 'middle'
},
legend: {
enabled: true
},
series: [{
name: 'Avisos',
innerSize: '50%'
}, {
name: 'Plataforma',
size: '80%',
innerSize: '65%',
showInLegend: true,
data: data
}],
loading: false
}
});
Fiddles
fiddle with updated label
Fiddle with updated legend display
I am learning AngularJS and trying to use the Telerik KendoGrid in a directive. I have a directive that that will access a service and get some data. Part of the data will be used to populate an observable array in the directive. The html that is associated to that directive has another directive within it that will create a kendoGrid that should be editable. When I click on the update button I get an undefined error and the grid data disappears.
I define my array as follows:
$scope.currentData.event.submissionDates = new kendo.data.ObservableArray([
]);
and on success of call push the data into the array.
the grid is called as follows in the html:
<submission-grid class="grid-16" event="currentData.event" ng-show="currentData.event.eventID"></submission-grid>
This directive calls the following html file:
<div kendo-grid="grid"
k-columns="gridColumns"
k-selectable="true"
k-on-change="selected = data"
k-options ="mainGridOptions "
k-editable ="{'mode': 'inline', 'update': 'true'}"
and the backing js is:
(function () {
angular.module('app.submissionGrid', [])
.directive('submissionGrid', function () {
var ctrlr = function ($scope) {
$scope.gridColumns = [{
field: "SubmissionDueDate",
title: "Due Date",
format: "{0:MM/dd/yyyy}",
width: "100px"
}, {
field: "Source",
title: "Agency",
width: "100px"
}, {
field: "SubmissionFiledDate",
title: "Filed Date",
format: "{0:MM/dd/yyyy}",
width: "100px"
}, {
field: "SeverityCategory",
title: "Severity Category",
width: "100px"
}, { command: ["edit", ], title: " ", width: "200px" }
];
$scope.mainGridOptions = {
dataSource: {
data: $scope.event.submissionDates,
schema: {
model: {
id: "ReportId",
fields: {
SubmissionDueDate: { type: "string" },
Source: { type: "string" },
SubmissionFiledDate: { type: "string" },
SeverityCategory: { type: "string" }
}
}
},
}
}
}
return {
restrict: 'E',
templateUrl: 'App/Event/SubmissionGrid/submissionGrid.html',
controller: ctrlr,
transclude: false,
scope: {
event: '='
}
};
})
})();
Any advice would be appreciated.
I am trying to render charts using the Highcharts js-library. As I am working with AngularJS, I am using an AngularJS directive for HighCharts.
I made everything work fine but due to some weird reason, I am unable to change the yAxis label value.
I get the default value "Values" shown on the chart's y-axis, which I checked is defined in the highcharts.js file under "defaultYAxisOptions".
Html:
<div ng-app="myapp">
<div ng-controller="myctrl">
<highchart id="chart1" config="chart"></highchart>
</div>
</div>
Javascript:
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope) {
$scope.chart = {
options: {
chart: {
type: 'bar'
}
},
xAxis: {
title: {
text: 'x-axix-label'
}
},
yAxis: {
title: {
text: 'y-axix-label'
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
title: {
text: 'Hello'
},
loading: false
}
});
Sample implementation: http://jsfiddle.net/VwTCn/9/
Can someone please point out the mistake here.
Took me a while, to understand, that highcharts-ng doesn't work, using the original highcharts options structure.
Anyway, for some reason it works, if you put you yAxis config into the options object, like this:
...
options: {
chart: {
type: 'bar'
},
yAxis: {
title: {
text: 'y-axis label'
}
}
},
xAxis: {
title: {
text: 'x-axis label'
}
},
series: [{
...
See example: http://jsfiddle.net/martinczerwi/VwTCn/13/