Develop Reference

Chart js Bubble Chart Number inside bubble

I am using ng2-charts to get a bubble chart with this type mentioned in the picture. I have installed chart-js plugins also but I am not capable of getting the numbers inside the bubbles.
Expectation : Inside Bubble I want to write number such as 1, 2, 3 like that
Here is my html ionic code
<div style="display: block">
<canvas baseChart
[datasets]="bubbleChartData"
[options]="bubbleChartOptions"
[colors]="bubbleChartColors"
[legend]="bubbleChartLegend"
[chartType]="bubbleChartType">
</canvas>
</div>
Also here is my typescript code describing ng2-charts
export class DashboardPage {
bubbleChartOptions: ChartOptions = {
responsive: true,
scales: {
xAxes: [
{
display: true,
girdlines: { drawTicks: false, drawBorder: false, display: true}
ticks: {display: false, stepSize: 1, min: 1, max: 7 }
}
],
yAxes: [
{
display: false,
girdlines: { drawTicks: false, display: true}
ticks: {display: false, stepSize: 1, min: 0, max: 10 }
}
],
}
};
bubbleChartData: ChartDataSets[] = [
{
data: [
{ x: 1, y: 2, r: 8, },
{ x: 2, y: 7, r: 8 },
{ x: 3, y: 5, r: 8 },
{ x: 4, y: 3, r: 8 },
{ x: 5, y: 8, r: 8 },
{ x: 6, y: 1, r: 8 },
{ x: 7, y: 5, r: 8 },
],
label: '20',
backgroundColor: 'white',
borderColor: 'blue',
borderWidth: 2,
hoverBackgroundColor: 'purple',
hoverBorderColor: 'red',
},
];

HighCharts :(Solid Gauge) How to generate gauge dial with an arrow end.

I am trying to create a custom data dial using high charts ( solid gauge ).
Please help me .
I am unable to generate an arrow end like tip dial of solid gauge. This is my current chart :
Updated Code : Please copy paste the code in the fiddle link provided below:
$(function() {
var gaugeOptions = {
chart: {
type: 'solidgauge',
height: 80,
width: 120,
backgroundColor: null
},
title: null,
pane: {
center: ['50%', '60%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
},
gauge: {
dial: {
baseWidth: 1,
topWidth: 1
},
pivot: {
radius: 3,
borderWidth: 1
}
}
}
};
// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 5,
tickPositions: [],
plotBands: [{ // mark the weekend
color: {
linearGradient: [0, 0, 300, 0],
stops: [
[0.1, '#55BF3B'], // green
[0.2, '#DDDF0D'], // yellow
[0.3, '#DF5353']
]
},
from: 0,
to: 5,
innerRadius: '60%',
outerRadius: '100%',
}],
},
series: [{
name: 'Ship Average',
type: 'gauge',
data: [2],
color: {
linearGradient: [0, 0, 300, 0],
stops: [
[0.1, '#55BF3B'], // green
[0.25, '#DDDF0D'], // yellow
[0.4, '#DF5353']
]
},
dataLabels: {
format: '<span style="font-size:10px;color:grey;">{y} delays</span></div>',
y: 30,
borderWidth: 0
},
tooltip: {
valueSuffix: ' days'
}
}]
}));
});
http://jsfiddle.net/n9gfeor2/29/
Expected result :

