I am using the Bubbles plugin with the Flot charting library for JQuery. The data I have is dynamic and can be quite varied within the X, Y, and Z values. The main issue I am having is the size of the bubbles. If the X and Y values are somewhat close to each other but the Z value is much larger the bubble simply takes over the chart. Setting the axis min and max for the X and Y axes helps a bit but not in every case. I have tried to look for other options and settings but did not find anything useful. Is there any type of way to control the size of the bubble?
For instance Flex used to automatically create bubble sizes relative to the screen and axes where Flot seems to always set the bubble size to the same scale as the X and Y values. I have included just a sample of data. I would like to continue to use Flot as the plugin because I have many other chart types in my application and would like to use the same code base. However if there is another plugin that would be better I am open to ideas. Thanks!
https://jsfiddle.net/llamajuana/zd4hd7rb/
var d1 = [[30,339,139856], [30, 445,239823], [30,1506,127331]];
var options = {
series: {
//color: '#CCC',
color: function(x, y, value) {
var red = 55 + value * 10;
return 'rgba('+red+',50,50,1)';
},
bubbles: {
active: true,
show: true,
fill: true,
linewidth: 0,
bubblelabel: {
show: true
},
highlight: {
show: true,
opacity: 0.3
}
}
},
grid:{
hoverable: true,
clickable: true
},
tooltip: {
show: true,
content: "x: %x | y: %y | value: %ct"
}
};
var p4 = $.plot( $("#plot"), [d1], options );
You could try logarithmic scaling.
For the x- and y-axis you can do this using the transform property in the axis options or changing the data before drawing the plot.
For the bubbles you have to do this by hand, either by changing the data before drawing or by replacing the drawbubble function of the bubbles plugin (see the User draw example here).
See this fiddle for the full example. Changes from your fiddle:
1) You could change this directly in the bubbles plugin, if you wanted.
// index of bubbles plugin is dynamic, you better search for it
var defaultBubbles = $.plot.plugins[1].options.series.bubbles.drawbubble;
var logBubbles = function(ctx, serie, x, y, v, r, c, overlay){
defaultBubbles(ctx, serie, x, y, v, Math.log(r), c, overlay);
}
2) In the series options:
xaxis: {
transform: function (v) {
return Math.log(v);
},
inverseTransform: function (v) {
return Math.exp(v);
}
},
yaxis: {
transform: function (v) {
return Math.log(v);
},
inverseTransform: function (v) {
return Math.exp(v);
}
},
3) In the radiusAtPoint() function in the bubbles plugin:
// added Math.log function here too
return parseInt(series.yaxis.scale * Math.log(series.data[radius_index][2]) / 2, 0);
Related
I started working with highcharts. Now a problem I am facing is that the bulletcharts can’t be used for a dataset that is in descending order.
For example say we want to plot the ranking of a few companies. In this case the ranking is better the lower it gets. So a Rank 10 is better than a Rank 15 and so on.
In this case I want my graph to get reversed. The target would be lets say 10. The min value would start from say 100 to 0. So you can see how this isnt possible.
P.S: I know the
reverse: true/false
property. But that simply flips the graph and I don’t want that/need that.
Thanks world.
You can add a second y-axis with the same extremes as the first one, but reversed. Next, hide the first y-axis, calculate mocked y and target values and finally, set a custom formatter function for tooltip to show original values.
const MAX = 300;
const TARGET = 50;
const Y = 25;
Highcharts.chart('container1', {
chart: {
inverted: true,
type: 'bullet',
},
yAxis: [{
visible: false,
min: 0,
max: MAX
}, {
min: 0,
max: MAX,
reversed: true,
...
}],
tooltip: {
formatter: function(tooltip) {
const point = this.point;
return `<span style='color: ${this.color}'>●</span> ${this.series.name}: <b>${point.originalY}</b>. Target: <b>${point.originalTarget}</b><br/>`
}
},
series: [{
data: [{
y: MAX - Y,
target: MAX - TARGET,
originalY: Y,
originalTarget: TARGET
}]
}]
});
Live demo: https://jsfiddle.net/BlackLabel/ve8hosd3/
API Reference: https://api.highcharts.com/highcharts/tooltip.formatter
I want to increase height of my xAxis crosshair to touch the x axis. Is there a way to achieve this. Below i have attached screen shot and code snippet for the same
Highcharts.chart(container, {
title: {
text: ""
},
xAxis: {
type: "datetime",
crosshair: true
}
}
I tried using it as tooltip option
tooltip: {
crosshairs: {
color: 'green',
width: 2,
height: 10
}
}
It takes width but does not take the height options
Js fiddle example
Currently the crosshair goes to where the x-axis baseline is expected to be (not accounting for offset), as also described by Mike Zavarello in the comments.
One workaround from my understanding of your situation is to extend Highcharts and instead draw the crosshair from the maximum value of your first y-axis (the one nearest the top) to the bottom of your second y-axis (the one nearest the bottom).
For example (JSFiddle):
(function (H) {
H.wrap(H.Axis.prototype, 'drawCrosshair', function (proceed, e, point) {
let old_function = H.Axis.prototype.getPlotLinePath;
H.Axis.prototype.getPlotLinePath = function (value, lineWidth, old, force, translatedValue) {
// copy paste handling of x value and sane value threshold
translatedValue = Math.min(Math.max(-1e5, translatedValue), 1e5);
x1 = x2 = Math.round(translatedValue + this.transB);
// max displayed value of your top y-axis
y1 = this.chart.yAxis[0].toPixels(this.chart.yAxis[0].max);
// min displayed value of your bottom y-axis
y2 = this.chart.yAxis[1].toPixels(this.chart.yAxis[1].min);
return this.chart.renderer.crispLine(
['M', x1, y1, 'L', x2, y2],
lineWidth || 1
);
};
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
H.Axis.prototype.getPlotLinePath = old_function;
});
}(Highcharts));
Note that this approach is very much directly addressing your problem by extending Axis.drawCrosshair, and within that extension rewriting the Axis.getPlotLinePath function to alter the path given for the crosshair. It does also not address crosshairs along the y-axis. Still, this could probably be solved in a similar way. It should be thoroughly tested for artifacts.
The length of the the crosshair is the same as xAxis height, so depending on the result you want to achieve set right xAxis height. Axis offset does not affect to the crosshair.
xAxis: {
crosshair: true,
height: 343, // yAxis[1].top - yAxis[0].top + yAxis[1].height
offset: -174
}
Live demo: http://jsfiddle.net/BlackLabel/w5c82ja9/
I'm working on a really small widget which displays a simple bar chart:
I'm using Chart.js for that specific task.
var canvas = this.$(".chart-canvas")[0];
if (canvas) {
var ctx = canvas.getContext("2d");
ctx.translate(0.5, 0.5);
window.barChart = new Chart(ctx).Bar(barChartData, {
responsive: true,
maintainAspectRatio: false,
showScale: false,
scaleShowGridLines: false,
scaleGridLineWidth: 0,
barValueSpacing: 1,
barDatasetSpacing: 0,
showXAxisLabel: false,
barShowStroke: false,
showTooltips: false,
animation: false
});
As you can see, I've tried
ctx.translate(0.5, 0.5);
but that didn't really help.
Is there any way to get rid of the subpixel rendering?
I've read about Bresenham's line algorithm, but don't know how to implement it there.
Any ideas/suggestions appreciated.
Thank you in advance!
Assuming you have only one color, you can do this by extending the chart and overriding the draw to do a getImageData, "rounding" (if the pixel has a R, G or B value, set it to the color) the pixel colors and a putImageData.
You could do this for multiple colors too but it becomes a tad complicated when there are two colors close by.
However the difference in bar value spacing you are seeing is because of the way Chart.js calculates the x position for the bars - there's a rounding off that happens.
You can extend the chart and override the method that calculates the x position to get rid of the rounding off
Chart.types.Bar.extend({
// Passing in a name registers this chart in the Chart namespace in the same way
name: "BarAlt",
initialize: function (data) {
Chart.types.Bar.prototype.initialize.apply(this, arguments);
// copy paste from library code with only 1 line changed
this.scale.calculateX = function (index) {
var isRotated = (this.xLabelRotation > 0),
innerWidth = this.width - (this.xScalePaddingLeft + this.xScalePaddingRight),
valueWidth = innerWidth / Math.max((this.valuesCount - ((this.offsetGridLines) ? 0 : 1)), 1),
valueOffset = (valueWidth * index) + this.xScalePaddingLeft;
if (this.offsetGridLines) {
valueOffset += (valueWidth / 2);
}
// the library code rounds this off - we don't
return valueOffset;
}
// render again because the original initialize call does a render
// when animation is off this is the only render that happens
this.render();
}
});
You'd call it like so
var ctx = document.getElementById('canvas').getContext('2d');
var myBarChart = new Chart(ctx).BarAlt(data, {
...
Fiddle - http://jsfiddle.net/gf2c4ue4/
You can see the difference better if you zoom in.
The top one is the extended chart
I have used c3 to make some graphs and am impressed with its ease of use. However, I'm not sure if it is possible to a 3 value scaling like you can in d3 like the code below:
var yScale= d3.scale.linear()
.domain([0,100,500])
.range([height, height - 20, 0]);
so then i can make my graphs scaled mainly for values below 100 since this is where the majority of values will be and I don't want the bars scale to be skewed by values exceeding 100.
Is it possible to do something like this in c3? or do I need to use d3 to get this sort of scaling?
Thanks
You could use a scale to map the value and scale.invert to get all the labels. For example...
var myScale = d3.scale.linear().domain([0, 5, 50]).range([0, 40, 50]);
var chart = c3.generate({
data: {
columns: [
['A', 3, 2, 1, 4, 1.5, 42.5].map(function (value, index) {
return index ? myScale(value) : value;
})],
type: 'spline'
},
tooltip: {
format: {
value: function (value) {
return parseFloat(myScale.invert(value).toFixed(5));
}
}
},
axis: {
y: {
tick: {
format: function (d) {
return myScale.invert(d)
}
}
}
}
});
The parseFloat and toFixed is to get rid of precision problems when you convert back and forth.
Fiddle - http://jsfiddle.net/rujx39fw/
There is a similar issue on the c3 github at https://github.com/masayuki0812/c3/issues/252. It was closed with a similar workaround (there is a linked question too - that was closed by referencing this workaround)
There is also a related question you may be interested in at https://github.com/masayuki0812/c3/issues/971 that suggests another option, if you are feeling adventurous.
I see how to make stacked bar and column charts in HighCharts. However, I want to be able to put an arrow outside the bar/column to indicate a point in it, similar to this: http://support.sas.com/kb/26/addl/fusion_26104_4_slider_alert.gif
Is this possible in HighCharts? I can't find an example of it.
Of course it is possible.
There are two ways in which you can achieve this.
Use a sctterplot.
In this Approach you build a addl scatterchart series . the value of the scatterchart series will help you to position it like in here http://jsfiddle.net/p2MF6/
{
name: 'indicator',
data: [5],
type: 'scatter',
marker:{
//here you can have your url
symbol: 'circle',
}
}
render a image.
using chart.rendere.image(src,x,y,length,height) you can render any image on the chart.
finding the coordinates is not a big deal.
hope this is what you are looking for
Example for you: http://jsbin.com/oyudan/276/edit
Add triangle and function to change scatter position (if you want to add line to marker, just change returned path):
var chart;
$.extend(Highcharts.Renderer.prototype.symbols, {
'triangle-left': function (a, b, c, d) {
return ["M", a, b + d, "L", a, b, a + c / 2, b + d / 2, "Z"];
}
});
Highcharts.updateMarketMarkers = function (chart,action) {
/* get category width */
var barWidth = chart.series[0].data[0].pointWidth / 2;
for(var i = 0; i < chart.series[2].data.length; i++){
var p = chart.series[2].data[i];
if(p.graphic){
p.graphic[action]({
x: p.plotX - barWidth - p.graphic.r
});
}
}
};
Now add that function to chart, when should be invoked:
chart: {
renderTo: 'container',
type: 'column',
showAxes: false,
events: {
load: function () {
Highcharts.updateMarketMarkers(this, 'attr');
},
redraw: function () {
Highcharts.updateMarketMarkers(this,'attr');
}
}
},
plotOptions: {
series: {
events: {
hide: function(e) {
Highcharts.updateMarketMarkers(this.chart,'animate');
},
show: function() {
Highcharts.updateMarketMarkers(this.chart,'animate');
}
}
},
}
I would use the scatter series approach, as answered above, if you really need a symbol there.
You can also draw a plotLine:
http://api.highcharts.com/highcharts#yAxis.plotLines
This will not include an arrow, of course, but you can draw the line and label in this manner, and IMO the arrow is really not necessary at that point. FWIW