highcharts linechart color for dynamic data - javascript
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
}
}
});
Related
Stuck on the final bits of a multi series line chart
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: ',' } }); };
Highcharts how to make the y axis series value return only 2 decimal places
I want to make the format of my y axis series to only return 2 decimal places. I have this code: $('#main-graph').highcharts({ chart:{ zoomType:'xy', type: 'spline' }, title: { text: '', x: -20 //center }, xAxis: { categories: stat_date, crosshair:true, }, yAxis: [ { //0 title: { text: 'Impressions' }, }, {//1 title:{ text: "Clicks" } }, { //2 title:{ text: "CTR" } }, { //3 title:{ text: "CPM" } }, { //4 title:{ text: "CPC" } }, { //5 - secondary axis which is the SPEND axis title: { text: "Spend", style:{ // color: Highcharts.getOptions().colors[0] color: "#8B8B8B" } }, opposite:true }], tooltip: { shared: true, valueDecimals: 2 // pointFormat: "{point.y:,.2f}" }, legend: { layout: 'horizontal', align: 'top', verticalAlign: 'top', borderWidth: 0, floating:true, x: 0, y: 0 }, series: [{ name: 'Spend', data: spend, yAxis: 5, type:'column' }, { name: 'Impressions', data: imp, yAxis: 0, }, { name: 'Clicks', data: clicks, yAxis: 1 }, { name: 'CTR', data: ctr, yAxis: 2 }, { name: 'CPM', data: cpm, yAxis: 3 }, { name: 'CPC', data: cpc, yAxis: 4 } ] }); } I tried adding this line of code: dataLabels: { enabled: true, formatter: function () { return Highcharts.numberFormat(this.y,2); } } but it isn't working. Any ideas? your help will be grealty apprecaited! Thanks!
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.
Hide Numbers when category is null
Kindly take a look at following fiddle in which i tried to remove the categories but on removing categories its placing numbers instead of it by default and also showing those numbers in tooltip. All I am trying to do is that categories or numbers doesnot display on chart or on tooltip and only stackedbar appears on the chart , So kindly let me know how can i do it .Thanks, http://jsfiddle.net/EJFsH/3/ $(function () { var data = [ { name: 'Year 2008', data: [0, 914, 4054, 732, 34] }]; data = $.grep(data, function (category) { return $.grep(category.data, function (item) { return item > 0; }).length > 0; }); $('#container').highcharts({ chart: { type: 'bar' }, title: { text: 'Historic World Population by Region' }, subtitle: { text: 'Source: Wikipedia.org' }, xAxis: { title: { text: null } }, yAxis: { min: 0, title: { text: 'Population (millions)', align: 'high' }, labels: { overflow: 'justify' } }, tooltip: { valueSuffix: ' millions' }, plotOptions: { bar: { dataLabels: { enabled: true } } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -100, y: 100, floating: true, borderWidth: 1, backgroundColor: '#FFFFFF', shadow: true }, credits: { enabled: false }, series: data }); });
I'm not 100% sure of what you are asking for. But, to turn off the XAxis or yAxis labels, juse labels : {enabled:false} and to change the tooltips use tooltip:{formatter: function() {...}} see this fiddle: http://jsfiddle.net/6ypq4/ xAxis: { title: { text: null }, labels : { enabled: false } }, yAxis: { min: 0, title: { text: 'Population (millions)', align: 'high' }, labels: { overflow: 'justify', enabled: false } }, tooltip: { formatter: function() { return this.y + ' millions'; } },