We Keep Coding

Highcharts Windbarb with ajax data loading

OK. Rephrasing an unanswered earlier question.
I have a chart as shown below with the data loading dynamically through ajax.
A simplified version (without ajax) of this graph works fine as shown in this jsfiddle.
The code below is the chart as I use it, straight from its context.
The idea is there are several timeseries (x-axis) in the graph and I wish to display the wind characteristics of speed and direction at those same times through windbarbs. The windbarbs take two arguments at each defined x-value all other series take one argument (the y-axis).
My question is: why doesn't it work (why the stackdump) while it does work in jsfiddle (without the ajax call and thus without the addSeries call?
As a derivative: in the jsfiddle the onSeries attribute does not work. What is wrong there?
And finally: is it possible to get the windbarbs above the series graphs and not fixed on the x-axis?
The problem seems to be in the loading of the wind data after the loading of the other series. As that part is in the ajax call with the (idx == 'wind') condition it is quite easy to spot. It breaks in the setData call of highStock with the following stackdump:
Uncaught TypeError: r is undefined
setData highstock.src.js:33902
init highstock.src.js:33182
init highstock.src.js:54816
init windbarb.src.js:361
initSeries highstock.src.js:27886
addSeries highstock.src.js:36888
fireEvent highstock.src.js:2112
addSeries highstock.src.js:36887
success line 2 > injectedScript:176
success line 2 > injectedScript:171
jQuery 6
doSensorIn2p5 line 2 > injectedScript:162
SetGraphView0 line 2 > injectedScript:276
onclick (index):1
Without the wind data it works fine.
var doSensorIn10 = function(){
let ReferenceColours = ['#79bc6a', '#bbcf4c', '#eec20b', '#f29305', '#960018' ];
let ReferenceConcentrations10 = [0,25,50,90,180];
let t ={chart: { renderTo: 'chartcontainerIn10',type: 'spline',alignTicks: false, zoomType: 'xy', pinchType: 'xy'},
title: { text: 'AirQuality Sensor In for PM10'},
credits: { enabled: true},
xAxis: { type: 'datetime', ordinal: false, dateTimeLabelFormats: { day: '%e %b',week: '%e %b %y',month: '%b %y',year: '%Y'} },
yAxis:
[{
title: { text: 'Luchtkwaliteit (μg/m3)'},
opposite: false, labels: { align: 'right',x: -5},
},
{
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: { text: null},
labels: { align: 'left',x: 5},
tickInterval: 20
}],
legend: { enabled: true},
tooltip: { valueSuffix: 'μg/m3',valueDecimals: 1,xDateFormat: '%A, %b %e, %H:%M'},
series:[],
rangeSelector:
{
buttons:[{ count: 6,type: 'hour',text: '6h'},
{ count: 12,type: 'hour',text: '12h'},
{ type: 'all',text: 'All'}],
inputEnabled: false
}
};
let chart = new Highcharts.StockChart(t);
chart.showLoading();
$.ajax({
url: 'airlinkdataIn10.json',
cache: false,
dataType: 'json',
success: function(resp){
let titles = {
'In_pm10': 'In_pm10','In_pm10_1hr': 'In_pm10_1hr','In_pm10_3hr': 'In_pm10_3hr','In_pm10_24hr': 'In_pm10_24hr','In_pm10_nowcast': 'In_pm10_nowcast','wind': 'wind'}
let idxs = ['In_pm10','In_pm10_1hr','In_pm10_3hr','In_pm10_24hr','In_pm10_nowcast','wind']
let cnt = 0;
idxs.forEach(function(idx) {
console.log('idx = ' + idx);
if (idx in resp) {
if (idx == 'wind') {
console.log('Doing Wind correctly : Before addSeries');
chart.addSeries({name: titles[idx], type: 'windbarb', showInLegend: false, onSeries: 'InPM2p5', tooltip: {valueSuffix: ' m/s'}, data: resp[idx] }, false);
console.log('Doing Wind correctly : After addSeries');
}
else {
console.log('Doing ' + idx + ' correctly');
chart.addSeries({name: titles[idx], data: resp[idx]}, false);
}
chart.series[cnt].options.zIndex = cnt+50;
}
cnt++;
});
chart.hideLoading();
chart.redraw();
}
}
)};
The data series (in short version) is as follows:
{"In_pm2p5":[[1609484460000,26.20], ... ]],
"In_pm2p5_1hr":[[1609484460000,32.90], ... ]],
...
"wind":[[1609484460000,0.0,194], ...]]}
Each parameter has 2880 values, wind may have one value less (which I tested in jsfiddle and does not seem to be a problem).

