Stuck on the final bits of a multi series line chart - javascript
I built a multi series Highcharts https://www.highcharts.com/ line chart with irregular time data. It's almost there, but I'm doing something wrong with the data and/or data formatting. Anyone have a hint or two to throw my way?
The date from the database was converted from '02/03/2009' to javascript time in php using
$date = strtotime($data['As of Date'])*1000;
The other value is a dollar amount.
I haven't yet added the filtered data for 3MO, 6MO, 1YR, 5YR, 10YR
Here is the jsfiddle https://jsfiddle.net/madmichael/th41g4yt/
$( document ).ready(function() {
createChart();
});
function createChart(chartingOptions) {
var options = {
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'xy',
events: {
load: function(event) {
var total = 0; // get total of data
for (var i = 0, len = this.series[0].yData.length; i < len; i++) {
total += this.series[0].yData[i];
}
var text = this.renderer.text(
'Total: $' + Highcharts.numberFormat(total, 0, '.', ','),
this.plotLeft,
this.plotTop + 20
).attr({
zIndex: 5
}).add() // write it to the upper left hand corner
}
}
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
inputEnabled: false,
allButtonsEnabled: true,
/* buttons: [[]], */
buttons: [
{
type: 'all',
text: 'All'
}, {
type: 'month',
count: 3,
text: '3MO'
}, {
type: 'month',
count: 6,
text: '6MO'
}, {
type: 'year',
text: '1YR',
count: 1
}, {
type: 'year',
text: '5YR',
count: 5
}, {
type: 'year',
text: '10YR',
count: 10
}],
buttonTheme: {
width: 60
},
selected: 0
},
tooltip: {
backgroundColor: null,
borderWidth: 0,
shadow: false,
useHTML: true,
style: {
padding: 0
},
pointFormat: '$' + '{point.y:,.0f}'
/* formatter: function() {
return Highcharts.dateFormat('%b %d, %Y', point.x) + ': $
{point.y:,.1f}';
} */
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%b-%Y', this.value);
}
}
},
yAxis: {
type: 'linear',
labels: {
formatter: function () {
if(this.value >= 0 ){
return '$' + this.value / 1000+'k';
}else{
return '-$' + this.value / 1000*-1+'k';
}
}
}
},
series: [{name: 'Investment Fund (A)',fundtype: 'Load',data: [[1483164000000,37149],[1451541600000,37247],[1420005600000,37071],[1388469600000,33407],[1356933600000,19881],[1325311200000,14132],[1293775200000,21541],[1262239200000,18343],[1480485600000,36659],[1448863200000,39677],[1417327200000,38070],[1385791200000,32212],[1354255200000,18197],[1322632800000,14132],[1291096800000,20173],[1259560800000,17399],[1477890000000,34171],[1446267600000,39069],[1414731600000,36522],[1383195600000,30429],[1351659600000,18468],[1320037200000,14848],[1288501200000,20250],[1256965200000,15703],[1475211600000,36503],[1443589200000,36071],[1412053200000,34602],[1380517200000,29214],[1348981200000,17752],[1317358800000,13048],[1285822800000,19287],[1254286800000,17861],[1472619600000,35249],[1440997200000,38775],[1409461200000,36542],[1377925200000,27548],[1346389200000,16784],[1314766800000,15642],[1283230800000,16994],[1251694800000,16821],[1469941200000,32741],[1438318800000,42537],[1406782800000,34230],[1375246800000,28273],[1343710800000,16203],[1312088400000,17674],[1280552400000,18478],[1249016400000,14335],[1467262800000,29782],[1435640400000,40245],[1404104400000,36150],[1372568400000,26157],[1341032400000,16861],[1309410000000,19707],[1277874000000,17013],[1246338000000,13083],[1496206800000,41636],[1464670800000,33015],[1433048400000,40656],[1401512400000,34720],[1369976400000,26850],[1338440400000,16010],[1306818000000,20963],[1275282000000,19441],[1243746000000,12563],[1493528400000,40010],[1461992400000,32603],[1430370000000,39814],[1398834000000,33779],[1367298000000,25205],[1335762000000,17229],[1304139600000,21233],[1272603600000,21426],[1241067600000,10732],[1490936400000,39794],[1459400400000,33054],[1427778000000,39304],[1396242000000,34798],[1364706000000,24063],[1333170000000,17771],[1301547600000,21021],[1270011600000,20983],[1238475600000,8940],[1456725600000,30977],[1330495200000,17307],[1488261600000,40696],[1425103200000,39285],[1393567200000,34955],[1362031200000,22011],[1298872800000,21233],[1267336800000,19268],[1235800800000,7534],[1233640800000,9422],[1485842400000,37149],[1454220000000,30233],[1422684000000,35856],[1391148000000,33603],[1359612000000,22108],[1327989600000,15990],[1296453600000,21021],[1264917600000,18459]]},{name: 'Investment Fund (A)',fundtype: 'No Load',data: [[1483164000000,39428],[1451541600000,39532],[1420005600000,39345],[1388469600000,35456],[1356933600000,21101],[1325311200000,14999],[1293775200000,22863],[1262239200000,19468],[1480485600000,38908],[1448863200000,42111],[1417327200000,40406],[1385791200000,34188],[1354255200000,19314],[1322632800000,14999],[1291096800000,21411],[1259560800000,18466],[1477890000000,36267],[1446267600000,41466],[1414731600000,38763],[1383195600000,32295],[1351659600000,19601],[1320037200000,15759],[1288501200000,21493],[1256965200000,16667],[1475211600000,38742],[1443589200000,38284],[1412053200000,36725],[1380517200000,31006],[1348981200000,18841],[1317358800000,13848],[1285822800000,20470],[1254286800000,18957],[1472619600000,37411],[1440997200000,41154],[1409461200000,38784],[1377925200000,29238],[1346389200000,17814],[1314766800000,16601],[1283230800000,18037],[1251694800000,17853],[1469941200000,34749],[1438318800000,45147],[1406782800000,36330],[1375246800000,30008],[1343710800000,17197],[1312088400000,18759],[1280552400000,19611],[1249016400000,15215],[1467262800000,31609],[1435640400000,42714],[1404104400000,38368],[1372568400000,27762],[1341032400000,17896],[1309410000000,20916],[1277874000000,18057],[1246338000000,13885],[1496206800000,44190],[1464670800000,35040],[1433048400000,43151],[1401512400000,36850],[1369976400000,28498],[1338440400000,16992],[1306818000000,22249],[1275282000000,20634],[1243746000000,13333],[1493528400000,42464],[1461992400000,34604],[1430370000000,42256],[1398834000000,35851],[1367298000000,26751],[1335762000000,18286],[1304139600000,22536],[1272603600000,22740],[1241067600000,11391],[1490936400000,42236],[1459400400000,35082],[1427778000000,41716],[1396242000000,36933],[1364706000000,25539],[1333170000000,18862],[1301547600000,22311],[1270011600000,22270],[1238475600000,9489],[1456725600000,32878],[1330495200000,18368],[1488261600000,43192],[1425103200000,41695],[1393567200000,37099],[1362031200000,23361],[1298872800000,22536],[1267336800000,20450],[1235800800000,7996],[1233640800000,10000],[1485842400000,39428],[1454220000000,32087],[1422684000000,38056],[1391148000000,35664],[1359612000000,23464],
[1327989600000,16971],[1296453600000,22311],[1264917600000,19591]]},],
plotOptions: {
series: {
events: {
show: function () {
var chart = this.chart,
series = chart.series,
i = series.length,
otherSeries;
while (i--) {
otherSeries = series[i];
if (otherSeries != this && otherSeries.visible)
{
otherSeries.hide();
}
}
},
legendItemClick: function() {
if(this.visible){
return false;
}
}
}
},
line: {
marker: {
enabled: false
},
/* color: '".$attributes["line_color"]."',
*/ }
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme &&
Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
credits: {
enabled: false
},
};
/* options.series[5] = {
name: '5 Yrs',
data: processed_five_years,
visible: false
};
*/
var chart = new Highcharts.stockChart(options);
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
};
Related
Highchart add a text under single bar in bar chart
I want to add a percentage value under the single bar. Here is the Fiddle which displays the percentage under all bars. Below is the code as well. I want to compare the last two values and then add their percentage under the last bar Code var colors = ['#a3cb38','#ea2027','#0652dd','#ffc312']; var dataSum = data.reduce((a,x)=>a+x.y,0); Highcharts.chart('highchart', { chart: { type: 'bar', backgroundColor: null, height: 270, events: { load: function() { this.addSeries({ data: [{x: 0, y: 1},{x: 1, y: 1},{x: 2, y: 1},{x: 3, y: 1}], enableMouseTracking: false, dataLabels: { useHTML: true, formatter:function() { var pcnt = (data[this.x].y / dataSum) * 100; return '<span class="" style="color:' + this.point.color + '">' + Highcharts.numberFormat(pcnt) + '%' + '</span> <span class="">' + data[this.x].name + ' this i want put under the bar' + '</span>'; }} }, true); } } }, title: { text: '' }, xAxis: { type: 'category', labels: { style: { width: '75px', 'min-width': '75px', height: '42px', 'min-height': '42px', align: 'high' }, useHTML : true, formatter: function () { return '<div class="myToolTip" title="Hello">'+this.value+'</div>'; }, } }, colors: colors, yAxis: { min: 0, gridLineWidth: 0, title: { text: '' }, gridLineWidth: 0, labels: { enabled: false } }, credits: { enabled: false }, legend: { enabled: false }, plotOptions: { series: { borderWidth: 0, pointPadding: 0.25, groupPadding: 0, dataLabels: { enabled: true, crop: false, overflow: 'none' }, colorByPoint: true } }, tooltip: { headerFormat: '<span style="font-size:11px"> lorem</span><br>', pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.f} lala</b><br/>' }, series: [{ data: data } ] }); Output Expected Output How can I add a percentage under only a single bar? Any help would be highly appreciated
You can use data labels configuration for a single point. events: { load: function() { this.addSeries(..., { x: 3, y: 1, dataLabels: { useHTML: true, formatter: function() { var pcnt = (data[this.x].y / dataSum) * 100; return '...'; } } }] }, true); } } Live demo: https://jsfiddle.net/BlackLabel/9dmtawg3/ API Reference: https://api.highcharts.com/highcharts/series.column.data.dataLabels
highcharts linechart color for dynamic data
I would to show my line chart into my html page but the filter date is always disabled and i haven't the data in xAxis, i don't know the cause of this kind of the problem ? Any help please ? my code is : function buildNumberElem(tabIn) { var tabOut = []; var data = []; console.log(tabIn); for (i in tabIn) { var daTmp = tabIn[i].split("/"); var da = Date.UTC(parseInt(daTmp[2]), parseInt(daTmp[1]), parseInt(daTmp[0])); if (tabOut[da]) { tabOut[da] = tabOut[da] + 1; } else { tabOut[da] = +1; } } for(i in tabOut){ var dataX = [i,tabOut[i]]; data.push(dataX); } return data; } // lineData var lineData = [{ name: 'RC', data: buildNumberElem(rc) },{ name: 'DAB', data: buildNumberElem(dab) }]; renderSinistersLineChart('line', lineData); $('#lineChart').highcharts('StockChart', { chart: { renderTo: 'container', type: 'line' }, scrollbar: { enabled: false }, navigator: { enabled: true }, rangeSelector : { allButtonsEnabled: true, buttons: [{ type: 'month', count: 3, text: 'Jours', dataGrouping: { forced: true, units: [['day', [1]]] } },{ type: 'all', text: 'Mois', dataGrouping: { forced: true, units: [['month', [1]]] } }], buttonTheme: { width: 60 }, selected: 2 }, title: { text: 'Déclarations de Sinistres', x: -20 //center }, subtitle: { text: 'du 01/01/'+ year +' au '+ today, x: -20 }, tooltip: { valueSuffix: ' sinistres', }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'bottom', borderWidth: 0 }, // Dynamic DATA series: linedata , credits: { enabled: false }, exporting: { buttons: { contextButton: { text: 'Imprimer' } }, printButton: { enabled: true } } });
HighCharts column chart populated with series data from a function
I'm trying to populate a HighCharts dataset with results from SQL Server in Classic ASP. (In the examples obviously there are numbers and names instead of vbscript variables) The first example is without a function - and works. http://jsfiddle.net/zbpamrhs/ $(function () { var OnOff = 3 var DivName = [] var DivN = [] var DivTotal = [] var DivColor = [] DivName[0] = 'Div' DivName[1] = 'Unit A' DivName[2] = 'Unit B' DivName[3] = 'Unit C' DivN[0] = 22 DivN[1] = 10 DivN[2] = 7 DivN[3] = 3 DivTotal[0] = 5.6 DivTotal[1] = 5.8 DivTotal[2] = 5.4 DivTotal[3] = 5.7 DivColor[0] = '#333333' DivColor[1] = '#c9e7ff' DivColor[2] = '#4898a4' DivColor[3] = '#ffd949' $('#DivCompTotalC').highcharts({ chart: { type: 'column' }, title: { text: '' }, credits: { enabled: false }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', itemWidth: 180, useHTML: true, x: 0, y: 40, borderWidth: 0 }, xAxis: { categories: [''] }, yAxis: { max: 7.01, labels: { enabled: false }, gridLineColor: 'transparent', plotLines: [{ value: DivTotal[0], color: DivColor[0], width: 2, label: { text: DivName[0] + '=' + DivTotal[0] + '<br>N=' + DivN[0], align: 'right', y: -5, x: 0, style: { fontSize: '13px' } }, zIndex: 2 }], title: { text: '' } }, plotOptions: { column: { pointPadding: 0.2, groupPadding: 0.10, borderWidth: 0 }, series: { dataLabels: { enabled: true, y: 5, style: { fontSize: '14px' } }, enableMouseTracking: false, events: { legendItemClick: function () { return false; } } } }, series: [{ name: DivName[1] + ' [' + DivN[1] + ']', color: '#c9e7ff', data: [DivTotal[1]] }, { name: DivName[2] + ' [' + DivN[2] + ']', color: '#ffd949', data: [DivTotal[2]] }, { name: DivName[3] + ' [' + DivN[3] + ']', color: '#4898a4', data: [DivTotal[3]] }] }); }); I cannot find what's wrong in the second http://jsfiddle.net/bfb6crpv/ $(function () { var OnOff = 3 var DivName = [] var DivN = [] var DivTotal = [] var DivColor = [] DivName[0] = 'Div' DivName[1] = 'Unit A' DivName[2] = 'Unit B' DivName[3] = 'Unit C' DivN[0] = 22 DivN[1] = 10 DivN[2] = 7 DivN[3] = 3 DivTotal[0] = 5.66666666666667 DivTotal[1] = 5.81208053691275 DivTotal[2] = 5.41304347826087 DivTotal[3] = 5.74683544303798 DivColor[0] = '#333333' DivColor[1] = '#c9e7ff' DivColor[2] = '#4898a4' DivColor[3] = '#ffd949' $('#DivCompTotalC').highcharts({ chart: { type: 'column' }, title: { text: '' }, credits: { enabled: false }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', itemWidth: 180, useHTML: true, x: 0, y: 40, borderWidth: 0 }, xAxis: { categories: [''] }, yAxis: { max: 7.01, labels: { enabled: false }, gridLineColor: 'transparent', plotLines: [{ value: DivTotal[0], color: DivColor[0], width: 2, label: { text: DivName[0] + '=' + DivTotal[0] + '<br>N=' + DivN[0], align: 'right', y: -5, x: 0, style: { fontSize: '13px' } }, zIndex: 2 }], title: { text: '' } }, plotOptions: { column: { pointPadding: 0.2, groupPadding: 0.10, borderWidth: 0 }, series: { dataLabels: { enabled: true, y: 5, style: { fontSize: '14px' } }, enableMouseTracking: false, events: { legendItemClick: function () { return false; } } } }, series: [] }); var newSeries = []; for (var i = 1; i <= OnOff; i++) { var newData = []; var seria = {}; seria['name'] = DivName[i] + ' [' + DivN[i] + ']'; seria['data'] = DivTotal[i]; seria['color'] = DivColor[i]; newSeries.push(seria); } //alert(JSON.stringify(newSeries)); var chart = $('#DivCompTotalC').highcharts(); //alert(JSON.stringify(chart)); $.each(newSeries, function (i, ns) { chart.addSeries(ns); }); });
There are multiple issues : You are trying to addSeries instead of points as compared to the first working fiddle. chart.addSeries(ns); seria['data'] = DivTotal[i]; data is supposed to be an array as per the working fiddle. Working fiddle with existing series - http://jsfiddle.net/nitincool4urchat/bfb6crpv/10/ Working fiddle with no series - http://jsfiddle.net/nitincool4urchat/bfb6crpv/13/ Docs - http://api.highcharts.com/highcharts#Series.addPoint Related question : trying to dynamically update Highchart column chart but series undefined
Disabling label without bar Highstock
I have a column chart Highstock: http://jsfiddle.net/txfnsubb/ When we change range to smaller values, sometimes it shows us a label of value w/o the bar. For example I see 30 bars and at the end label with 31. Is there a possibility to turn it off? To set chart to showing label only with bar. $('#container').highcharts('StockChart', { chart: { marginTop: 140 }, credits: { enabled: false }, plotOptions: { series: { dataGrouping: { approximation: "average" } } }, scrollbar: { enabled: false }, navigator: { top: 40, xAxis: { labels: { formatter: function () { return x[this.value]; } } } }, xAxis: { labels: { y: 50, max: 150, formatter: function () { return x[this.value]; } } }, tooltip: { formatter: function () { var s = []; var next = this.x + this.points[0].series.pointRange; if ((this.x + 1) == next) { s.push("<b>Position: " + (this.x + 1)); } else { s.push("<b>Position: " + (this.x + 1) + "-" + next); } $.each(this.points, function (i, point) { s.push('<span style="color:#D31B22;font-weight:bold;">' + point.series.name + ' : <span>' + point.y.toFixed(2)); }); return s.join('<br/>'); }, shared: true }, series: [{ type: 'column', name: 'reactivity', data: data, showInLegend: false, tooltip: { valueDecimals: 2, shared: true } }, { type: 'spline', name: 'experiment 1', data: data2, color: 'green', visible: false, tooltip: { valueDecimals: 2 } }, { type: 'spline', name: 'experiment 2', data: data3, color: 'red', visible: false, tooltip: { valueDecimals: 2 } }], legend: { enabled: true, margin: 0 }, rangeSelector: { buttons: [{ type: 'millisecond', count: seqLength / 5, text: '0.25' }, { type: 'millisecond', count: seqLength / 3, text: '0.3' }, { type: 'millisecond', count: seqLength / 2, text: '0.5' }, { type: 'all', text: '1.0' }], inputEnabled: false, // it supports only days selected: 4 // all } });
Plot always starts at 0, highstock spline chart
I have data like this var data = []; for(var i=1;i<201;i++){ data.push([i,(Math.random() * (80 - 40 + 1)) + 40]) } And I'm creating chart like this: $('.reactivityCont').highcharts('StockChart', { chart: { marginTop: 140 }, credits: { enabled: false }, rangeSelector : { selected : 1 }, scrollbar: { enabled: false }, navigator: { top : 40, xAxis: { labels: { formatter: function() { return this.value; } } } }, xAxis: { labels: { y: 50, formatter: function() { return this.value; } }, events: { setExtremes: function (e) { start = parseInt(e.min); koniec = parseInt(e.max); $('.nt').hide(); for(var i = start-1;i<koniec;i++){ $('.nt').eq(i).show(); } main(); } } }, series : [{ type: 'column', name : 'reactivity', data : data, showInLegend: false, tooltip: { valueDecimals: 2 } }, {type: 'spline', name: 'experiment 1', data: data2, color: 'green', visible: false, tooltip: { valueDecimals: 2 } }, {type: 'spline', name: 'experiment 2', data: data3, color: 'red', visible: false, tooltip: { valueDecimals: 2 } } ], legend :{ enabled: true, margin: 0 }, rangeSelector : { buttons: [ { type: 'millisecond', count: seqLength/5, text: '0.25' }, { type: 'millisecond', count: seqLength/3, text: '0.3' }, { type: 'millisecond', count: seqLength/2, text: '0.5' }, { type: 'all', text: '1.0' } ], inputEnabled: false, // it supports only days selected : 4 // all } }); But unfortunately, my plot starts with 0, but it should not, because there is no such a value. I tried fix it, e. g. by setting plotOptions:pointStart but that didn't work.
This is caused by using column type series, where columns always starts from 0. To prevent this set threshold: null, like this: series : [{ type: 'column', threshold: null, ... }]
You can use theXAxis's min param. For Example. xAxis: { labels: { formatter: function() { return this.value; } }, min: myInitValue, max: myEndValue } Hope It Helps.