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
- Cannot set bar chart width for specific data, Highcharts
- line and column chart in grouped categories in highcharts
- Highcharts: First X Point over the YAxis
- highcharts axis format decimal point
- getting csv data into highcharts
- Highcharts not aligning to ticks
- Toggle connectNulls with button
- how to determine the width of every column series present in the chart- highhcarts
- Highchart's error : Uncaught SyntaxError: Unexpected token for
- HIghcharts, Selecting a second Point within the Point.select event
- Highcharts percentage of total for simple bar chart
- How to add icon/svg/image on X-axis for bar graph onclick event using highcharts?
- Highcharts: Draw line from marker to axis?
- Highchart categories issues
- How can i place a button always center of the graph
- How do you remove x-axis labels from a highchart.js bar chart
- Highcharts - How to format yAxis label to have single digit?
- Display 100 Points in 1 second : Highcharts
- RevealJS and Highchart Mouse position Tooltip Issue
- Highcharts overlay multiple datetime series
- Highcharts 3 cannot render more than 1000 points in one series
- Colors doesn't change using Highcharts.setOptions
- Enable Annotation Buttons using R's Highcharter Library
- How to set border for a highcharts pie?
- Highcharts x-axis cannot be seen when range is huge
- Export Jquery chart to csv,pdf and excel
- Does this qualify for the Highstock NON-COMMERCIAL LICENSE?
- Hide the zero values in a Scatter/Column chart in highcharts
- IE8 Errors On chart.destroy()
- Size of graph in highcharts