I am working on an angular.js application that displays various widgets in a dashboard. One of these widgets uses a Highcharts half-doughnut. I have created a prototype in straight HTML and it works as expected. I am now porting things over to my angular.js application using highcharts-NG. Everything in my widget is displaying EXCEPT the half-doughnut. Here is the code from my partial:
<div class="row container">
<div class="col-md-2 greyBack loanWidget">
<div class="calendarContainer">
<div class="calendarTitle">{{myLoan.LoanStatus.Month}}</div>
<div class="calendarDay">{{myLoan.LoanStatus.Day}}</div>
<div class="calendarYear">{{myLoan.LoanStatus.Year}}</div>
</div>
</div>
<div class="col-md-4 greyBack loanWidget" style="min-width: 200px; margin: 0; max-width: 200px; max-height: 300px; vertical-align: top;">
<div ng-controller="LoanStatusChart">
<highchart id="chart1" config="highchartsNG"></highchart>
</div>
</div>
<!--<div id="container" class="col-md-4 greyBack loanWidget" style="min-width: 200px; margin: 0; max-width: 200px; max-height: 300px; vertical-align: top;"></div>-->
<div class="col-md-3 greyBack loanWidget balance">
<span class="balanceText">{{myLoan.LoanStatus.OriginalPrincipalBalance}}</span><br />
<span class="balanceTextLabel">Outstanding Balance</span><br />
<span class="borrowedText">{{myLoan.LoanStatus.BorrowedAmt}}</span><br />
<span class="borrowedTextLabel">Borrowed</span>
</div>
<div class="col-md-3 loanWidget"><img src="../images/c4l/cfl-banner.png" /></div>
</div>
Here is the code in my controller:
cflApp.controller('LoanStatusChart', function ($scope) {
$scope.options = {
type: 'pie',
colors: ['#971a31', '#ffffff']
}
$scope.swapChartType = function () {
if (this.highchartsNG.options.chart.type === 'line') {
this.highchartsNG.options.chart.type = 'bar'
} else {
this.highchartsNG.options.chart.type = 'line'
}
}
$scope.highchartsNG = {
options: {
plotOptions: {
pie: {
borderColor: '#000000',
size: 115,
dataLabels: {
enabled: false,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black',
}
},
startAngle: -90,
endAngle: 90,
center: ['30%', '75%']
}
},
colors: ['#971a31', '#ffffff'],
chart: {
type: 'pie',
backgroundColor: '#f1f1f2',
height: 150
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Hello',
style: {
color: '#971a31',
fontWEight: 'bold',
fontSize: '15px'
},
verticvalAlign: 'middle',
y: 20,
x: -24
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
series: [{
type: 'pie',
name: 'Loan',
innerSize: '50%',
data: [
['85% paid', 85],
['15% owed', 15]
]
}],
loading: false
}
});
My two questions are:
Why won't this display?
Currently the data is "hard-coded" in these lines:
series: [{
type: 'pie',
name: 'Loan',
innerSize: '50%',
data: [
['85% paid', 85],
['15% owed', 15]
]
}],
How can I set this up so I can pass in the percentages? These come from another controller as you can see in the code in my partial.
UPDATE: I have managed to get the chart area to populate with something by adding Jquery prior to the Highcharts.js. However, it is ignoring every single option I pass to it and simply displaying "Chart Title" and a very tall div where the chart should be. Ideas?
I tried your code its running fine. Might be you have some javascript file ordering or CSS issue. Be sure to follow the correct order
jquery
Highcharts.js
AngularJS
Highchart-ng.js
Secondly you declared series:[{}]object twice in your chart configuration.
Here's the fiddle you can check your code here http://jsfiddle.net/Hjdnw/1018/
Related
I need to know how to apply css styles for a notify.js alert.
Here's my code -
$.notify({
message: "Alert!"
}, {
type: 'danger',
animate: {
enter: 'animated fadeInUp',
},
placement: {
from: "top",
align: "center"
},
offset: 20,
spacing: 10,
z_index: 1031,
});
I need to apply some styles for this.
$.notify({
message: "Alert!"
}, {
type: 'danger',
animate: {
enter: 'animated fadeInUp',
},
placement: {
from: "top",
align: "center"
},
offset: 20,
spacing: 10,
z_index: 1031,
style: 'addClassName'
});
then a structure like this will be constructed in html for notifiy
<div class="notifyjs-addClassName-base notifyjs-addClassNamesuccess">
<div class="clearfix">
<div class="title" data-notify-html="title">Would you like some Foo ?
</div>
<div class="buttons">
<button class="no">Cancel</button>
<button class="yes" data-notify-text="button">Confirm</button>
</div>
</div>
</div>
and thereafter you can create 1 css filr as per your need and add css making this .notifyjs-addClassName-base as the base class
.notifyjs-addClassName-base{
}
http://jsfiddle.net/Kondaldurgam/akb4Lj61/
i want name of the tittle in inside the box presently i don't have date with me so, i want to put the name of the tittle in inside the box.
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 'No Date Available'
},
});
in case of no data for highcharts you may use this plugin
no-data-to-display.js
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 'No Date Availavle'
},
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div>
How could I set a horizontal title for X axis and a vertical title for axis Y in Kendo chart ?
For example , for this chart I want to set titles (Month and VISITORS) as in this image -
valueAxis:[{
title: {
text: "My Text X"
}
}],
title:{
text: "My Text Y",
position: "bottom"
}
Thanks for this, it was very helpful when solving my problem, which was similar. I edited the example accordingly: http://dojo.telerik.com/OBOZefEr/2 I've put the entire code snipped below, you're welcome to run it from here.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/bar-charts/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "Site Visitors Stats \n /thousands/"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "Total Visits",
data: [56000, 63000, 74000, 91000, 117000, 138000]
}, {
name: "Unique visitors",
data: [52000, 34000, 23000, 48000, 67000, 83000]
}],
valueAxis: {
max: 140000,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto"
},
title: {
text: "VISITORS"
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
majorGridLines: {
visible: false
},
title: {
text: "Month"
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
I'm using highcharts to create a donut chart. The colours for each section are defined in the options passed via JS.
self.chartView = new Donut({
el: this,
colors: ['#96c6e3','#d8c395','#7fb299','#c693c3'],
data: $(this).data('series')
});
I would like to define these colours in CSS and then grab them for donut chart. Something along the lines of:
CSS
#color1{
background-color: #96c6e3;
}
JS
self.chartView = new Donut({
el: this,
colors: [$('#color1').css('background-color') ],
data: $(this).data('series')
});
But I'm not even sure this is possible.
For example, see this code snippet:
$(function() {
var colors = [
$('#color1').css('background-color'),
$('#color2').css('background-color')
];
$('#container').highcharts({
colors: colors,
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8]
]
}]
});
});
#color1 {
background-color: #96c6e3;
}
#color2 {
background-color: red;
}
#colors {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="colors">
<div id="color1"></div>
<div id="color2"></div>
</div>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
I am having an issue with Google API's Combo Chart control in IE8. I can't seem to get the fonts correct for the chart.
This is my function that draws the chart: (all fonts explicitly called out here, I've also attempted to only set it on the iframe property (that is only used in IE8))
function drawChart() {
var options = {
fontName: 'Arial',
slantedText: false,
titleTextStyle: { fontName: 'Arial', slantedText: false },
title: 'PLMs for Period',
tooltip: { textStyle: { fontName: 'Arial', italic: false, fontSize: 24} },
vAxis: { title: '# of PLM\'s', titleTextStyle: { fontName: 'Arial', slantedText: false, fontSize: '24', bold: true} },
hAxis: { title: 'Plant Location', titleTextStyle: { fontName: 'Arial', slantedText: false, fontSize: '24', bold: true} },
seriesType: "bars",
series: { 5: { type: "line"} },
backgroundColor: '#F2F2F2',
titleTextStyle: { fontSize: '28' }
};
var arrayTable = google.visualization.arrayToDataTable(chartData);
var chart = new google.visualization.ComboChart(document.getElementById('chart-container'));
chart.draw(arrayTable, options);
}
Here is the relevant HTML Code:
<div id="report-container">
<h3 id="period-information"></h3>
<div id="report-content">
<h3 id="InProgressStart-header"></h3>
<div class="accordion-content" id="InProgressStart-content">
</div>
<h3 id="Launched-header"></h3>
<div class="accordion-content" id="Launched-content">
</div>
<h3 id="Completed-header"></h3>
<div class="accordion-content" id="Completed-content">
</div>
<h3 id="InProgressEnd-header"></h3>
<div class="accordion-content" id="InProgressEnd-content">
</div>
<h3 id="Rejected-header"></h3>
<div class="accordion-content" id="Rejected-content">
</div>
</div>
<center><div id="chart-container" style="width: 100%; height: 500px;"></div></center>
</div>
Here is an example of the data being passed in:
[
["Plant Location", "In Progress at Start", "Launched", "Completed", "In Progress at End", "Fully Rejected"],
["Example 1", 17, 6, 8, 15, 1],
["Example 2", 19, 5, 8, 14, 2],
["Example 3", 12, 6, 3, 14, 1]
]
Here are the styles that involve fonts:
iframe
{
font-family: "Arial, sans-serif";
}
body {
color: #333;
font-size: 16px;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
padding: 20px;
margin: 0 auto;
height: auto;
max-width: 1200px;
min-width: 500px;
background: #F2F2F2;
}
Let me know if you need any more information. I've done a bit of research on my own and seen that IE is dependent on the OS's fonts, but it should still render 'Arial' correctly.
I found a workaround on Google Groups. When entering fontName's into Google API Visualization controls, enter the value wrapped in double quotes, and then single quotes. Like this: '"fontName"', this makes it render correctly in IE8. (Fix found here: https://groups.google.com/forum/#!topic/google-visualization-api/ESS5mDoqrc0)
Google does know about this issue, but doesn't plan on fixing it. This is the response from Google: "We're sorry about it, but don't know what can be done. IE <= 8 doesn't support SVG, so VML is used. More over, VML support in IE is deteriorating, and fonts handling is particularly problematic. IE9 finally supports SVG and I think this works fine there, but we were unable to fix the issues for IE <= 8." (from: https://code.google.com/p/google-visualization-api-issues/issues/detail?id=427)