When I test the doughnut chart with jQuery (no angular), my chart works well (See my plunker). However, when I put it in angular directive, nothing shows up. I use templateUrl here because the actual template is much more complicated than that.
index.html
<body ng-app="myApp">
<div my-chart></div>
</body>
Javascript
angular.module('myApp', [])
.directive('myChart', function() {
return {
restrict: 'A',
replace: 'true',
templateUrl: 'my-chart.html',
scope: {},
link: function (scope, element) {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'chart_1',
type: 'pie',
height: 200,
},
colors: ['#FF0F00', '#FBAF34', '#00cc00'],
title: {
text: ''
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
//enabled: false,
headerFormat: '<b>{series.name}</b><br><table>',
pointFormat: '<tr><td style="color:{point-color}">{point.name}: </td>' + '<td style="text-align: right">{point.y} %</td></tr>',
footerFormat: '</table>'
},
plotOptions: {
series: {
cursor: 'pointer',
allowPointSelect: true,
point: {
events: {
click: function () {
alert('Site name: ' + this.series.name + ', severity: ' + this.name + " value: " + this.y);
}
}
}
},
pie: {
innerSize: 120,
// disable data label
dataLabels: {
enabled: false
}
}
},
series: [{
name: "Site 1",
data: [
{name: "Critical", y: 56.33},
{name: "Warning", y: 24.03},
{name: "Ok", y: 10.38}
]
}]
});
}
};
});
my-chart.html
<div id="chart_1"></div>
I looked over your code, everything looked sound. You did not provide a plunker for the latest code (with directive), so I created one for you! I imagine you did not add the JQuery script because Angular has some built in. As it is is not perfect at the moment, some items are left out, HighChart requires some additional pieces. What it requires specifically I'm not sure. The console log shows multiple errors without JQuery being added. Hopefully items missing from JQuery in Angular will be added soon!
http://plnkr.co/edit/u6I1zr?p=preview
<html ng-app="myApp">
<body>
<div my-chart></div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="script.js"></script>
</body>
</html>
Angularjs uses a subset of JQuery which is known as "jQuery lite" or "jqLite".jqLite implements only the most commonly needed functionality so if you want the enhanced functionality you need to load jquery library before angularjs
below is the link for the docs:-
https://docs.angularjs.org/api/ng/function/angular.element
Related
I have developed a very simple column chart from a json three dimensional array:
0: timestamp in millliseconds
1:given recognition
2:received recognition
[[1490288274653,7,175],[1490374674653,1,1],[1490806674653,1,1],[1490979474653,3,3],[1491065874653,4,4],[1491411474653,6,0],[1491497874653,2,0],[1491584274653,18,0],[1491843474653,8,0],[1491929874653,1,0],[1492621074653,25,0],[1492707474653,12,0],[1492793874653,2,0],[1501174674653,2,0],[1503593874653,2,2],[1510765074653,1,0],[1510851474653,1,1],[1510937874653,5,0],[1511197074653,7,3],[1511369874653,7,2],[1511542674653,1,0],[1511801874653,7,3],[1511974674653,1,0],[1512493074653,1,1],[1512665874653,2,2],[1512752274653,9,4],[1513184274653,2,2],[1513270674653,2,2],[1513616274653,3,0],[1513789074653,4,2],[1514912274653,1,0],[1515430674653,1,0]]
The array displays timestamp on the xAxis and given recognition on the y axis.
How do I create a stacked column with "received recognition" stacked on "given recognition" on the yAxis?
I have searched google for hours and I can't find an example that uses same json array like mine, without strings as catagories.
I assume I will have to customise series or plotOptions and identify the data columns via the number data[1], data[2]?
How will I achieve a similar column like this CSV column:
http://marialaustsen.com/columncsv.html
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>myGraph</title>
<!--
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" />
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>-->
<!-- Highcharts is already included in Highstock, so it is not necessary to load both. The highstock.js file is included in the package. -->
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<!-- But the separate files can't run in the same page along with each other or with highcharts.js. So if stock or maps are required in the same page as each other or with basic Highcharts, they can be loaded as modules: -->
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="height: 400px; width: 100%"></div>
<script>
$(function() {
console.log($);
$.getJSON('http://localhost:3000/recognition', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
type: 'column',
renderTo: 'container'
},
legend: {
enabled: true,
},
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF </span> <b>{point.series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>',
valueSuffix: ' k',
shared: true,
},
series: [{
name: 'Brands',
data: data
}],
rangeSelector: {
selected: 1,
inputDateFormat: '%Y-%m-%d',
floating: true,
y: -75,
verticalAlign: 'bottom'
},
title: {
text: 'Team members received and sent recognition'
},
navigator: {
margin: 50
},
xAxis: {
type: 'datetime',
title: {
text: 'DATES'
}
},
yAxis: {
title: {
text: 'BRANDS'
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
}, function(chart) {
// apply the date pickers
setTimeout(function() {
$('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker()
}, 0)
});
});
// Set the datepicker's date format
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText) {
chart.xAxis[0].setExtremes($('input.highcharts-range-selector:eq(0)').datepicker("getDate").getTime(), $('input.highcharts-range-selector:eq(1)').datepicker("getDate").getTime());
//this.onchange();
this.onblur();
}
});
});
</script>
</body>
</html>
You need to prepare your data - split it into 2 separate series:
series: (function() {
var series = [{
name: 'received recognition',
data: []
}, {
name: 'given recognition',
data: []
}];
data.forEach(function(p) {
series[0].data.push([p[0], p[1]]);
series[1].data.push([p[0], p[2]]);
});
return series;
})()
Live demo: http://jsfiddle.net/kkulig/88sr9ofn/
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 had tried to run the jqgrid using angularjs, but i did not get any output.
I had uses the following:
HTML
<html ng-app="myApp">
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link data-require="jqgrid#*" data-semver="4.5.2" rel="stylesheet" href="//cdn.jsdelivr.net/jqgrid/4.5.2/css/ui.jqgrid.css" />
<script data-require="jqgrid#*" data-semver="4.5.2" src="//cdn.jsdelivr.net/jqgrid/4.5.2/jquery.jqGrid.js"></script>
<script data-require="angular.js#*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/redmond/jquery-ui.css" />
<style type="text/css"></style>
<script src="ngtest.js">
</script>
</head>
<body ng-app="myApp" ng-controller="MyController">
<ng-jq-grid config="config" data="data"></ng-jq-grid>
</body>
</html>
Javascript
var myApp = angular.module("myApp", ["ui.bootstrap"]);
myApp.directive("ngJqGrid", function ($compile) {
return {
restrict: "E",
scope: {
config: "=",
data: "="
},
link: function (scope, element, attrs) {
var $grid;
scope.$watch("config", function (newValue) {
element.children().empty();
$grid = angular.element("<table id='" + $.jgrid.jqID() + "'></table>");
element.append($compile($grid)(scope));
element.append($grid);
angular.extend(newValue, {
autoencode: true,
iconSet: "fontAwesome",
cmTemplate: { autoResizable: true },
autoResizing: { compact: true },
autoresizeOnLoad: true,
loadComplete: function () {
$compile(this)(scope);
}
});
angular.element($grid)
.jqGrid(newValue)
.jqGrid("navGrid")
.jqGrid("filterToolbar");
});
scope.$watch("data", function (newValue, oldValue) {
$grid.jqGrid("clearGridData");
$grid.jqGrid("setGridParam", {data: newValue});
$grid.trigger("reloadGrid");
});
}
};
});
myApp.controller("MyController", function ($scope) {
$scope.config = {
myClick: function (rowid) {
alert("Test buton is clicked on rowid=" + rowid);
},
colNames: ["Client", "", "Date", "Closed", "Shipped via", "Amount", "Tax", "Total", "Notes"],
colModel: [
{ name: "name", align: "center", width: 65, editrules: {required: true},
searchoptions: { sopt: ["tcn", "tnc", "teq", "tne", "tbw", "tbn", "tew", "ten"] }},
{ name: "myLink", align: "center",
formatter: function (cellvalue, options, rowObject) {
return "<button class='btn btn-primary' popover-placement='top' popover='" +
rowObject.note + "' ng-click='config.myClick(" + options.rowId + ")'>Test</button>";
}},
{ name: "invdate", width: 125, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "d-M-Y" },
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
{ name: "closed", width: 70, template: "booleanCheckboxFa" },
{ name: "ship_via", width: 105, align: "center", formatter: "select",
edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } },
{ name: "amount", width: 75, template: "number" },
{ name: "tax", width: 52, template: "number", hidden: true },
{ name: "total", width: 60, template: "number" },
{ name: "note", width: 60, sortable: false, edittype: "textarea" }
]
};
$scope.data = [
{ id: "11", invdate: "2007-10-01", name: "test", note: "note", amount: 0, tax: 0, closed: true, ship_via: "TN", total: 0 },
{ id: "21", invdate: "2007-10-02", name: "test2", note: "note2", amount: 351.75, tax: 23.45, closed: false, ship_via: "FE", total: 375.2 },
....etc
];
});
Fiddle
You have a lot of things going on:
You need to load external resources on the left panel when using jsfiddle.
When using jsfiddle you do not include a header it is automatically included in the output
You didn't include the angular-ui-bootstrap javascript files that you have as a dependency
You are using an older version of angular which does not pair with angular-ui-bootstrap, I updated the angular dependency to 1.3.20 to get things to run
When using jsfiddle with angular you need to select No wrap - in <body> from the options on the left or it will not run angular.
You are trying to bind the app to the DOM twice, you only need one ng-app="myApp"
And you have functions you are calling such as initDateEdit and initDateSearch which where not defined
All that being said, making these changes the app will load in jsfiddle.
Working Fiddle
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/
I passed json encoded string(eg. $TEXT2 consisting ["chrome","15","firefox","20"]) from xcode to an array(eg. arr) in javascript.Now I want to pass this array containing json string dynamically to Highcharts Pie. The HTML code is
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=20, user-scalable=no;" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pie chart</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
var chart;
var arr = $TEXT2;
$(document).ready(function(){
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Interactive Pie'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: []
}]
});
});
</script>
<body>
<br>
<!-- 3. Add the container -->
<div id="container" style="width: 300px; height: 350px; margin: 0 auto"></div>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
</body>
</html>
I am trying to use getjson method although m unaware of its usage.
Since i want to pass my array i.e arr to data[] in Highcharts,I am doing:
$.getJSON("arr", function(json) {
chart.series = json;
var chart = new Highcharts.Chart(chart);
});
Can anyone help me on dis.
Thanks in advance.
I would wrap the JSON call in the document.ready function and then wrap the plot call in the getJSON's success callback:
$(document).ready(function() {
$.getJSON("arr", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Interactive Pie'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
},
series: [{
type: 'pie',
name: 'Browser share',
data: json
}]
});
});
});
Of course for this to work, you should modify your backend code to return a properly formatted array of arrays that HighCharts expects:
[["chrome",15],["firefox",20]]
You could "fix" your returned array in the JS, but it would be better to do it in the JSON backend call.
<script type="text/javascript">
jQuery(document).ready(function () {
alert('call pie');
var data1 = $("#dataidd").val();
alert('pie data' + data1);
/*--------Pie Chart---------*/
$('#PieChartDiv').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Comparision and Analysis Report'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Issue Details',
// data: jQuery.parseJSON(data1)
data: JSON.parse(data1)
}]
});
});
</script>
Simply do :
Create array with Jquery as bellow :
$.each(data['values'], function(i, val) {
x_values_sub['name'] = i
x_values_sub['y'] = val
x_values.push(x_values_sub);
x_values_sub = {};
});
// Then call this array with HighCharts as data
series: [{
type: 'pie',
name: null,
data: x_values
}]
// Tested and it works with simple javascript object :
Object Part1Name: 25 Part2Name: 75__proto__: Object
You can bind chart with JSON data, directly. You just need to set the json property names as highchart standard. 'Y' for value and 'name' for label.
Your JSON should be as like follow:
[ { name: "Chrome", y: 25 }, { name: "Firefox", y: 20 } ]