Highcharts error bars not linking with the datapoints. - highcharts
This could be trivial question, I am trying for past few hours on doing Error bars on Highcharts
Following is my fiddle
$(function() {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Temperature vs Rainfall'
},
xAxis: [{
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value} °C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
series: [{
"id": "1",
"name": "Gas",
"color": "#3366CC",
"data": [
[906.75, 0.0000100686],
[914.5, 0.0000101503],
[922.25, 0.0000102317],
[930, 0.000010313],
[937.75, 0.0000103941],
[945.5, 0.0000104751],
[953.25, 0.0000105558],
[961, 0.0000106364],
[968.75, 0.0000107168],
[976.5, 0.000010797],
[984.25, 0.000010877],
[992, 0.0000109569],
[999.75, 0.0000110366],
[1007.5, 0.0000111161],
[1015.25, 0.0000111954],
[1023, 0.0000112745],
[1030.75, 0.0000113535],
[1038.5, 0.0000114323],
[1046.25, 0.0000115108],
[1054, 0.0000115893],
[1061.75, 0.0000116675],
[1069.5, 0.0000117455],
[1077.25, 0.0000118234],
[1085, 0.000011901],
[1092.75, 0.0000119785],
[1100.5, 0.0000120558],
[1108.25, 0.000012133],
[1116, 0.0000122099],
[1123.75, 0.0000122866],
[1131.5, 0.0000123632],
[1139.25, 0.0000124396],
[1147, 0.0000125157],
[1154.75, 0.0000125917],
[1162.5, 0.0000126675],
[1170.25, 0.0000127432],
[1178, 0.0000128186],
[1185.75, 0.0000128938],
[1193.5, 0.0000129689],
[1201.25, 0.0000130437],
[1209, 0.0000131184],
[1216.75, 0.0000131929],
[1224.5, 0.0000132672],
[1232.25, 0.0000133413],
[1240, 0.0000134152],
[1247.75, 0.0000134889],
[1255.5, 0.0000135624],
[1263.25, 0.0000136357],
[1271, 0.0000137088],
[1278.75, 0.0000137818],
[1286.5, 0.0000138545],
[1294.25, 0.0000139271],
[1302, 0.0000139994],
[1309.75, 0.0000140716],
[1310, 0.0000140739],
[690, 0.00000771572],
[697.5, 0.00000779934],
[705.25, 0.00000788558],
[713, 0.00000797166],
[720.75, 0.00000805757],
[728.5, 0.00000814331],
[736.25, 0.00000822889],
[744, 0.0000083143],
[751.75, 0.00000839954],
[759.5, 0.00000848462],
[767.25, 0.00000856953],
[775, 0.00000865426],
[782.75, 0.00000873883],
[790.5, 0.00000882323],
[798.25, 0.00000890746],
[806, 0.00000899152],
[813.75, 0.00000907541],
[821.5, 0.00000915913],
[829.25, 0.00000924268],
[837, 0.00000932606],
[844.75, 0.00000940926],
[852.5, 0.00000949229],
[860.25, 0.00000957515],
[868, 0.00000965783],
[875.75, 0.00000974035],
[883.5, 0.00000982268],
[891.25, 0.00000990484],
[899, 0.00000998683]
]
}, {
"name": "Gas Uncertainity",
"color": "#3366CC",
"data": [
[0.0000079392, 0.000012198],
[0.00000804165, 0.00001225895],
[0.0000081433, 0.000012320100000000001],
[0.00000824331, 0.000012382689999999998],
[0.00000834055, 0.00001244765],
[0.000008434150000000001, 0.00001251605],
[0.00000852307, 0.00001258853],
[0.00000860678, 0.00001266602],
[0.00000868463, 0.00001274897],
[0.00000875628, 0.00001283772],
[0.00000882159, 0.000012932409999999999],
[0.00000888074, 0.00001303306],
[0.00000893391, 0.00001313929],
[0.0000089816, 0.0000132506],
[0.00000902445, 0.00001336635],
[0.00000906322, 0.00001348578],
[0.00000909888, 0.00001360812],
[0.00000913225, 0.00001373235],
[0.00000916418, 0.00001385742],
[0.000009195939999999999, 0.00001398266],
[0.00000922814, 0.00001410686],
[0.000009261779999999999, 0.00001422922],
[0.0000092978, 0.000014349],
[0.000009336759999999999, 0.000014465240000000001],
[0.00000937955, 0.00001457745],
[0.000009426630000000001, 0.00001468497],
[0.00000947856, 0.000014787440000000001],
[0.00000953547, 0.00001488433],
[0.00000959761, 0.00001497559],
[0.00000966503, 0.00001506137],
[0.00000973737, 0.00001514183],
[0.000009813969999999999, 0.00001521743],
[0.00000989415, 0.00001528925],
[0.000009976540000000001, 0.00001535846],
[0.0000100595, 0.0000154269],
[0.00001014056, 0.00001549664],
[0.00001021695, 0.00001557065],
[0.000010285320000000001, 0.00001565248],
[0.00001034137, 0.00001574603],
[0.000010380729999999999, 0.00001585607],
[0.00001039843, 0.00001598737],
[0.000010389550000000001, 0.000016144850000000002],
[0.00001034949, 0.000016333110000000002],
[0.00001027427, 0.00001655613],
[0.00001016072, 0.00001681708],
[0.00001000665, 0.00001711815],
[0.0000098107, 0.0000174607],
[0.00000957223, 0.00001784537],
[0.00000929121, 0.00001827239],
[0.00000896759, 0.000018741409999999997],
[0.00000860191, 0.000019252289999999998],
[0.0000081943, 0.0000198045],
[0.00000774527, 0.00002039793],
[0.00000773007, 0.000020417729999999998],
[0.000003741599999999999, 0.00001168984],
[0.000004200829999999999, 0.00001139785],
[0.00000463468, 0.00001113648],
[0.000005026089999999999, 0.00001091723],
[0.000005373990000000001, 0.00001074115],
[0.00000567765, 0.00001060897],
[0.000005937139999999999, 0.00001052064],
[0.000006153729999999999, 0.00001047487],
[0.000006330319999999999, 0.00001046876],
[0.00000647147, 0.00001049777],
[0.00000658298, 0.00001055608],
[0.0000066713, 0.00001063722],
[0.000006742800000000001, 0.00001073486],
[0.000006803219999999999, 0.00001084324],
[0.0000068574199999999995, 0.0000109575],
[0.00000690924, 0.000011073799999999999],
[0.0000069616, 0.00001118922],
[0.000007016640000000001, 0.00001130162],
[0.000007075800000000001, 0.00001140956],
[0.000007140009999999999, 0.000011512109999999998],
[0.00000720975, 0.000011608770000000001],
[0.00000728518, 0.0000116994],
[0.000007366199999999999, 0.0000117841],
[0.0000074524299999999996, 0.00001186323],
[0.000007543390000000001, 0.00001193731],
[0.00000763838, 0.00001200698],
[0.00000773662, 0.00001207306],
[0.000007837229999999999, 0.00001213643]
],
"type": "errorbar",
"tooltip": {
"pointFormat": "(Uncertainity: {point.low}-{point.high})<br/>"
},
"linkedTo": "1"
}]
});
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
http://jsfiddle.net/Dilip/m69wuyts/
The error bars are getting detached, not sure how to link them. Please help.
Thanks in advance.
Your error bar data should be in the form of [x, low, high] you have [low, high].
Also, you should sort your data by x values.
I added some processing to your data sets
http://jsfiddle.net/m69wuyts/1/
Related
How to format tool tip as currency in piechart chartJS?
I am using chartJS in my rails app and my chart code is added below. When hovering over sections I need to display as "Label name: $ 636"...Now when hovering it displays as "Label name: 636". The current chart with tooltip is
var ctx = document.getElementById('dollar-issue-area').getContext('2d');
var that = this;
this.chart = new Chart(ctx, {
type: 'pie',
data: {
labels: <%= raw dollar_per_type.collect { |k, v| k } %>,
datasets: [{
label: 'Number of tickets',
data: <%= raw dollar_per_type.collect { |k, v| v } %>,
backgroundColor: palette('tol-dv', <%= raw dollar_per_type.collect { |k, v| k }.length %>).map(function(hex) {return '#' + hex;})
}]
},
options: {
title:{
display: true,
text: 'Dollar per Sub Issue Type from <%= start_date %> to <%= end_date %>'
},
legend: {
display: true,
labels: {
display: false,
fontSize: 10
}
}
}
});
you can use a tooltips callback function.
here, the label callback is used to customize the tooltip content...
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return data['labels'][tooltipItem['index']] + ': $' + data['datasets'][0]['data'][tooltipItem['index']];
}
}
}
see following working snippet...
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['confirmed', 'pending'],
datasets: [{
data: [67, 33],
backgroundColor: [
'rgba(41, 121, 255, 1)',
'rgba(38, 198, 218, 1)'
],
}]
},
options: {
title: {
display: true,
text: 'Dollar per Sub Issue Type'
},
legend: {
display: true,
labels: {
display: false,
fontSize: 10
}
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return data['labels'][tooltipItem['index']] + ': $' + data['datasets'][0]['data'][tooltipItem['index']];
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>
Highcharts: set only last chunk of line as a dotted zone
I'm trying to get this chart to only be dotted for the last month:
chart_data = [[1496275200000, 981], [1498867200000, 1089], [1501545600000, 1595], [1504224000000, 1296], [1506816000000, 1678], [1509494400000, 1879], [1512086400000, 2028], [1514764800000, 1885], [1517443200000, 1366], [1519862400000, 1558], [1522540800000, 1636], [1525132800000, 2438], [1527811200000, 2899], [1530403200000, 2521], [1533081600000, 2879], [1535760000000, 1702]]
Highcharts.chart('container', {
title: {
text: 'Zone with dash style'
},
subtitle: {
text: 'Dotted line typically signifies prognosis'
},
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%Y-%m', this.value)
}
},
tickInterval: 30 * 24 * 3600 * 1000,
},
series: [{
data: chart_data,
zoneAxis: 'x',
zones: [{
value: chart_data.length - 2
}, {
dashStyle: 'dot'
}]
}]
});
https://jsfiddle.net/aL57381b/
(This highcharts code is basically the same as: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/color-zones-dashstyle-dot/ from the highcharts documentation, just with my time-series data instead.
However, it makes the entire chart turn dotted instead of just the last bit. Any ideas why? I can't seem to fix this.
You need the real value not the starting index like that :
dottedStartIndex = chart_data[chart_data.length - 2][0];
Highcharts.chart('container', {
...
zones: [{
value: dottedStartIndex
}, {
dashStyle: 'dot'
}]
Fiddle
Highchart is not showing in heroku, but works in local environment
I am using ember-highcharts in my app. I tested in my localhost and it is working fine, the graphic is showing in the screen.
I deployed my application in heroku, and try to show the graphic but the error below appears:
Uncaught TypeError: Cannot read property 'parentGroup' of undefined
at object.setState (highcharts.src.js:33606)
at SVGGElement. (highcharts.src.js:33080)
Here is my code:
{{#if question.chartData}}
{{high-charts content=question.chartData chartOptions=chartOptions}}
{{else}}
<div class="modal__warning">Dados insuficientes</div>
{{/if}}
chartOptions: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: null
},
tooltip: {
pointFormat: '<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
colors: [
'#60E0A1',
'#F19692',
'#d5d5d5',
'#68599D',
'#A69BC5'
],
dataLabels: {
enabled: false
},
size: '100%',
showInLegend: true,
startAngle: -90,
endAngle: 90,
center: ['50%', '100%']
}
},
yAxis: {
title: {
text: null
}
}
}
Does anyone know what the problem could be? Just remember that in my local machine is working fine!
Thanks in advance :)
I've discovered the issue. What happened is that the data that I was sending to Highcharts was using an incorrect format.
I am plotting a pie chart, and the data should be in the format below:
[ ["test", 10.0], ["test2", 85.0], ["test3", 5.0] ]
And I was sending the data like this:
{ {"test", 10.0}, {"test2", 85.0}, {"test3", 5.0} }
For some reason this caused the problem mentioned.
Kendo Stacked Bar Chart configuration
I have an MVC app and my controller is passing the following json data to my view
data:
{
"Category":"Q1 2013",
"Name":"Female",
"Count":5000
},
{
"Category":"Q1 2013",
"Name":"Male",
"Count":5000
}
{
"Category":"Q1 2012",
"Name":"Female",
"Count":3500
},
{
"Category":"Q1 2012",
"Name":"Male",
"Count":5000
}
I need to know how to configure my Kendo stacked bar chart to display the data like this http://jsfiddle.net/ihatemash/B6LSX/
I can't figure out how to configure the series and category to show the stacked bar chart correctly.
here is working example
http://jsfiddle.net/idhasitha/F2TQ8/
try with like this
var data = [
{"Name":1,"Year":2011,"Expense":200.00},
{"Name":1,"Year":2012,"Expense":274.91},
{"Name":5,"Year":2011,"Expense":100.00},
{"Name":5,"Year":2012,"Expense":315.84},
];
$(document).ready(function() {
$("#chart").kendoChart({
theme: "silver",
title: {
text: "Total records processed"
},
legend: {
position: "bottom"
},
dataSource: {
data: data,
group: {
field: "Name"
}
},
transitions: false,
series: [{
type: "column",
stack: "true",
field: "Expense"
}],
categoryAxis: {
field: "Year"
}
});
});
Sencha Touch 2 geolocation using Google Maps
I'm trying to implement geolocation on my app written in sencha framework, but I don't really know how to implement geolocation using Sencha Touch 2 and Google Maps Api.
I have following code:
Ext.define('App.view.WhereAmI', {
extend: 'Ext.Container',
xtype: 'whereAmI',
//? fullscreen: true,
requires: [
'Ext.Map'
],
config: {
layout: 'fit',
scrollable: true,
styleHtmlContent: true,
style: 'text-align: center; background-color:white;',
items:
[
{
xtype: 'toolbar',
docked: 'top',
title: 'Where Am I?',
minHeight: '60px',
items: [
{
ui: 'back',
xtype: 'button',
id: 'backButton',
text: 'Powrót',
},
{
minHeight: '60px',
right: '5px',
html: ['<img src="resources/images/Image.png"/ style="height: 100%; ">',].join(""),
},
],
},
{
xtype:'map',
},
]
},
//launch : function () { },
});
What do I exactly need to add to this view to implement marker with my current location?
Thanks for help!
Try using geolocation :
var geo = Ext.create('Ext.util.Geolocation', {
autoUpdate:false,
listeners:{
locationupdate:function (geo) {
console.log('Current latitude: ' + geo.getLatitude() + 'Long: ' + geo.getLongitude());
},
locationerror:function (geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
if (bTimeout) {
alert('Timeout occurred.');
} else {
alert('Error occurred.');
}
}
}
});
or add
useCurrentLocation:true,
in sencha touch map