Plot always starts at 0, highstock spline chart

Plot always starts at 0, highstock spline chart - javascript

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.

Related

How to prevent an ApexCharts chart label from being slanted

I am working on my project with Django where I need to use Javascript and a chart library. I have two charts that I made with ApexCharts, but I don't know how to prevent the label text to being slant and overflow. I can't find anything about this problem in the documentation or I'm not enough familiar to find what I need. :)
var options07 = {
series: [{
name: 'SOHA',
data: [ {{i.szervkult07a}} ]
}, {
name: 'RITKÁN',
data: [ {{i.szervkult07b}} ]
}, {
name: 'IDŐNKÉNT',
data: [ {{i.szervkult07c}} ]
}, {
name: 'GYAKRAN',
data: [ {{i.szervkult07d}} ]
}, {
name: 'MINDIG',
data: [ {{i.szervkult07e}} ]
}],
chart: {
type: 'bar',
height: 350,
stacked: true,
stackType: '100%'
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
xaxis: {
categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'
],
},
fill: {
opacity: 1
},
legend: {
position: 'right',
offsetX: 0,
offsetY: 50
},
};
var chart = new ApexCharts(document.querySelector("#chart_szk07"), options07);
chart.render();
var options07b = {
series: [{
name: 'SOHA',
data: [{{i.szervkult07a}}]
}, {
name: 'RITKÁN',
data: [{{i.szervkult07b}}]
}, {
name: 'IDŐNKÉNT',
data: [{{i.szervkult07c}}]
}, {
name: 'GYAKRAN',
data: [{{i.szervkult07d}}]
}, {
name: 'MINDIG',
data: [{{i.szervkult07e}}]
}],
chart: {
type: 'bar',
height: 350
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'],
},
yaxis: {
title: {
text: 'fő'
}
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return val + " fő"
}
}
}
};
var chart = new ApexCharts(document.querySelector("#chart_szk07b"), options07b);
chart.render();

From the docs, You should be able to add rotate: 0 to the labels section of xaxis. I suggest trying to shorten those. I imagine a long label will not look as good as a shorter one.
xaxis: {
categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'],
labels: {
rotate: 0
}
}

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 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
}
}
});

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
}
});

Legend and Axis titles not showing in Highcharts Graph

I have a Highcharts Graph that is displaying three different energy costs. I can't seem to get my legend to show nor can I get the axis titles to show.
The Legend should have the titles on; Gas, Electric, Oil and they should also be on the axis too.
The link to the JSFiddle is:
http://jsfiddle.net/petenaylor/HHEfW/3/
(function ($) { // encapsulate jQuery
$(function () {
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['Electric', 'Oil', 'Gas'],
colors = Highcharts.getOptions().colors;
$.each(names, function (i, name) {
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
zoomType: 'x'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 10,
y: 100,
borderWidth: 0
},
rangeSelector: {
selected: 12
},
title: {
text: 'Energy Prices'
},
yAxis:[{opposite:false},{opposite:true},{opposite:true,offset:50}],
series: [
{
name: 'Electric',
yAxis:0,
data: [
[1072915200000, 5.73],
[1073001600000, 5.81],
[1073088000000, 5.23],
[1073174400000, 5.32]
],
tooltip: {
valueDecimals: 2
}
}, {
name: 'Oil',
yAxis:1,
data: [
[1072915200000, 29.73],
[1073001600000, 29.73],
[1073088000000, 29.73],
[1073174400000, 29.73]
],
tooltip: {
valueDecimals: 2
}
}, {
name: 'Gas',
yAxis:2,
data: [
[1072915200000, 0.823],
[1073001600000, 0.82],
[1073088000000, 0.82],
[1073174400000, 0.82]
],
tooltip: {
valueDecimals: 2
}
}
]
});
});
});
});
// create the chart when all data is loaded
function createChart() {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 4
},
yAxis: [{ // Primary yAxis
labels: {
formatter: function () {
return (this.value > 0 ? '+' : '') + this.value + '%';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Electric',
style: {
color: '#89A54E'
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Oil',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function () {
return this.value;
},
style: {
color: '#4572A7'
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Gas',
style: {
color: '#AA4643'
}
},
labels: {
formatter: function () {
return this.value;
},
style: {
color: '#AA4643'
}
},
opposite: true
}],
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seriesOptions
});
}
});
})(jQuery);
Can anyone help me show the legend and axis titles?
The legend also needs to be click-able so that each line disappears and reappears when clicked.
Many thanks for your help
Pete

For legend you should add enabled parameter with true value.
http://jsfiddle.net/HHEfW/5/
legend: {
enabled: true
}
yAxis titles don't work, because are not defined, so you should add title parameter with text value. http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/title-text/

Develop Reference

JavaScript is the programming language of the Web.

Plot always starts at 0, highstock spline chart - javascript

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.

Related

How to prevent an ApexCharts chart label from being slanted

Stuck on the final bits of a multi series line chart

highcharts linechart color for dynamic data

Disabling label without bar Highstock

Legend and Axis titles not showing in Highcharts Graph

Categories

Resources