Thank you for your wide and clear description!
In this case it is hard to say why the chart is not rendering properly without reproduction of your data fetching. The addSeries feature should work without any issues with the windbarb type series.
Demo: https://jsfiddle.net/BlackLabel/ktLyunw8/
2.
in the jsfiddle the onSeries attribute does not work. What is wrong there?
I cannot see it, everything seems to work fine:
3.
And finally: is it possible to get the windbarbs above the series graphs and not fixed on the x-axis?
Like in the case of using the onSeries feature? Or render it totally above the plot area?
I'd like to render it above the plot area or in the top of the plot area (like without onSeries it is at the bottom) so all windbarbs in one line.
In this case, you can render the second xAxis and assign the winbarb series to it.
API: https://api.highcharts.com/highcharts/xAxis.opposite
Demo: https://jsfiddle.net/BlackLabel/ud0kyrgh/

Data Not Showing in Highcharts

I'm attempting to combine a couple of different chart demos from Highcharts.
My examples are: Data classes and popup and Small US with data labels
I want the map from the first with the popup feature of the second. I need to connect the map to my own google spreadsheet but for now I'm just trying to get the data from the first example to work.
This is what I have so far but can't seem to get any data in the map. I thought I had a joinBy problem, and I may still, but when I set joinBy to null I thought "the map items are joined by their position in the array", yet nothing happened.
https://jsfiddle.net/9eq6mydv/
$(function () {
// Load the data from a Google Spreadsheet
// https://docs.google.com/a/highsoft.com/spreadsheet/pub?hl=en_GB&hl=en_GB&key=0AoIaUO7wH1HwdFJHaFI4eUJDYlVna3k5TlpuXzZubHc&output=html
Highcharts.data({
googleSpreadsheetKey: '0AoIaUO7wH1HwdDFXSlpjN2J4aGg5MkVHWVhsYmtyVWc',
googleSpreadsheetWorksheet: 1,
// custom handler for columns
parsed: function (columns) {
// Make the columns easier to read
var keys = columns[0],
names = columns[1],
percent = columns[10],
// Initiate the chart
options = {
chart : {
renderTo: 'container',
type: 'map',
borderWidth : 1
},
title : {
text : 'US presidential election 2008 result'
},
subtitle: {
text: 'Source: <a href="http://en.wikipedia.org/wiki/United_States_presidential_election,' +
'_2008#Election_results">Wikipedia</a>'
},
mapNavigation: {
enabled: true,
enableButtons: false
},
legend: {
align: 'right',
verticalAlign: 'top',
x: -100,
y: 70,
floating: true,
layout: 'vertical',
valueDecimals: 0,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)'
},
colorAxis: {
dataClasses: [{
from: -100,
to: 0,
color: '#C40401',
name: 'McCain'
}, {
from: 0,
to: 100,
color: '#0200D0',
name: 'Obama'
}]
},
series : [{
data : data,
dataLabels: {
enabled: true,
color: '#FFFFFF',
format: '{point.code}',
style: {
textTransform: 'uppercase'
}
},
mapData: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']),
joinBy: keys,
name: 'Democrats margin',
point: {
events: {
click: pointClick
}
},
tooltip: {
ySuffix: ' %'
},
cursor: 'pointer'
}, {
type: 'mapline',
data: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small'], 'mapline'),
color: 'silver'
}]
};
/**
* Event handler for clicking points. Use jQuery UI to pop up
* a pie chart showing the details for each state.
*/
function pointClick() {
var row = this.options.row,
$div = $('<div></div>')
.dialog({
title: this.name,
width: 400,
height: 300
});
window.chart = new Highcharts.Chart({
chart: {
renderTo: $div[0],
type: 'pie',
width: 370,
height: 240
},
title: {
text: null
},
series: [{
name: 'Votes',
data: [{
name: 'Obama',
color: '#0200D0',
y: parseInt(columns[3][row], 10)
}, {
name: 'McCain',
color: '#C40401',
y: parseInt(columns[4][row], 10)
}],
dataLabels: {
format: '<b>{point.name}</b> {point.percentage:.1f}%'
}
}]
});
}
// Read the columns into the data array
var data = [];
$.each(keys, function (i, key) {
data.push({
key: key,//.toUpperCase(),
value: parseFloat(percent[i]),
name: names,
row: i
});
});
// Initiate the chart
window.chart = new Highcharts.Map(options);
},
error: function () {
$('#container').html('<div class="loading">' +
'<i class="icon-frown icon-large"></i> ' +
'Error loading data from Google Spreadsheets' +
'</div>');
}
});
});
UPDATE:
I wanted to share with everyone my final solution. Although Ondkloss did a magnificent job answering my question the popup feature still didn't work and this is because I forgot to include the jQuery for the .dialog call. Once I included that I had an empty popup with a highchart error 17, this is because the highmaps.js code doesn't include the pie chart class. So I had to add the highcharts.js code and include map.js module afterward. You can see my final jsfiddle here.
Thanks again to Ondkloss for the excellent answer!

