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/
Related
I have a series data like this [null,0,null,null,null,null,0.86,null,0,null]
As you can see, there are only three points in it.
However it has been displayed as below,
Please see the demo here,
Highcharts.chart('container', {
chart: {
type: 'area',
spacingBottom: 30
},
title: {
text: 'Fruit consumption *'
},
xAxis: {
categories: ["Term 3_week1","Term 3_week2","Term 3_week3","Term 3_week4","Term 3_week5","Term 3_week6","Term 3_week7","Term 3_week8","Term 3_week9","Term 3_week10"]
},
yAxis: {
title: {
text: 'Y-Axis'
}
},
plotOptions: {
area: {
fillOpacity: 0.5
}
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [null,0,null,null,null,null,0.86,null,0,null]
}]
});
I am quite confused why this been displayed like this.
Can anyone help?
Thanks
First if you look your demo on firefox it will only show 3 points without any area.
Now you may try to use connectNulls Api Doc like that :
chart: {
type: 'scatter',
spacingBottom: 30
},
plotOptions: {
area: {
fillOpacity: 0.5,
connectNulls:true
}
},
Edit: New type of chart
Updated Fiddle
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
}
}]
})
});
I'm doing a chart using the highChart and angularJS.
I follow this highChart.
Here is my code:
AngularJS:
app.directive('hcPieChart', function () {
return {
restrict: 'E',
template: '<div></div>',
scope: {
title: '#',
data: '='
},
link: function (scope, element) {
Highcharts.chart(element[0], {
chart: {
type: 'pie'
},
title: {
text: scope.title
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.2f} %'
}
}
},
series: [{
data: scope.data
}]
});
}
};
});
app.controller('ChartsController', function ($scope) {
var ids =location.search;
$scope.Stats=function(){
$http.get(url+"/Stats"+ids)
.success(function(data){
$scope.Stat = data;
}).error(function(err,data){
console.log("error:" +data);
});
};
$scope.Stats();
/*$scope.Stat = [{
"Validate":17.456789,
"NotValidate":2.96296,
"Nb_V":2.96296,
"Nb_Not_v":2.96296
}];
*/
// Sample data for pie chart
$scope.pieData = [{
name: 'CheckLists Socred',
y: $scope.Stat[0].Validate,
color: '#00c853'
},{
name: 'CheckLists Not Socred',
y: $scope.Stat[0].NotValidate,
color: '#b71c1c'
}];
});
HTML code:
<html >
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body ng-app="app" ng-controller="ChartsController" >
<hc-pie-chart title="Browser usage" data="pieData">Placeholder for pie chart</hc-pie-chart>
</body>
</html>
What I got this chart
When from the graphic chart poster, I have this problem:
Uncaught TypeError: Cannot read property 'parentGroup' of undefined
at k.setState (App/Template/highcharts/highcharts.js:392:112)
at App/Template/highcharts/highcharts.js:207:54
at Array.forEach (native)
at a.each (App/Template/highcharts/highcharts.js:27:360)
at a.Pointer.runPointActions (App/Template/highcharts/highcharts.js:207:32)
at k.onMouseOver (App/Template/highcharts/highcharts.js:389:130)
at SVGGElement.c (App/Template/highcharts/highcharts.js:380:323)
plnkr
thank you for helping me,
I have the same problem and none of the answers helped me out. after several hours I figured out that the array which I was sending to the highchart component as the data feed to my chart, was causing the problem.
the point is, that the y-axis records MUST be named as 'y' , not any other arbitrary name.
my data used to be like this:
data = [{name: "n1", income: 1491},
{name: "n2", income: 103103},
{name: "n3", income: 126886},
{name: "n4", income: 88}]
and when i changed it to :
data = [{name: "n1", y: 1491},
{name: "n2", y: 103103},
{name: "n3", y: 126886},
{name: "n4", y: 88}]
problem solved.
According to $scope.Stat array object you have access each as $scope.Stat[0].Validate
Forked Plunker
$scope.pieData = [{
name: 'CheckLists Socred',
y: $scope.Stat[0].Validate,
color: '#00c853'
},{
name: 'CheckLists Not Socred',
y: $scope.Stat[0].NotValidate,
color: '#b71c1c'
}];
I am using Kendo Window in which I am showing Kendo TreeView with checboxes. The issue is that treeview renders correctly but checkboxes does not show. If I render treeview outside Kendo Window (i.e., directly in my page) then it showing checboxes correctly.
Please help as I am stuck. Below is the code that I use:
<div kendo-tree-view k-options="treeOptions" k-data-source="treeDataSource"></div>
$scope.treeOptions = {
checkboxes: {
checkChildren: true
}
};
This code seems to work fine:
<div kendo-window>
<div kendo-tree-view k-options="treeOptions" k-data-source="treeDataSource"></div>
</div>
<script>
angular.module("app", ["kendo.directives"]).controller("controller", function($scope) {
$scope.treeOptions = {
checkboxes: {
checkChildren: true
}
};
$scope.treeDataSource = [
{ text: "Furniture", expanded: true, items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
] },
{ text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
] }
];
});
</script>
Live demo: http://dojo.telerik.com/#korchev/INezO/2
I need to create bar chart showing up various values, such as "Created", "Closed", "Submitted" data with count on Y Axis and dates on x axis.
I am able to do this successfully, for any one criteria. However I am not able to get multiple bars being shown.
Below is the code I am using currently:
<!DOCTYPE html>
<html>
<head>
<title>Defect Trend App</title>
<script type="text/javascript" src="/apps/2.0rc1/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function () {
(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
return this.createTrendChart();
},
createTrendChart: function() {
var ProjectOid;
ProjectOid = this.getContext().getProject().ObjectID;
var ReleaseOID = <My Release ID>;
Ext.define('My.TrendCalc', {
extend: 'Rally.data.lookback.calculator.TimeSeriesCalculator',
getMetrics: function() {
return [
{
as: 'Defects',
display: 'column',
f: 'count'
}
];
}
});
this.myTrendChart = Ext.create('Rally.ui.chart.Chart', {
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: {
find: {
_TypeHierarchy: "Defect",
State: {
$lt: "Closed"
},
_ProjectHierarchy: ProjectOid,
Release: ReleaseOID
},
fetch: ["_ValidFrom", "_ValidTo", "ObjectID"]
},
calculatorType: 'My.TrendCalc',
calculatorConfig: {},
chartConfig: {
chart: {
zoomType: 'x',
type: 'column'
},
title: {
text: 'Defects over Time'
},
xAxis: {
type: 'datetime',
minTickInterval: 1
},
yAxis: {
title: {
text: 'Number of Defects'
}
}
}
});
return this.add(this.myTrendChart);
}
});
}).call(this);
Rally.launchApp('CustomApp', {
name:"Defect Trend App",
parentRepos:""
});
});
</script>
<style type="text/css">
.app {
/* Add app styles here */
}
</style>
</head>
<body></body>
</html>
I do not consider myself an expert in this area, but I believe this will work for you...
I took your code as a base and modified it based on some other code to get what I think appears to be a working version of what you want. Below is a screenshot of the code running in Rally.
The data I had did not have a lot of variance in the series (most were released) so it looks uninteresting.
You will probably want to exclude the final state (as I believe you did in your code via the $lt:'Completed'... which i changed to $lte:'Completed' temporarily).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><title>
Defect Trend App </title>
<script type="text/javascript" src="/apps/2.0rc1/sdk.js"></script>
<script type="text/javascript">
var states = ['Accepted','Released']; // all enum values for 'State'
var field = 'ScheduleState'; // or 'State'
var ReleaseOID = XXXXXX; // your release Oid
Rally.onReady(function () {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
return this.createTrendChart();
},
createTrendChart: function() {
var ProjectOid;
ProjectOid = this.getContext().getProject().ObjectID;
Ext.define('My.TrendCalc', {
extend: 'Rally.data.lookback.calculator.TimeSeriesCalculator',
getDerivedFieldsOnInput: function() {
var m = _.map(states, function(state) {
return {
"as": state,
"f" : function(snapshot) {
var value = (snapshot[field] == state) ? 1 : 0;
return value;
}
}
})
return m;
},
getMetrics : function() {
var m = _.map(states, function(state) {
return {
field: state,
as: state,
f: 'sum'
}
})
return m;
}
});
this.myTrendChart = Ext.create('Rally.ui.chart.Chart', {
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: {
find: {
_TypeHierarchy: "Defect",
State: {$lte: "Closed" },
_ProjectHierarchy: ProjectOid,
Release: ReleaseOID
},
fetch: ["_ValidFrom", "_ValidTo", "ObjectID", field],
hydrate: [field],
sort: { "_ValidFrom" : 1}
},
calculatorType: 'My.TrendCalc',
calculatorConfig : {},
chartConfig: {
chart: {
zoomType: 'xy',
type:'column'
},
title: {
text: 'Defects over Time'
},
xAxis: {
type: 'datetime',
title: { text: 'When'},
minTickInterval: 5,
labels : { rotation: 90 }
},
yAxis: { title: { text: 'Count' } },
plotOptions: {
series: {
stacking: 'normal'
}
}
}
});
return this.add(this.myTrendChart);
}
});
});
console.log("launching application");
Rally.launchApp('CustomApp', {
name:'Defect Trend App',
parentRepos:""
});
</script>
</head>
<body>
</body>
Pastebin - http://pastebin.com/Vf6jniGZ
I'm not familiar with Rally's App SDK wrappers, but I'm the primary author of Lumenize where the TimeSeriesCalculator comes from. Your situation is exactly what the group-by functionality in Lumenize.TimeSeriesCalculator was designed for. See the documentation for a careful walkthrough of how the TimeSeriesCalculator works. Look at the second example titled, "Time-series group-by example". Also, here is a functioning jsfiddle of that group-by example.
The key bit that you need is:
metrics = [
...
{f: 'groupByCount', groupByField: 'ScheduleState', allowedValues: allowedValues, prefix: 'Count '},
...
]