score:1
app.directive('hcchart', function () {
return {
restrict: 'a',
template: '<div></div>',
scope: {
options: '='
},
link: function (scope , element, attribute) {
highcharts.chart('chart', {
chartoptions: {
type: 'line'
},
title: {
text: 'temperature data'
},
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]
}]
});
}
}
});
<div id="chart" hc-chart>placeholder for generic chart</div>
score:30
alternative implementation here: http://jsfiddle.net/pablojim/cp73s/
this uses https://github.com/pablojim/highcharts-ng
this allows you to create a highchart with the below html:
<highchart id="chart1" series="chart.series" title="chart.title" options="chart.options"></highchart>
in the above case chart.series
is an array of javascript objects representing the series on the chart - these take standard highcharts options. these are then watched by angularjs for any changes.
chart.options
is the highcharts initalisation options - also watched for changes. although changes to this recreate the entire chart.
chart.title
is the highcharts title object - also watched for changes.
score:50
example of pie chart:
function myctrl($scope, limittofilter) {
$scope.ideas = [
['ideas1', 1],
['ideas2', 8],
['ideas3', 5]
];
$scope.limitedideas = limittofilter($scope.ideas, 2);
}
angular.module('myapp', [])
.directive('hcpie', function () {
return {
restrict: 'c',
replace: true,
scope: {
items: '='
},
controller: function ($scope, $element, $attrs) {
console.log(2);
},
template: '<div id="container" style="margin: 0 auto">not working</div>',
link: function (scope, element, attrs) {
console.log(3);
var chart = new highcharts.chart(options);
scope.$watch("items", function (newvalue) {
chart.series[0].setdata(newvalue, true);
}, true);
}
}
});
Source: stackoverflow.com
Related Query
- Rendering Highcharts using Angular js Directives
- Rendering more than one chart with Highcharts using Angular js Directives
- Getting error while using highcharts in Angular 7
- Not rendering VU-meter Gauge chart using HighCharts in Durandal
- Using PhantomJS to create HighCharts grahps server side for use in PDF creation (PHP) - results in exit code 11 from PHPs exec();
- Angular JS - "Error: [$interpolate:interr] Can't interpolate:" when using Highcharts
- creating a bar chart using Highcharts with React - getting an error that rendering div isn't found
- Angular rendering 80+ using highcharts-ng
- How to set 'lang' property in Highcharts using Angular JS?
- Local Angular library using Highcharts breaks in production mode
- Creating Highcharts with Angular using Highcharts >= 5.0.0 and highcharts-ng >= 1.0.0 using a ChartFactory
- Highcharts smooth transition on data update using Angular and ng-highcharts
- dynamic highchart config in angular ui grid with angular js using pablojim's highcharts ng
- Render Two charts separate charts using angular js directives
- Highcharts display label for pie chart using html table as data source
- Getting error while using pattern in Angular Highcharts
- Error using Highcharts (>= 8.0.1) function stockChart() in Angular
- Two way data binding in Angular JS for graphs implemented using HighCharts
- Getting Highcharts tooltip to return an angular directive using templeteUrl?
- Angular 4 using highcharts gauge
- HTML table as data source for highstock charts using highcharts
- Highcharts charts on a page not rendering correctly when output to PDF using wkhtmltopdf
- add chart using highcharts to angular via highcharts-ng directive
- Highcharts using Directives in AngularJS
- Using a flask variable as data source for highcharts
- Is there any way to highlight the node on search in network chart when using highcharts in angular application
- chartOptions.redraw is not a function in highcharts using angular
- How to use Highcharts regression plugin to plot a trend line using angular 8 wrapper
- Angular 9 Highcharts - when using series of type pie with type gauge the innerSize of pie is not working
- How to create charts like below using highcharts in angular
More Query from same tag
- Highcharts formats differently in Safari vs Chrome
- (Highcharts) Polygon-like shell in polar chart
- Y-Axis Series is Duplicated in Highcharts
- Highcharts spider chart intersect issue
- Connect two different values with vertical line in highcharts
- Adding Y-Axis dynamically
- Child component not loading correctly in ngFor (but updates after resizing windows)
- Highchart Array From Ajax
- How to convert current xhtml page with javascript charts to pdf
- Rails - speed and time
- Unable to display x-axis labels on multi-column mysql array in Highcharts
- formatting x-axis labels in highchart
- How create time line chat with selectable year dropdown
- Highcharts, set halo on select in pie chart
- Highchart UTC date always set to January, 1 1970
- Highchart Click Event
- Chart issues with *ngIf in angular 2
- Highstock doesn't support custom (3 days) tickInterval with formatting
- Highcharts | Line height control for plot band labels in styled mode
- Highmaps limit zoom range breaks zooming out
- How to position heatmap legend title in different position?
- Access another series row's data on Highchart dataLabels
- How do I get remove of 'data table' option from High chart export
- Highcharts - How show only two series on click
- Variwide charts in Highcharter
- How do I send javascript on ajax request?
- allowOverlap property for Highcharts JS v3.0.10
- if statement for Highcharts xAxis labels
- codeigniter with Highcharts- data not coming controller to view
- Passing a python's script object to Django's views.py