When I render an invalid data like a string on Highcharts Heatmap, it shows the string with a black background. Below is an example of an invalid data:
data: [[0, 0, "A"], [1, 0, "B"], [2, 0, "C"], [3, 0, "D"], [4, 0, "E"]]
Can I change this default behavior and show another background color instead of black?
When you use a unsupported value the ColorAxis.toColor function returns rgb(NaN,NaN,NaN) as the color of the cell.
By writing a rather small wrapper for that function you could intercept string values and return a color of your choice.
For example (JSFiddle demo):
(function (H) {
H.wrap(H.ColorAxis.prototype, 'toColor', function (proceed, value, point) {
if(typeof value === 'string') // String value -> Return pink
return 'rgb(255,105,180)';
else // Normal value -> Proceed as usual
return proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));
Related
I have following codes in javascript
var ArrayLogs = [1, 3, 5, 4, 9, 11, 0, -4, -10];
var newLogArrays = [];
ArrayLogs.reduce(function(result, value, index, array) {
if (index % 2 === 0){
newLogArrays.push(array.slice(index, index + 2));
}
return newLogArrays;
}, []);
Above method outputs:
[[1,3],[5,4],[9,11],[0,-4],[-10]]
I am looking equivalent code in Dart, I know there is reduce method in dart as well, but I am not sure how to use to get similar result as javascript.
Any help will be highly appreciated.
Thanks
If you just want to do it using Dart only, you can do something like the following:
void main() {
final arrayLogs = [1, 3, 5, 4, 9, 11, 0, -4, -10];
final result = arrayLogs.fold<List<List<int>>>([], (list, element) {
if (list.isEmpty || list.last.length > 1) {
return list..add([element]);
} else {
return list..last.add(element);
}
});
print(result);
// [[1, 3], [5, 4], [9, 11], [0, -4], [-10]]
}
I am sure there are some packages which can do this more automatically or cleaner.
I have a js file that create a Highcharts chart object. I added a plugin to change label contrast. The plugin is below:
/**
* Override getContrast function; make threshold for showing white text very high
*/
(function(H) {
H.Renderer.prototype.getContrast = function(rgba) {
rgba = H.Color(rgba).rgba;
return rgba[0] + rgba[1] + rgba[2] > 210 ? '#000000' : '#FFFFFF';
};
}(Highcharts));
It was working just fine for several months. I recently noticed that the chart is no longer rendering, and my error console is showing this: Uncaught TypeError: this.init is not a function
at Object.e [as Color] (highcharts.src.js:2839)
I was able to trace the source back to this part of the Highcharts.src.js file:
/**
* Handle color operations. Some object methods are chainable.
*
* #param {Highcharts.ColorType} input
* The input color in either rbga or hex format
*/
function Color(input) {
// Collection of parsers. This can be extended from the outside by pushing
// parsers to Highcharts.Color.prototype.parsers.
this.parsers = [{
// RGBA color
// eslint-disable-next-line max-len
regex: /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]?(?:\.[0-9]+)?)\s*\)/,
parse: function (result) {
return [
pInt(result[1]),
pInt(result[2]),
pInt(result[3]),
parseFloat(result[4], 10)
];
}
}, {
// RGB color
regex: /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/,
parse: function (result) {
return [pInt(result[1]), pInt(result[2]), pInt(result[3]), 1];
}
}];
this.rgba = [];
this.init(input); //<!--ERROR RIGHT HERE
}
It looks like something change internally on Highcharts' end, specifically the init() method for the Color subclass. Has anyone else had a similar error?
Since v8.0.1, Highcharts.Color must be instanciated with the new keyword.
Before
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
Since v8.0.1
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, new Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
https://github.com/highcharts/highcharts/issues/13053
I'm using Highcharts and initializing the data using;
var graph = Highcharts.chart('container', {
................
series: [{
color: 'red',
data: [[5, 2], [800, 2], [801, 1],[802, 3],[803, 2],[804, 2],[1200, 3]]
},
.............
}
The problem I have is when I want to add more data dynamically, after rendering the initial chart.
In this case I'm using the update;
graph.update(
{
series: [{
color: 'blue',
data: [[100, 2], [101, 2], [102, 1] ]
},
});
And this works but it replaces the entire data set.
So, how should I use the update() function to add points and not replace them?
I saw people are using other functions such as addPoint() and setData() but I couldn't make them work properly...
Thanks in advance
Gus
Refer to this live demo: http://jsfiddle.net/kkulig/opr4Lgpe/
I add all the points in a loop. redraw argument (second one) of the addPoint function is set to false - there's no need to redraw the chart after each addition. The redraw is performed only once in the end.
var chart = Highcharts.chart('container', {
series: [{
data: [1, 2]
}]
});
var pointsToAdd = [4, 5, 6, 6, 7];
pointsToAdd.forEach(function(p) {
chart.series[0].addPoint(p, false);
});
chart.redraw();
API reference:
https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
how to use double click get the Category, name, y of a line of a line chart?
i tries use customEvents plugin.
but i don't know get those data in line chart
in the column chart, i use below code is okay.
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
point: {
events: {
dblclick: function(e) {
var c = this.point.category;
var y = this.point.options.y;
var n = this.point.series.name;
}
}
}
}
I updated the plugin, so please check if all works as you expect.
This is my data model:
data = [{y: 123, color: "#FF7600"}, {y: 321, color: "#00FFE3"}, {y: 213,color: "#444444"}]
Then the series is added to a pie chart:
$http({ method: 'GET', url: /pie-chart, params: {})
.success(function (data) {
chart.addSeries({
type: 'pie',
data: data
})
});
Here's the official highcharts demo: http://www.highcharts.com/demo/pie-gradient
It loops through data, read colors, creates color array and uses this array when drawing chart.
But i'm thinking about solution which avoids extracting colors from JSON.
Any idea? Thanks a lot.
Edited, solved
Gave it up :).
I ended up creating color arrays as described in highcharts demo.
It works well.
// Get colors from received data, create color array,
var colors = [];
for (var i = 0; i < data[0].series.length; i++) {
colors.push(data[0].series[i].color);
// Delete original colors, so that new radialized are used
delete(data[i].color);
}
// Use color array and radialize each color
Highcharts.getOptions().colors = Highcharts.map(colors, function(color) {
return {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
The solution mentioned above sets the colors in the global defaults. This is okay if you have only one chart, but if you have multiple it can be problematic, as the colors will apply for all charts.
You can colorize this on the individual chart level by remapping the colors just in the local data array. Here is what I do for my pie charts.
chartData is an array of data like:
[
{
"color": "#01080f",
"name": "No Status",
"y": 8570
},
{
"color": "#1A942C",
"name": "Deployed",
"y": 27952
},
...
{
"color": "#f36e20",
"name": "Out of sync",
"y": 241
}
]
In my javascript code it is retrieved from the server and applied to the Highcharts object's series.data element.
Just manipulate that data element before you add it to the highcharts object.
// Retrieve your chart data
$.getJSON('/api/endpoint/policystatus', function (chartData) {
// Function replaces flat colors with gradients
function colorizeData(data) {
data.color = {
radialGradient: {cx: 0.5, cy: 0.3, r: 0.7},
stops: [
[0, data.color],
[1, Highcharts.Color(data.color).brighten(-0.3).get('rgb')] // darken
]
};
}
// Call the function for each element in the retrieved data
chartData.forEach(colorizeData);
// Continue on to build your chart
$('#pie-general-status').highcharts({
// ....
The above 'colorizeData' takes the chart data input, looks for the 'color' element, then replaces it with the Highcharts gradient based on the same color.
Note that you must use hex or RGB values; it will not work with colors defined as the words 'green' or 'blue'.