My program is drawing a graph with the following (comparable) source code from the jqplot page. The goal is to draw a vertical line at position x in the graph. I followed up the guide an examples on the jqplot page, but it didn't draw the line, just the graph.
Is someone experienced with that? Or could tell me how the options/calls should be to get the line in the graph?
Example-code:
$(document).ready(function(){
var plot2 = $.jqplot ('chart2', [[3,7,9,1,4,6,8,2,5]], {
// Give the plot a title.
title: 'Plot With Options',
// You can specify options for all axes on the plot at once with
// the axesDefaults object. Here, we're using a canvas renderer
// to draw the axis label which allows rotated text.
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
// An axes object holds options for all axes.
// Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
// Up to 9 y axes are supported.
axes: {
// options for each axis are specified in seperate option objects.
xaxis: {
label: "X Axis",
// Turn off "padding". This will allow data point to lie on the
// edges of the grid. Default padding is 1.2 and will keep all
// points inside the bounds of the grid.
pad: 0
},
yaxis: {
label: "Y Axis"
}
}
});
});
Adding this to your existing code should help you draw a vertical line.
CODE:
canvasOverlay: {
show: true,
objects: [
{verticalLine: {
name: 'stack-overflow',
x: 4, // x-axis position where you want to draw the vertical line.
lineWidth: 6,
color: 'rgb(100, 55, 124)',
shadow: false
}}
]
}
You can set the 'x' to a desired value of your choice.
IMP: In order for the canvasOverlay to work, you must include the jqplot.canvasOverlay.min.js file, else it will not work.
Here's a working fiddle: jqPlot - Draw vertical line on the graph
I included the following files in code above(JS Fiddle). You can also refer to the External Resources section on the left pane in JSFiddle.
jquery.jqplot.min.js
jquery.jqplot.min.css
jqplot.canvasOverlay.min.js
jqplot.canvasAxisLabelRenderer.min.js
jqplot.canvasTextRenderer.min.js
jqPlot Example here - jqPlot Canvas Overlay
Hope it helps :-)
Related
For my graph, I have a single y-axis (y1), and I am trying to add a second axis (y2) which is a scaled version of y1.
Simply put, is it possible to do a graph like this. But I want a second axis, with the same scaling ratio, but in different units (i.e. that is multiplied by some k).
I have tried to just change the label on the yAxis:
` labels: {
format: '$ {value* price} ',
style: {
color: Highcharts.getOptions().colors[0]
}
},`
But this hacky way does not seem to work for me.
In my case, I have a graph of percent change on y1, is it possible to put the price on y2?
I do not want to add another set of lines since I am already using 10, which would mean I would need 20 lines in total
Any help would be greatly appreciated!
You need to link the second axis to the first by linkedTo property and use formatter function to display some custom scale:
yAxis: [{}, {
opposite: true,
labels: {
formatter: function() {
return this.value * 1000
}
},
linkedTo: 0
}]
Live demo: http://jsfiddle.net/BlackLabel/j83pghta/
API Reference:
https://api.highcharts.com/highcharts/yAxis.linkedTo
https://api.highcharts.com/highcharts/yAxis.labels.formatter
I figured it out:
I was not including the jqplot.CategoryAxisRenderer. Once I included that, I was able to get it working.
Thanks, everyone!
UPDATE:
My code works in JSFiddle, so it's a CSS problem I'm having. Please disregard.
I'm trying to create a fairly simple bar chart in jQPlot. I'm expecting two horizontal bars, one on top of the other. Both are equal to 1 on the X axis. I want the Y axis to have the labels 'In Progress' for the top bar, and 'Apr 2014' for the bottom bar. I have tried numerous combinations. If I do not specify Ticks, then I see the two bars. Specifying Ticks, or using the desired labels as the Y axis data point just shows both labels overlapping with no bars. (ignore the setTimeout) Thanks in advance.
Here's the code:
var data = [[1,1],[1,2]];
var ticks = ['In Progress','Mar 2014'];
$(function () {
setTimeout(function(){
var plot1 = jQuery.jqplot ('chartdiv', [data],
{
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal'
},
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
}
});
},
100);
});
I have modified the JsFiddle given by Batu Zet previously adding following lines in order to label your bar chart here :
series: [
{
pointLabels:{
show:true,
labels:['Apr 2014', 'Apr 2014']
}
},
{
pointLabels:{
show:true,
labels:['In Progress', 'In Progress']
}
}
]
P.S : The labels are duplicated for each serie in order to display the same label for two points in a serie.
If the area is very small then the labels are getting overlapped in the donut chart.
How to place the data labels outside the donut chart with lines.
Currently I am able to draw the labels inside the chart. Find the sample code from here:
$(document).ready(function(){
var s1 = [['a',6], ['b',8], ['c',14], ['d',20]];
var plot3 = $.jqplot('chart4', [s1], {
seriesDefaults: {
// make this a donut chart.
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
// Donut's can be cut into slices like pies.
sliceMargin: 3,
// Pies and donuts can start at any arbitrary angle.
startAngle: -90,
showDataLabels: true,
// By default, data labels show the percentage of the donut/pie.
// You can show the data 'value' or data 'label' instead.
dataLabels: 'value'
}
}
});
});
fiddle
This is my expected output:
Helps much appreciated
Ok, what you need to set is:
dataLabelPositionFactor: 2
Please see jsFiddle here:
http://jsfiddle.net/9gXc3/1/
And further info here:
http://www.jqplot.com/docs/files/plugins/jqplot-donutRenderer-js.html
Update
I'd also set the padding too to avoid overlap i.e.
padding: 50
http://jsfiddle.net/9gXc3/3/
Use, dataLabelPositionFactor: 1.2, inside rendererOptions.
Below is an example I used in a project:
rendererOptions: {
padding: 8,
showDataLabels: true,
dataLabels: percentage,
dataLabelFormatString: '%s%%',
diameter: 300,
dataLabelPositionFactor: 1.1,
sliceMargin: 4,
startAngle: -90,
color: '#DCDCDC'
}
I am using JQplot Pie Chart. I need the labels to appear outside the chart. How can I make that possible?
If you mean data labels then you need to set the dataLabelPositionFactor to appropriate value greater than 1.0 and you are done.
Example sample available here.
To do that yuo need to specify the placement propertie :
legend: {
show:true; placement: "outsideGrid"
}
Example :
$.jqplot('YOUR_DIV_ID', [['LABEL_1',2],['LABEL_2',232],['LABEL_3',22], {
seriesDefaults: {
// Make this a pie chart.
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
showDataLabels: true
}
},
//Make legend visibile, outside the chart
legend: {
show:true, placement: "outsideGrid"
}
}
);
I'm trying to set up a horizontal bar graph using jqplot as follows:
var plot1 = $.jqplot('graph', [gData], {
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal'
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: gTicks
}
}
});
This code works fine with vertical bars, like:
var plot1 = $.jqplot('graph', [gData], {
seriesDefaults: {
renderer:$.jqplot.BarRenderer
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: gTicks
}
}
});
But when I go to make it horizontal, suddenly the bars no longer line up with the ticks. For example, for some ticks, there may be two or more overlapping bars. And for some, there may be none at all. Finally, there is an additional 'undefined' tick that seems to have tons of bars overlapping.
gData and gTicks are both javascript arrays.
Any thoughts?
EDIT: The undefined category is actually my own creation, but the problem remains unchanged.
The reason it doesn't work for you is that, what I assume, you are not changing the data accordingly when changing your graph's orientation to horizontal. Therefore, assuming that this is the problem, the chart's data would have to be in the following form, as in the example at jqPlot's webpage:
[[[2,1], [4,2], [6,3], [3,4]],
[[5,1], [1,2], [3,3], [4,4]],
[[4,1], [7,2], [1,3], [2,4]]]
You could also use a value array notation (below), as oppose to the above (array of points) to express a series:
[[200, 600, 700, 1000],
[460, -210, 690, 820],
[-260, -440, 320, 200]]
This notation would allow you to change the orientation of the chart without worrying about the data format, as presented in the examples below, where data stay the same only appropriate graph's parameters change:
Vertical bar chart.
Horizontal bar chart.