We Keep Coding

Highcharts zones feature for imported text file

I'm trying to have zones within my graph that change color when the value exceeds a particular threshold.
Here is my graph:
The Highchart resources have an example for how to do this:
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/color-zones-simple/
My problem however, is that I can't find an example anywhere for how to do it when your Highchart is importing the data from a text file.
I've styled my chart pretty heavily so this is my highchart code snippet:
$(function () {
// Load the fonts
Highcharts.createElement('link', {
href: 'http://fonts.googleapis.com/css?family=Signika:400,700',
rel: 'stylesheet',
type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);
// Add the background image to the container
Highcharts.wrap(Highcharts.Chart.prototype, 'getContainer', function (proceed) {
proceed.call(this);
this.container.style.background =null;
});
Highcharts.theme = {
colors: ['#5B8256'],
chart: {
backgroundColor: null,
style: {
fontFamily: "Arial, Helvetica, sans-serif"},
plotBorderColor: '#606063'},
title: {
style: {
color: '#eeeeee',
fontSize: '16px',
fontWeight: ''}},
subtitle: {
style: {
color: '#eeeeee'}},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {color: '#F0F0F0'},
borderWidth: 0},
legend: {
itemStyle: {
fontWeight: 'bold',
fontSize: '13px'}},
xAxis: {
labels: {
style: {
color: '#eeeeee'}}},
yAxis: {
labels: {
style: {
color: '#eeeeee'}}},
plotOptions: {
series: {shadow: true},
marker: {lineColor: '#333'},
candlestick: {lineColor: '#404048'},
map: {shadow: false}},
navigator: {
xAxis: {gridLineColor: '#D0D0D8'}},
rangeSelector: {
buttonTheme: {fill: '#eeeeee',stroke: '#C0C0C8','stroke-width': 1,
states: {
select: {fill: '#D0D0D8'}}}},
scrollbar: {trackBorderColor: '#eeeeee'},
background2: null};
Highcharts.setOptions(Highcharts.theme);
var options = {
chart: {
zoomType: 'x',
renderTo: 'container',
defaultSeriesType: 'column',
resetZoomButton: {
theme: {display: 'none'}}},
title: {
text: 'Max Pressure Today:',
style: {
fontSize: '14px',opacity: 0,
style: {color: '#'}}},
xAxis: {type: 'datetime'},
yAxis: [{ // Primary yAxis
labels: {format: '{value}',
style: {color: '#eeeeee'}},
title: {
text: '',
style: {color: '#1E1E1E'}},
opposite: false},],
legend: {enabled: false},
tooltip: {shared: true,valueSuffix: ' psi'},
plotOptions: {
column: {pointPadding: 0.2,borderWidth: 0},
series: {name: 'Pressure',pointStart: Date.UTC(2016, 10, 7),pointInterval: 12 * 3600 * 1000}},
series: []};
$.get('demo-data.txt', function(data) {
var lines = data.split('\n');
lines = lines.map(function(line) {var data = line.split(',');
data[1] = parseFloat(data[1]);return data;});
var series = {data: lines};
options.series.push(series);
var chart = new Highcharts.Chart(options);});});
Any help pointing me in the right direction would be appreciated.

You can add zones by plot-options, for example:
plotOptions: {
series: {
zones: [{
value: 20,
color: '#7cb5ec'
}, {
color: '#90ed7d'
}],
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/5w9rvonz/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.zones

Using angularjs to create a function that returns Highcharts chart

I'm still fairly new to angularjs and highcharts, what i'm trying to do is instead of declaring each chart in javascript manually, i want to send a few parameters to an angularjs function and that function returns a chart object and be rendered onto the div.
When i try the code with angularjs, it doesn't work, i create the charts main and chart1 by 'hand', using the function i created to make chart2 it's not rendering.
here is just the angularjs code:
var App = angular.module('App', []).factory('Chart', function() {
return {
crearGrafica: function(chartName, percent, estado, localidad) {
return new Highcharts.Chart({
exporting: {
enabled: false
},
credits: {
enabled: false
},
chart: {
backgroundColor: 'rgba(255, 255, 255, 0.1)',
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
renderTo: chartName,
polar: true,
type: 'line'
},
title: {
},
subtitle: {
text: percent + '%',
align: 'center',
verticalAlign: 'middle',
y: 40
},
tooltip: {
enabled: false,
},
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
},
pie: {
dataLabels: {
enabled: false,
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
}
},
series: [{
type: 'pie',
name: '',
innerSize: '40%',
data: [
['', indice], {
name: 'Referencia100%',
y: (100 - percent),
sliced: false,
selected: true,
visible: true,
color: 'rgba(255, 255, 255, 0.9)'
},
]
}]
});
}
}
});
function chartController($scope, crearChart) {
//not working
chart2 = Chart.crearGrafica('chart2', 66, '', '');
}
App.controller('appCtrl', function($scope, $http) {
var chartMain;
var chart1;
var chart2;
var chart3;
var chart4;
//not working either
chart2 = Chart.crearGrafica('chart2', 66, '', '');
});
here is a punkler i made, i tried to make it the most simple as posible.
http://plnkr.co/edit/lfGoc39zJhMp695fGIyO?p=preview

How to make a Highcharts semi-circle donut chart using Hightchart-ng

I am attempting to create a Highcharts Semi-circle donut chart in my angular application. I have installed the Highcharts-ng directive. For whatever reason, it appears to be skipping the plotOptions section completely and that is where the start and end angle are set, thereby creating the donut. What I get is a full circle pie chart. Here is my code:
<div ng-app="myapp">
<div ng-controller="myctrl">
<highchart id="chart1" config="highchartsNG"></highchart>
</div>
</div>
//See: https://github.com/pablojim/highcharts-ng
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', 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: {
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>'
},
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%']
}
},
series: [{
type: 'pie',
name: 'Loan',
innerSize: '50%',
data: [
['85% paid', 85],
['15% owed', 15]
]
}],
loading: false
}
});
I have created a JSFiddle here:
http://jsfiddle.net/mikemahony/hzdewsx8/
What am I missing?

