Adding HighCharts Data Series With Property Names - javascript

I can create an array of data for use in a HighCharts series like this:
mySeries.push([x, y, z]);
Then, I can use the following to direct my chart to use the data in the array as the series.
options.series.push({
name: "MyData",
data: mySeries,
type: 'arearange',
lineWidth: 1,
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
zIndex: 0
});
However, I want to push a object into my array rather than just the values. Like this:
mySeries.push({ x: thisDate, y: yValue, z: zValue });
When I do this, HighCharts doesn't display the series. How can I utilize an array of objects with named properties in a HighCharts series?

Instead of using x, y, z, use x, low, high properties. Take a look at the example below.
Example:
http://jsfiddle.net/2Lx6yt7u/

Related

How to pass array of array to Plotly instead of defining it within the chart layout

I am trying to create a Plotly JS colorscales graph using a Z index array of an array. When defining the Z index like so:
var data = [{
z: [[-45970100.0, -45968489.0, -45966877.0, -45965266.0, ...]],
colorscale: [
['0.0', 'rgb(165,0,38)'],
['0.111111111111', 'rgb(215,48,39)'],
['0.222222222222', 'rgb(244,109,67)'],
['0.333333333333', 'rgb(253,174,97)'],
['0.444444444444', 'rgb(254,224,144)'],
['0.555555555556', 'rgb(224,243,248)'],
['0.666666666667', 'rgb(171,217,233)'],
['0.777777777778', 'rgb(116,173,209)'],
['0.888888888889', 'rgb(69,117,180)'],
['1.0', 'rgb(49,54,149)']
],
type: 'heatmap'
}];
Plotly.newPlot('myDiv', data);
the chart plots vertically as intended Vertical Colorscale, but when I pass the same array of array as a variable like so:
function chart(zX):
var data = [{
z: zX,
colorscale: [
['0.0', 'rgb(165,0,38)'],
['0.111111111111', 'rgb(215,48,39)'],
['0.222222222222', 'rgb(244,109,67)'],
['0.333333333333', 'rgb(253,174,97)'],
['0.444444444444', 'rgb(254,224,144)'],
['0.555555555556', 'rgb(224,243,248)'],
['0.666666666667', 'rgb(171,217,233)'],
['0.777777777778', 'rgb(116,173,209)'],
['0.888888888889', 'rgb(69,117,180)'],
['1.0', 'rgb(49,54,149)']
],
type: 'heatmap'
}];
Plotly.newPlot('myDiv', data);
the chart plots horizontal Horizontal Colorscale
How can I make it so that passing an array of an array as a variable to a function plots the chart vertically?
Note: I've left the x and y axis data as they are just labels and do not impact the Z index coordinates.

Different data with same series name

I am trying to display my data on a bar chart using highcharts. It works fine with unique names but when I tried to show different data with same names then it was displaying data on one bar but I want to display it on separate bars. So how can I display data with same names on different bars.
Here is link of my jsfiddle
{
name: '10100',
y: 8451720
}, {
name: '10100',
y: 1456480
}, {
name: '13050',
y: 187940
}, {
name: '13050',
y: 6991100
}, {
name: '13050',
y: 7167320 }]
Thanks
From docs:
uniqueNames: Boolean
When uniqueNames is true, points are placed on the X axis according to their names. If the same point name is repeated in the same or another series, the point is placed on the same X position as other points of the same name. When uniqueNames is false, the points are laid out in increasing X positions regardless of their names, and the X axis category will take the name of the last point in each position.
So you need to add attribute uniqueNames: false to xAxis

Representing multiple data points with equal value in jqPlot