You can realize it by wrapping dial method (translate) and edit path.
point.shapeArgs = {
d: dialOptions.path || [
'M', -rearLength, -baseWidth / 2,
'L',
baseLength, -baseWidth / 2,
radius, -topWidth / 2,
radius - 10, -topWidth / 2 - 10,
'M',
radius, -topWidth / 2,
'L',
radius - 10, -topWidth / 2 + 10,
'M',
radius, -topWidth / 2,
baseLength, baseWidth / 2, -rearLength, baseWidth / 2,
'z'
],
Simple demo:
http://jsfiddle.net/L488w1as/

how to adjust the tickposition or 'x' axis on areapline highchart

The situation with my char is that currently the tick marks are positioned according to my "tickposition" paramenter, they displayed what I want but the problem is that for example the tick mark on '50' should be right on the middle of the chart, below the 50% bubble. So my chart looks off center.
I am not sure if the type of chart I am using is the correct one or how to approach this problem. I am super new on Highcharts.
Here is what I have:
http://jsfiddle.net/cjwh/hu1t8159/15/
$(function () {
$('#container').highcharts({
xAxis: {
tickPositions: [250, 500, 750, 1000],
min: 0,
max: 900,
labels: {
formatter: function() {
return this.value / 10;
}
},
},
yAxis: {
min: 0,
allowDecimals: false,
floor : 0,
ceiling: 200,
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
title: {
text: null
}
},
chart: {
events: {
redraw: function () {
var chart = this,
point = chart.series[1].points[0];
if(chart.customLabel) {
chart.customLabel.attr({
x: point.plotX + chart.plotLeft - 25,
y: point.plotY + chart.plotTop - 65,
anchorX: point.plotX + chart.plotLeft,
anchorY: point.plotY + chart.plotTop
});
}
}
}
},
legend: {
enabled: false
},
series: [{
type: 'areaspline',
marker: {
enabled: false
},
data: [
[0, 1],
[210, 1],
[225, 2],
[372,108],
[378,112],
[387, 118],
[396, 122],
[403, 125],
[433, 130],
[450, 129],
[460, 126],
[472, 122],
[479, 118],
[486, 114],
[495,108],
[502,102],
[504,100],
[510, 94],
[514, 89],
[518, 85],
[522, 81],
[526, 76],
[529, 72],
[534, 67],
[541, 59],
[548, 51],
[556, 43],
[566, 34],
[583, 22],
[593, 17],
[612, 9],
[621, 6],
[626, 5],
[635, 3],
[642, 2],
[651, 1],
[870, 1],
[1000, 1]
],
zoneAxis: 'x',
zones: [{
value: 430,
color: '#18d1ba'
}, {
color: '#74e3d6'
}]
}, {
type: 'scatter',
data: [
[430, 130]
],
marker: {
radius: 8,
symbol: 'circle',
fillColor: '#fff',
lineColor: '#09f',
lineWidth: 3
}
}]
}, function (chart) { // on complete
var point = chart.series[1].points[0];
chart.customLabel = chart.renderer.label('50%', point.plotX + chart.plotLeft - 25, point.plotY + chart.plotTop - 65, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
.css({
color: '#09f',
fontSize: '18px'
})
.attr({
'stroke-width': 3,
stroke: '#09f',
fill: '#fff',
padding: 8,
r: 5,
zIndex: 6
})
.add();
});
});
This is a picture of the desired chart, please note the position of the 'x' positions or tickmarks.
http://claudiawong.ca/test/example.png
Would anyone happen to give me an example of what to change, ideally an example on the form of a jsfiddle would be really helpful.
Thanks!!!!

To expand on my comment:
1) You know, in your example, that 50% is 430. You can determine from that what 25, 75, and 100% are.
2) You can set the values of those percentages as your tickPositions array.
3) You will need to map the values to the % that you want to display in your labels
A very quick and dirty example:
var x100 = 860;
var x75 = (x100 * .75);
var x50 = (x100 * .5 );
var x25 = (x100 * .25);
var vals = {};
vals[x100] = '100';
vals[x75 ] = '75';
vals[x50 ] = '50';
vals[x25 ] = '25';
You can then use this object in your label formatter to display the correct value.
Example:http://jsfiddle.net/hu1t8159/18/

flot chart is not appearing completely

