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.
Related
I have a set of data basically from node-edge graph: a number of nodes (from A1...A10) and a list of edges (i.e. A1-A3, A2-A3, A4-A6 etc.). I want to create a bubble chart from this data, however, if I simply pass my edges as points I end up with axes reduced to nodes with edges (if A5 does not have edges, it will not show) and Y axis is sorted depending on the first edge point, not alphabetically (if A3 was in the first edge, it will be first on the Y axis). What I am looking for is to manually pass list of nodes (A1...A10) to plotly.js to build identical X and Y axes. Is it possible?
Found a suitable solution in Plotly.js: Cannot show full categorical x-axis
var layout = {
xaxis: {
title: 'x Axis Label'
, autorange: false
, type: 'category'
, categoryorder: 'array'
, categoryarray: ['0001','0002','0003']
},
yaxis: {
title: 'Y Axis Label %>'
, autorange: false
, type: 'category'
, categoryorder: 'array'
, categoryarray: ['one','two','three', 'etc']
},
};
However, still had to use autorange: true otherwise it would not display initial graph correctly
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
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/
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.
I want to plot a graph with the following as the xaxis:
var xaxis = [31.1,31.2,31.3,31.4,31.5, 32.1,32.2,32.3,32.4,32.5];
notice how there is a skip between 31.5 and 32.1. However, when I plot my line graph, there is a large space between these two points. Here's my code:
$(document).ready(function(){
var cust1 = [[31.1,10],[31.2,15],[31.3,25],[31.4, 60],[31.5,95]];
var cust2 = [[31.1,0],[31.2,15],[31.3,30],[31.4, 50],[31.5,85]];
var data = [];
data.push(cust1);
data.push(cust2);
var xaxis = [31.1,31.2,31.3,31.4,31.5, 32.1,32.2,32.3,32.4,32.5];
var plot3 = $.jqplot('line-chart', data,
{
title:'Design Progress',
axes: {
xaxis: {
//renderer: $.jqplot.LineRenderer,
label: 'Work Weeks',
ticks: xaxis
},
yaxis: {
label: "Percent Complete",
max: 100,
min: 0
}
}
}
);
});
I think it's because I'm not specifying a renderer option in my xaxis options. However, I've tried to use $.jqplot.LineRenderer and $.jqplot.CategoryAxisRenderer without any luck (I even set my xaxis values as strings but that didn't work). Anybody know what's going on?
Here's a pic to further clarify:
Reason why it happens : jQuery flot library is building the graph with values that determined by your data.
When you provide such data, the plugin will set the axis values to be as same as the text and with the borders of the numbers you gave.
what you can do, is set the text to be different than the axis value.
You can easily do it by options.xaxis.ticks.push([value, "the text"]).
Pay attention that you are the one who is going to set which label will have which axis value, and this calls for setting the options parameter before calling the $plot