I display a data set in a scatter plot using jqPlot. There are repeated values in the data set. Is there a way to represent the fact there are multiple data points in one location on the graph? Perhaps by growing the point marker bigger?
Alternately, is there another kind of graph I should be using?
Here is my Javascript code for the scatter plot.
var qr=[[1,5],[4,5],[6,5],[4,5],[0,5],[4,5],[6,5],[4,5]];
var gr_html = $.jqplot('par_sca_div', [qr], {
seriesDefaults:{
showLine:false,
markerRenderer: $.jqplot.MarkerRenderer,
markerOptions: {
size: 5
}
},
series:[{
markerOptions: {
style: 'circle',
size:5,
},
}],
axes:{
xaxis:{
label:'Score',
},
yaxis:{
renderer:$.jqplot.canvasTextRenderer,
label:'Rate',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
labelOptions:{
fontSize: '10pt'
},
},
}
});
Use the pointLabels plugin and make your label reflect the amount of identical points.
Add the labels to your array:
var qr=[[1,5, null],[4,2, null],[6,5,'2'],[4,5,'3'],[0,5,null],[4,5,'3'],[6,5,'2'],[4,5,'3']];
and enable point labels in your series:
series:[{
pointLabels:{
show: true,
},
Here is a working jsfiddle example with the above.
As for an algorithm of dynamically adding the label to your original array, you can iterate your original array and create a matrix which will represents the point and the number of repeats.
For example:
[4,5] will be represented as pointMatrix[4][5] with a value of 3.
Then iterate your array again and using the matrix add the corresponding point label value to your original array.

Adding data to a highchart chart using an array with IDs

I want to add a series to a highchart scatterplot where I am naming each point in the series. I create a chart in the following way:
var chart; // globally available
makeCharts = function(){
chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'scatter'
},
series: [{
name: 'a',
data: [{
'id': 'point1',
'x': 1,
'y': 2
}, {
'id': 'point2',
'x': 2,
'y': 5
}]
}]
});
}
I would like to be able to update the points on the chart using something like:
chart.series[0].setData([{id:['point3', 'point4', 'point5'], y:[0,1,2], x:[1,2,3]}])
but this is not correct. Is it possible to update a chart using this approach where each point has an ID?
EDIT:
Just to clarify, I would like to be able to pass the arrays directly, rather than adding the data point by point using addPoint(). I could loop through an array and use addPoint() doing something like this:
id:['point3', 'point4', 'point5'];
y:[0,1,2];
x:[1,2,3];
for (i=0; i<x.length; i++)
{
chart.series[0].addPoint({
x: x[[i],
y: y[i],
id: id[i]
});
}
However, this is very slow. It's much quicker to add data using the following approach:
chart.series[0].setData([[1,0],[2,1],[3,2]]);
I have found that I can add data like this:
chart.series[0].setData([[1,0, 'point3'],[2,1, 'point4'],[3,2, 'point5']]);
but then the only way that I can access the id when the point is selected, is through this.point.config[2]. With the following approach I am unable to use chart.get('pointID') to identify a point as I did not set the ID. I want to be able to identify the point using just the ID.
Well broadly speaking there are two ways in which you can modify the chart data dynamically
Series.setData() Use this approach when you want to completely replace the existing data with some new data
Series.addPoint() Use this approach when you want to add a subset of the points dynamically. This method is not just for adding one point at a time, if you read the documentation carefully again you will find that this method takes a boolean redraw argument, and the argument detail is as following
redraw: Boolean
Defaults to true. Whether to redraw the chart after
the point is added. When adding more than one point, it is highly
recommended that the redraw option beset to false, and instead
chart.redraw() is explicitly called after the adding of points is
finished.
In your case, since you want to add a few points dynamically, but retaining the existing points, you should go with approach 2. But you need to use it inside a loop, with the redraw being set to false (hence solving the problem of being slow) and then after the loop, call the redraw method explicitly
Code
var id = ['point3', 'point4', 'point5'],
y = [0, 1, 2],
x = [1, 2, 3];
for (var i = 0; i < x.length; i++) {
chart.series[0].addPoint({
x: x[i],
y: y[i],
id: id[i]
},false);
}
chart.redraw();
Adding multiple points dynamically | Highcharts and Highstock # jsFiddle
Try using series.addPoint.
chart.series[0].addPoint({
x: 0,
y: 0,
id: 'anything'
});
But if you need to set data for series, use
chart.series[0].setData([{
x: 0,
y: 0,
id: 'anything'
},{
x: 2,
y: 2,
id: 'another'
}]);
As soon as you can pass your data like this:
chart.series[0].setData([[1,0, 'point3'],[2,1, 'point4'],[3,2, 'point5']]);
(as you stated in question), I can suggest you to use a little hack.
We'll need to add another statement to method applyOptions of Highcharts.Point prototype.
if (typeof options[0] === 'number' && options[2] && typeof options[2] === 'string') this.id = options[2];
Here you can see it in action.

highcharts: individual serie shift

In a highchart line chart, is it possible that, given two arrays A and B, to have B displayed after A?
eg: A = [11,22,13,4,7], B=[6,11,45,7]
to have A[0] at x=0, A[1] at x=1 ... B[0] at x=5, B[1] at x=6 ...?
If not, how can I have two styles (solid line and dashed) for the same set of data? essentially I want to build a chart of actual data and predictions and I want the predictions to appear in dashed lines
Thanks
Create two series of data - your A and B.
Set the A line color the way you want it and then set the B line color in its fashion. Use dashStyle to set the dashes. See here:
series: [{
name: 'A',
color: '#0066FF',
data: [...]
},{
name: 'B',
color: '#FF0000',
dashStyle: 'ShortDash',
data: [...]
}]
As to how to set up the points to start on the 5th xAxis location. Well, many ways to skin a cat here. But what I did was to pass in null values for the first 4 data points in B.
Look at this example.

Categories