Am using flot js to get chart.Its coming fine but I am getting half of chart.What is the issue here,
My code is
<div style="width:1120px; height:500px;">
<div id="chart_2" style="width:1100px; height:480px;" > </div>
</div>
DataSet1 = [
[new Date("2013/01/02").getTime(), 60],
[new Date("2013/02/03").getTime(), 16 ],
[new Date("2013/03/04").getTime(), 32 ],
[new Date("2013/04/05").getTime(), 189],
[new Date("2013/05/06").getTime(), 192],
[new Date("2013/06/06").getTime(), 154],
[new Date("2013/07/06").getTime(), 336],
[new Date("2013/08/06").getTime(), 203],
[new Date("2013/09/06").getTime(), 366],
];
chartColor = $(this).parent().parent().css("color");
$.plot($("#chart_2"),[ { data: DataSet1} ] ,{
xaxis:
{ mode: "time",
min: (new Date("2013/01/01")).getTime(),
max: (new Date("2014/11/09")).getTime(),
timeformat: "%d/%m/%y",
ticks: [new Date("2013/01/01").getTime(),new Date("2013/02/01").getTime(),new Date("2013/03/01").getTime(),new Date("2013/04/01").getTime(),new Date("2013/05/01").getTime(),new Date("2013/06/01").getTime(),new Date("2013/07/01").getTime() ],
minTickSize :30
}
,yaxis: {
min:0, max: 400, tickSize: 50
},
series: {
label: "Revenue",
lines: {
show: true,
lineWidth: 3,
fill: true
},
shadowSize: 0
},
grid: { hoverable: true,
clickable: true,
tickColor: "rgba(255,255,255,.15)",
borderColor: "rgba(255,255,255,0)"
},
colors: ["#294777"],
legend: {
show: true
}
});
what did i make here to get half chart

SOLVED
Your max value is clipping your chart.
max: (new Date("2013/9/09")).getTime(),

jQplot OHLC Renderer mouseover for the bars

I have just implemented a chart using jQplot plugin. I have used OHLCRenderer as the renderer and the chart looks like this.
Can you please tell me how to add a mouse-over option to the bars so that i can show some information when i mouse-over each bars. Thanks
This is the code
var catOHLC = [
[1, 10, 6.5, 10, 10],
[2, 1.2, 5, 1.2, 1.2],
[3, 8, 10, 8, 8],
];
var catOHLC1 = [
[1, 0, 5, 0, 0]
];
var ticks = ['A', 'B', 'C', 'D', 'E'];
var ticks2 = [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
plot4 = $.jqplot('chart4', [catOHLC, catOHLC1], {
stackSeries: true,
axes: {
xaxis: {
renderer:$.jqplot.CategoryAxisRenderer,
ticks:ticks
},
yaxis: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
ticks: ticks2,
max: 24,
min: 0
}
},
series: [{ renderer: $.jqplot.OHLCRenderer, rendererOptions: { candleStick: false, tickLength: 0, lineWidth: 10 } },
{ renderer: $.jqplot.OHLCRenderer, rendererOptions: { candleStick: false, tickLength: 0, lineWidth: 10 } }],
});});

I used the jqplot highlighter plugin to make this work with a slightly modified version of your code. Here is the jsfiddle, and the code is below. Note that this is fairly similar to the example at http://www.jqplot.com/tests/candlestick-charts.php .
plot4 = $.jqplot('chart4', [catOHLC, catOHLC1], {
series: [{
renderer: $.jqplot.OHLCRenderer,
rendererOptions: {
tickLength: 4,
lineWidth: 10
}
}, {
renderer: $.jqplot.OHLCRenderer,
rendererOptions: {
tickLength: 4,
lineWidth: 10
}
}],
highlighter: {
show: true,
showMarker: false,
tooltipAxes: 'xy',
yvalues: 4,
formatString: '<table class="jqplot-highlighter"> \
<tr><td>x:</td><td>%s</td></tr> \
<tr><td>open:</td><td>%s</td></tr> \
<tr><td>hi:</td><td>%s</td></tr> \
<tr><td>low:</td><td>%s</td></tr> \
<tr><td>close:</td><td>%s</td></tr></table>'
}
});