The problem here mostly comes down to the use of joinBy. Also to correct it there are some required changes to your data and mapData.
Currently your joinBy is an array of strings, like ["al", "ak", ...]. This is quite simply not an accepted format of the joinBy option. You can read up on the details in the API documentation, but the simplest approach is to have a attribute in common in data and mapData and then supply a string in joinBy which then joins those two arrays by that attribute. For example:
series : [{
data : data,
mapData: mapData,
joinBy: "hc-key",
]
Here the "hc-key" attribute must exist in both data and mapData.
Here's how I'd create the data variable in your code:
var data = [];
$.each(keys, function (i, key) {
if(i != 0)
data.push({
"hc-key": "us-"+key,
code: key.toUpperCase(),
value: parseFloat(percent[i]),
name: names[i],
row: i
});
});
This skips the first key, which is just "Key" (the title of the column). Here we make the "hc-key" fit the format of the "hc-key" in our map data. An example would be "us-al". The rest is just metadata that will be joined in. Note that you were referencing your data in the options prior to filling it with data, so this has to be moved prior to this.
This is how I'd create the mapData variable in your code:
var mapData = Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']);
// Process mapdata
$.each(mapData, function () {
var path = this.path,
copy = { path: path };
// This point has a square legend to the right
if (path[1] === 9727) {
// Identify the box
Highcharts.seriesTypes.map.prototype.getBox.call(0, [copy]);
// Place the center of the data label in the center of the point legend box
this.middleX = ((path[1] + path[4]) / 2 - copy._minX) / (copy._maxX - copy._minX);
this.middleY = ((path[2] + path[7]) / 2 - copy._minY) / (copy._maxY - copy._minY);
}
// Tag it for joining
this.ucName = this.name.toUpperCase();
});
The first part is your "standard map data". The rest is to correctly center the labels for the popout states, and gotten directly from the example.
And voila, see this JSFiddle demonstration to witness your map in action.
I suggest doing some console.log-ing to see how data and mapData have the hc-key in common and that leads to the joining of the data in the series.

Setting options object key: value pairs to achieve dynamic plotting w/2nd y-axis

I need to add a 2nd axis to my plots. Often we plot, say, a temperature (300-700 deg F) against a tank level (say, 15,000 - 30,000 gallons), so two axes for two different scales would be great.
Now, I did read the instructions and examples & I understand how to set up the 2nd axes. It all works GREAT if it's static (i.e. I hard-code the tag name/column name). If it's dynamic, I can't do it. Because the user selects from a Jquery autocomplete of 1000+ tags, it needs to work for any tag. I read about the 'options object'; it appears that is what I need to use, but my code breaks when I attempt to follow dyGraphs Second Y Axis not being displayed when using a variable as 'y2' which is the closest code I could find.
This code works (using literals), but I don't know how to change the contents of 'LE505 R505 Receiver Level' in its two occurrences. I need to set it to the value of the Javascript variable 'tagselected2'.
I should add, I am not sure if I need to scape the quotes with \'
'rarray' is loaded from an ASP page via XMLHTTP requesst. ASP page queries the mySQL server and the returned results contain the time series data from RSVIEW32 (industrial automation datalogs from a chemical plant). That part works great & I can plot up to 3 tags selected by the user, but I can't get the 2nd y-axis to work because I'm missing something. I'd like to learn more about setting options string dynamically for other enhancements too.
var opts = {
series : { 'LE505 R505 Receiver Level': {axis: 'y2'} },
axes: {
'LE505 R505 Receiver Level': {
// set axis-related properties here
labelsKMB: true
}
},
underlayCallback: drawLines,
labelsDiv: document.getElementById('status'),
labelsSeparateLines: true,
legend: 'always',
colors: ["rgb(51,204,204)",
"rgb(255,100,100)",
"#00DD55",
"rgba(50,50,200,0.4)"],
width: $(window).innerWidth()-30,
height: $(window).innerHeight()-140,
title: tagselected,
xlabel: 'Time and Date',
ylabel: tagselected,
axisLineColor: 'white'
// drawXGrid: false
};
// opts.series[string2] = { axis: 'y2' };
g = new Dygraph(document.getElementById("demodiv"),rarray,opts);
I tried this code (doesn't work). I didn't even attempt to set it to the variable, but was just trying to set the literal text string.
var opts = {
series : string1,
axes: string2,
underlayCallback: drawLines,
labelsDiv: document.getElementById('status'),
labelsSeparateLines: true,
legend: 'always',
colors: ["rgb(51,204,204)",
"rgb(255,100,100)",
"#00DD55",
"rgba(50,50,200,0.4)"],
width: $(window).innerWidth()-30,
height: $(window).innerHeight()-140,
title: tagselected,
xlabel: 'Time and Date',
ylabel: tagselected,
axisLineColor: 'white'
// drawXGrid: false
};
opts.series[string1] = { 'LE505 R505 Receiver Level': {axis: 'y2'} };
opts.series[string2] = { 'LE505 R505 Receiver Level': { labelsKMB: true } };
g = new Dygraph(document.getElementById("demodiv"),rarray,opts);
}

Please ignore my previous question, I now realize I had a syntax issue & fixed it. I did not read your example thoroughly. Below example works & plots on a 2nd axis based upon whether user checks a checkbox
The only other follow-on I had, is where/whether there is a reference you recommend on setting key: value pairs and learning Javascript better.
var opts = {
series : { },
axes: { },
underlayCallback: drawLines,
labelsDiv: document.getElementById('status'),
labelsSeparateLines: true,
legend: 'always',
colors: ["rgb(51,204,204)",
"rgb(255,100,100)",
"#00DD55",
"rgba(50,50,200,0.4)"],
width: $(window).innerWidth()-30,
height: $(window).innerHeight()-140,
title: tagselected,
xlabel: 'Time and Date',
ylabel: tagselected,
axisLineColor: 'white'
// drawXGrid: false
};
if (document.getElementById('tag2_2nd_axis').checked) {
//alert("checked");
opts.series[tagselected2] = {axis: 'y2'};
opts.axes[tagselected2] = { labelsKBM: true};
} else {
//alert("Dual axes NOT checked");
}

ExtJS 4.2.1 Chart Axis labeling

i do have a chart in my application with many x-values. The labeling doesnt seem to work fine because there is e.g. no space between the labels like this:
I know i could make the labels vertical, though is there an other option to scale/place the labels mor intelligent? Or is doing it vertically the way to go?

I guess my first thought is are your labels the same length every time?
Vertical labeling is often preferred because in many of the examples given we are using variable lengths for things like names.
Does your chart scroll off the screen because of all the columns? just curious.
Now you could try creating the grid with a set width to the columns, something like this and see how it does.
series: [{
....
renderer: function(sprite, storeItem, barAttr, i, store) {
// set a width that gives you enough space
barAttr.width = 60;
return barAttr;
},
....
now looking over my code I often use the Ext.String.ellipsis function to set the length of my labels under my columns. so something like this below where I trim at 8 characters:
axes: [{
type: 'Category',
position: 'bottom',
fields: ['name'],
label: {
renderer: function(v) {
return Ext.String.ellipsis(v, 8);
},
}
....

It work for me
{
type: 'Category',
position: 'bottom',
fields: ['time'],
title: 'Time',
style: {
textAlign: 'center',
},
label: {
rotate: {
degrees: 270
}
}
}
enter image description here

Can the colors on charts in ExtJs/ YUI Charts be changed dynamically?

I am using ExtJs/ YUI charts in my application.
What I am wondering, is it possible to dynamically change the color on any of the charts based on data?
i.e. I have a store which contains a field holding the hex color for that particular row. Is it possible to dynamically set the color of a bar in the bar chart with the hex value?

Take a look at this blog post. When you are configuring the chart object, pass a series object with a style property as described in that post to define the colors and their sequence.
Then you just need to get your colors by either looping through your store records and building a new array, or perhaps pulling it from your store with store.query. Then pass this array as the property.
(...),
series: [style: { colors: arrayBuiltFromStore }],
(...)

From what I've been able to find, you can use the
(...),
series: [style: {colors: arrayBuiltFromStore }],
(...)
method if you're creating a pie chart (or another chart with series.colors attribute), and it works great.
If you're using a type of chart that doesn't support series.colors... it gets a little more convoluted. I found that using the renderer method works fairly well. The only problem with this method (that I can see right away) is that it doesn't change the colors in the legend. It would take some further editing to see if this could be pulled from the store.
If you figure out the legend issue, let me know, but I hope this helps.
Note: Not all the variables used in the below script are populated in the script.
function myColorer(rec) {
var aFiller = new Array('#0000FF','#31CD31','#FFFF00','#FF0000');
return aFiller[rec];
}
Ext.onReady(function() {
var sDataStore = new Ext.data.JsonStore(sPathToDataStore);
chart = new Ext.chart.Chart({
renderTo: document.getElementById('test-graph'),
width: 800,
height: 600,
animate: true,
store: sDataStore,
legend: {
position: 'right',
isVertical: true,
},
axes: [{
type: 'Numeric',
grid: true,
position: 'left',
fields: ['field1','field2','field3','field4'],
title: 'Title Here',
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 1
}
},
minimum: 0,
adjustMinimumByMajorUnit: 0
}, {
type: 'Category',
position: 'bottom',
fields: label1,
title: sXAxisLabel,
grid: true,
}],
series: [{
renderer: function(sprite, record, curAttr, index, store) {
var color = myColorer(index);
return Ext.apply(curAttr, {
fill: color
});
},
type: 'area',
highlight: false,
axis: 'left',
xField: label1,
yField: ['field1','field2','field3','field4'],
style: {
opacity: 0.93
}
}]
});
});

Try this:
Create a hidden field and assign its value to the value of the store field which contains the colour value.
when rendering bar chart, set the background colour of a bar to the value of the hidden field.

Yes, you can do it by using renderers. Following code example changes colors of bars in bar chart:
series: {
type: 'bar',
xField: 'name',
yField: 'value',
label:{
field: 'value'
},
renderer: function(sprite, config, rendererData, index) {
var record = rendererData.store.getData().items[index];
return Ext.apply(rendererData, {
fillStyle: record.data.color,
});
}
}
Here 'color' is a field of the store model. You can set different color for each bar by setting it in corresponding record in your store.