Highcharts-ng directive needs those properties to go under options.
$scope.highchartsNG = {
options:{
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
}
}
},
In highchartsNGConfig the options property is a standard highcharts options object. e.g. anything you can pass into `new Highcharts.Chart(options); works here.
This options object is watched for changes. When something changes here the whole chart is recreated.

I need help using a variable to populate a table to create a Javascript scatter plot

I am trying to use this Javascript to create a scatter plot: http://www.highcharts.com/demo/scatter/gray
Im using it just like it shows there and when i copy the graph with the info from the example it works fine.
I created a function to populate the table to how I want...this is how my code looks
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
<script>
var rateValueData = <?php echo json_encode($data);?>;
$(function (scatter) {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
data: THIS IS WHERE I NEED TO USE THE VARIABLE!!!!
}, ]
});
});
</script>
so the function to create the Variable works but then how can i use that variable to populate the data for the graph
This is what the variable displays at when I echo it out:
var rateValueData = [["7.59090","104.2"],["1.58181","101.3636364"],["0.86363","106.5090909"],["0.7","73.86363636"],["2.7","94.38571429"],["2.48333","104.4727273"],["22.45","103"],["4.09090","105.3888889"],["1.91818","102.2909091"],["1.85","94.82727273"],["62.1","102.7666667"],["6.31818","100.7454545"],["2.31818","107.9545455"],["5.8","99.9625"],["1.92727","105.4727273"],["1.1","102.3"],["16.95","99.40909091"],["0.6","96.35"],["81.68","103.7909091"],["11.5818","116.7363636"],["2.64545","104.8111111"],["1.72","105.73"],["1.24545","104.9272727"],["1.35454","101.9363636"],["32.6363","99.05"],["15.5727","102.05"],["0.8","103.6"],["2.37272","109.7818182"],["0.9","99.62727273"],["4.05454","93.06363636"],["1.1","101.2272727"],["2.70909","102.5888889"],["1.35454","106.3363636"],["41.2181","101.3375"],["0.52727","104.4363636"],["14.8818","107.3909091"],["2.18333","98.82727273"],["3.7","66.70909091"],["10.3272","113.5545455"],["2.31428","96.51818182"],["1.14","101.7727273"],["11.9727","102.4272727"],["1.68571","101.3727273"],["1.48181","102.1454545"],["1.3","103.5181818"],["12.3090","100.8545455"],["0.91818","101.9272727"],["6.51","92.75"],["10.7818","98.05"],["21.46","97.95"],["8.35","98.85"],["7.6625","98.53"],["2.79090","106.1909091"],["1.17","107.3090909"],["19.9181","107.6909091"],["0.61666","50.03636364"],["2.68181","104.5818182"],["1.11428","80"],["1.93333","105.0454545"],["0.84545","99.36"],["2.46363","105.8714286"],["1.49090","104.9272727"],["50.4545","106.6636364"],["1.24545","103.9363636"],["1.01818","102.1636364"],["1.12727","104.7090909"],["2.22222","96.01818182"],["7.83636","101.4090909"],["4.5","98.98181818"],["8.99090","116.1571429"],["1.67272","105.1545455"],["6.25","106.5727273"]];
That is the data that I need to plot in the scatter chart.
Can anybody help me out?
Let me know if you need more info

The problem is your array contains string instead of numeric value.
Try with
var rateValueData = [[7.59090,104.2],[1.58181,101.3636364],[0.86363,106.5090909],[0.7,73.86363636],[2.7,94.38571429],[2.48333,104.4727273],[22.45,103],[4.09090,105.3888889],[1.91818,102.2909091],[1.85,94.82727273],[62.1,102.7666667],[6.31818,100.7454545],[2.31818,107.9545455],[5.8,99.9625],[1.92727,105.4727273],[1.1,102.3],[16.95,99.40909091],[0.6,96.35],[81.68,103.7909091],[11.5818,116.7363636],[2.64545,104.8111111],[1.72,105.73],[1.24545,104.9272727],[1.35454,101.9363636],[32.6363,99.05],[15.5727,102.05],[0.8,103.6],[2.37272,109.7818182],[0.9,99.62727273],[4.05454,93.06363636],[1.1,101.2272727],[2.70909,102.5888889],[1.35454,106.3363636],[41.2181,101.3375],[0.52727,104.4363636],[14.8818,107.3909091],[2.18333,98.82727273],[3.7,66.70909091],[10.3272,113.5545455],[2.31428,96.51818182],[1.14,101.7727273],[11.9727,102.4272727],[1.68571,101.3727273],[1.48181,102.1454545],[1.3,103.5181818],[12.3090,100.8545455],[0.91818,101.9272727],[6.51,92.75],[10.7818,98.05],[21.46,97.95],[8.35,98.85],[7.6625,98.53],[2.79090,106.1909091],[1.17,107.3090909],[19.9181,107.6909091],[0.61666,50.03636364],[2.68181,104.5818182],[1.11428,80],[1.93333,105.0454545],[0.84545,99.36],[2.46363,105.8714286],[1.49090,104.9272727],[50.4545,106.6636364],[1.24545,103.9363636],[1.01818,102.1636364],[1.12727,104.7090909],[2.22222,96.01818182],[7.83636,101.4090909],[4.5,98.98181818],[8.99090,116.1571429],[1.67272,105.1545455],[6.25,106.5727273]];
This demo is throwing an error
While this is working

Customizing the colors of individual series in HighCharts

I am using HighCharts for a line graph and i am attemping to change the line color for each series. I did find this example here but the data is hard coded. My data is pulled from an Sql database and passed to the HTML page using some VB code.
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Chart Title'
},
subtitle: {
text: 'Chart subtitle'
},
xAxis: {
categories: [<%= GraphDate %>]
,
labels:
{
rotation: -45,
align: 'right',
style:
{
}
}
},
yAxis: {
min: 160,
title: {
text: 'Temp'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 400,
y: 0,
floating: true,
shadow: true
},
tooltip: {
formatter: function () {
return '' +
this.x + ': ' + this.y + ' ºC';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series:
[<%= GraphSeries %>],
});
I tried to style it using the other post however it failed to generate a chart. The main problem is though, the line graph has two series, so the below method would set the color for both series i assume? So, would i maybe need to format the series in my vb code somehow?
series: [{
color: 'yellow',
data: [
[<%= GraphSeries %>]
]},
Edit:
$(document).ready(function () {
chart = new Highcharts.Chart({
colors: ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92']
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
}

Top level config can contain colors field. It's an array from which series colors will be picked.
See here.
Here's working piece from my project
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart:{
renderTo:'perfchart',
type:'line',
marginRight:130,
marginBottom:25
},
colors: ['#0000FF', '#0066FF', '#00CCFF'],
title:{
text:'Historical system performance',
x:-20 //center
},
Appearance:

See the code (and the plot that it renders) below.
The snippet below is a complete script--i.e., either put it in your markup between two script tags or as a stand-along js file with an includes in your markup.
Colors is a Chart object so the easiest way is to pass an array of colors (as hex strings):
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
colors: ['#562F1E', '#AF7F24', '#263249', '#5F7F90', '#D9CDB6'],
title: {
text: false
},
yAxis: {
title: {
text: false
}
},
series: [{
name: 'series I',
data: [17.4, 16.1, 19.45, 24.15, 28.44, 33.15, 37.2, 41.25, 43.3]
},
{
name: 'series II',
data: [13.19, 17.23, 25.74, 28.5, 33.9, 35.62, 37.0, 36.6, 34.82]
}
]
});
});
})

The color can be configured as part of the series. Try something like this:
series: [
{
name: 'series I',
color: '#ffffff',
data: [17.4, 16.1, 19.45, 24.15, 28.44, 33.15, 37.2, 41.25, 43.3]
}
];