Related
I have a combo chart containing area, bars and line graphs. I'd like the area and line charts to align maximally to the left and right side. For bars chart it's not required. Unfortunately I'm unable to align the graphs properly. I went through the documentation and couldn't find a solution to my problem.
Current chart:
Expected chart:
Here is the GoogleChartInterface object of the chart (I'm adding dataTable and ticks dynamically):
{
chartType: 'ComboChart',
dataTable: [],
options: {
focusTarget: 'category',
animation: {
startup: true,
easing: 'out',
duration: 500,
},
height: '160',
chartArea: {
width: '90%',
height: '79%',
},
vAxes: {
0: {
titlePosition: 'none',
textStyle: {
color: '#febd02',
bold: true,
fontSize: 13,
},
format: '#',
gridlines: {
color: '#eaeaea',
count: '5',
},
interpolateNulls: true,
},
1: {
titlePosition: 'none',
format: '#',
gridlines: {
color: 'transparent'
},
interpolateNulls: true,
},
2: {
groupWidth: '100%',
titlePosition: 'none',
textStyle: {
color: '#0284ff',
bold: true,
fontSize: 13,
},
format: 'decimal',
gridlines: {
color: 'transparent'
},
},
},
hAxis: {
textStyle: {
color: '#393939',
bold: true,
fontSize: 13,
},
format: 'EEEE',
gridlines: {
count: 0,
color: 'transparent'
},
ticks: [],
},
series: {
0: {
targetAxisIndex: 0,
type: 'area',
},
1: {
type: 'line'
},
2: {
targetAxisIndex: 2,
type: 'bars',
dataOpacity: 0.5,
},
},
colors: [
'#febd02',
'#a5a5a5',
'#0284ff',
],
bar: {
groupWidth: '35'
},
legend: {
position: 'none'
},
},
};
in order to stretch the area and line series to the edges of the chart,
we must first use a data type that will render a continuous x-axis.
in this case, we will use date time.
next, we use option hAxis.viewWindow to control where the series start and end.
viewWindow has two properties, min & max.
the values of min & max should match the data type of the x-axis.
in this case, we set the values to the dates where the series should begin and end.
hAxis: {
viewWindow: {
min: new Date(2020, 10, 13),
max: new Date(2020, 10, 19)
}
}
this will stretch the series to the edges of the chart.
see following working snippet for an example...
google.charts.load('current', {
packages: ['controls', 'corechart']
}).then(function() {
var data = google.visualization.arrayToDataTable([
['Date', 'y0', 'y1', 'y2'],
[new Date(2020, 10, 13), 100, 50, 25],
[new Date(2020, 10, 14), 110, 45, 5],
[new Date(2020, 10, 15), 90, 40, 60],
[new Date(2020, 10, 16), 80, 30, 10],
[new Date(2020, 10, 17), 70, 20, 0],
[new Date(2020, 10, 18), 60, 10, 0],
[new Date(2020, 10, 19), 50, 5, 0]
]);
var chart = new google.visualization.ChartWrapper({
chartType: 'ComboChart',
containerId: 'chart',
dataTable: data,
options: {
focusTarget: 'category',
animation: {
startup: true,
easing: 'out',
duration: 500,
},
chartArea: {
left: 60,
top: 12,
right: 60,
bottom: 72,
height: '100%',
width: '100%'
},
height: '100%',
width: '100%',
vAxes: {
0: {
titlePosition: 'none',
textStyle: {
color: '#febd02',
bold: true,
fontSize: 13,
},
format: '#',
gridlines: {
color: '#eaeaea',
count: '5',
},
interpolateNulls: true,
},
1: {
titlePosition: 'none',
format: '#',
gridlines: {
color: 'transparent'
},
interpolateNulls: true,
},
2: {
groupWidth: '100%',
titlePosition: 'none',
textStyle: {
color: '#0284ff',
bold: true,
fontSize: 13,
},
format: 'decimal',
gridlines: {
color: 'transparent'
},
},
},
hAxis: {
textStyle: {
color: '#393939',
bold: true,
fontSize: 13,
},
format: 'dd MMM. yyyy',
gridlines: {
color: 'transparent'
},
ticks: data.getDistinctValues(0),
viewWindow: data.getColumnRange(0)
},
series: {
0: {
targetAxisIndex: 0,
type: 'area',
},
1: {
type: 'line'
},
2: {
targetAxisIndex: 2,
type: 'bars',
dataOpacity: 0.5,
},
},
colors: [
'#febd02',
'#a5a5a5',
'#0284ff',
],
bar: {
groupWidth: '35'
},
legend: {
position: 'none'
},
},
});
chart.draw();
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#chart {
min-height: 160px;
height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
I have this polar chart which is populated at every 2 sec with new data by a function.
What I want to achive:
Display line/area series, based on 120 values, for every 3º (in the img 'Layer1, 'Column for Layer 2' and 'Total' recive the 120 values while 'Line' has only 8 values for every 45º).
Every time a value passes a Limit ( I use 'threshold: 500,'), that point must be turn in to 'red' ( I set it with 'negativeColor')
My problem is:
When the value is passed, it is not making the line red, just the point.
It has this problem with the line ..... because if my values are under the down half of the circle it is not showing any line at all, just the points (It doesn't matter if it is a line, or arearange type series). Like this:
.
My code:
$(document).ready(
function(datt) {
chart = new Highcharts.chart('container', {
chart: {
polar: true,
zoomType: 'xy'
},
pane: {
startAngle: 0,
endAngle: 360
},
credits: {
enabled: false
},
title: {
text: 'Polar distribution of layers thickness '
},
tooltip: {
formatter: function() {
return this.series.name + ' WT: ' + JSON.stringify(this.y / 35.5).slice(0, 6);
}
},
xAxis: {
min: 0,
max: 360,
tickInterval: 45,
gridLineColor: 'white',
gridZIndex: 5,
labels: {
formatter: function() {
return this.value + " º";
}
}
},
yAxis: {
min: 0,
endOnTick: false,
visible: false,
maxPadding: 0,
labels: {
enabled: false
},
},
plotOptions: {
arearange: {
marker: {
enabled: false
}
}
},
series: [{
type: 'arearange',
name: 'Layer 1',
data: datt,
color: '#19dde8',
fillOpacity: 0.5,
lineWidth: 0.3,
zIndex: 2
},
{
type: 'arearange',
name: 'Column for Layer 2',
data: [
[0, 419, 419],
[45, 419, 419],
[90, 419, 419],
[135, 419, 419],
[180, 419, 419],
[225, 419, 419],
[270, 419, 419],
[315, 419, 419],
[360, 419, 419]
],
min: 400,
color: '#e8d618',
fillOpacity: 0.3,
lineWidth: 0.3,
threshold: 500,
negativeColor: 'red'
},
{
type: 'arearange',
name: 'Total',
data: [
[0, 451, 451],
[45, 451, 451],
[90, 451, 451],
[135, 451, 451],
[180, 451, 451],
[225, 451, 451],
[270, 451, 451],
[315, 451, 451],
[360, 451, 451]
],
lineWidth: 0.3,
color: '#c8c5f9',
fillOpacity: 0.5,
lineWidth: 0.3,
zIndex: 7,
},
{
type: 'line',
name: 'Line',
data: [
[0, 619],
[45, 639],
[90, 649],
[135, 659],
[180, 669],
[225, 639],
[270, 629],
[315, 699],
[360, 609]
],
lineWidth: 0.3,
color: 'orange',
threshold: 650,
negativeColor: 'red',
fillOpacity: 0.5,
lineWidth: 0.3,
zIndex: 7,
}
]
});
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.2.0/es-modules/parts-more/Polar.js"></script>
<div id='container'></div>
Unfortunately negativeColor property doesn't work properly in polar chart. As you can see it is reported and Highcharts core developer wrote: "As a short term solution, we must disable zones and negativeColor for polar charts, and specify that in the docs." https://github.com/highcharts/highcharts/issues/4936.
The solution which I can suggest for you is to use multicolor series Highcharts module http://blacklabel.github.io/multicolor_series/. Check this demo with a similar chart to yours: https://jsfiddle.net/Bastss/1c8mbu9e//
load() {
let chart = this;
chart.series.forEach((series) => {
if (series.userOptions.type != 'arearange') {
series.data.forEach((point) => {
if (point.y < 650) {
console.log(point)
point.update({
color: "red",
segmentColor: "red"
})
}
})
}
})
chart.reflow();
}
}
I am trying to load data via CSV file. Now if I have it already on the page as a hidden div, it works great. But trying to load it from a CSV file via Jquery $.get is not working. The x and y axis shows, but the heatmap itself does not.
The javascript looks like this (without the actual file offhand):
$.get('http://www.urltofile.com/cell001.csv', function(csv) {
generateHeatMap($('#heatmapBody'),csv);
});
function generateHeatMap(target,data) {
target.highcharts({
chart: {
type: 'heatmap',
//height: highChartsArguments.chartHeight
margin: [60, 10, 80, 50]
},
boost: {
useGPUTranslations: true
},
title: {
text: 'Highcharts extended heat map',
style: {
color: 'black',
fontSize: '12px',
fontFamily: 'Verdana'
}
},
xAxis: {
type: 'text',
min: 0,
max: 427,
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value}' // long month
},
showLastLabel: false,
tickLength: 16
},
yAxis: {
title: {
text: null
},
labels: {
format: '{value}'
},
minPadding: 0,
maxPadding: 0,
startOnTick: false,
endOnTick: false,
tickPositions: [0, 16, 32, 48, 64, 80, 96, 112, 133],
tickWidth: 1,
min: 0,
max: 133,
reversed: true
},
colorAxis: {
max: 1.5,
min: -1.5,
minColor: '#00FF00',
maxColor: '#FF0000',
stops: [
[0.0, '#00FF00'],
[0.5, '#003319'],
[0.9, '#FF0000'],
[1, '#FF0000']
]
},
credits: {
enabled: false
},
legend: {
enabled: true,
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
symbolHeight: 60
},
series: [{
name: 'heatmap',
data: {
csv: data
},
boostThreshold: 100,
borderWidth: 0,
nullColor: '#EFEFEF',
tooltip: {
headerFormat: 'Test<br/>',
pointFormat: '{point.x} {point.y}: <b>{point.value}</b>'
},
turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
}],
exporting: {
enabled: false
}
});
}
The CSV is over 100K rows. Is that causing a problem perhaps? As a sample, it looks like
Gene,Label,zScore
0,0,3.630958
0,1,1.547901
0,2,-0.604027
0,3,0.486755
0,4,-0.359456
0,5,0.228968
0,6,3.197601
0,7,1.554732
0,8,0.374111
Any help would be appreciated.
You load the data incorrectly. Series object is not responsible for handling csv data. If you use data module, you should move the data from series options to top level options, like this:
data: { // this is how you load the with data module
csv: data
},
series: [{
... // here, options for series goes but not data
}]
Compare your code with the official example: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/heatmap/
I am using flot chart for charts. Please find following...
js array
data_visits = [
[new Date('06/02/2014 01:00').getTime(), 100],
[new Date('06/05/2014 10:00').getTime(), 200],
[new Date('06/10/2014 13:00').getTime(), 300],
[new Date('06/15/2014 15:00').getTime(), 400],
];
chart code
if($('#flot_overview').length) {
var chart_placeholder = $('#flot_overview');
var options = {
grid: {
clickable: true,
hoverable: true,
autoHighlight: true,
backgroundColor: null,
borderWidth: 0,
color: "#666",
labelMargin: 10,
axisMargin: 0,
mouseActiveRadius: 10,
minBorderMargin: 5
},
series: {
lines: {
show: true,
lineWidth: 2,
steps: false,
fill: true
},
points: {
show:true,
radius: 4,
symbol: "circle",
fill: true
}
},
tooltip: true,
tooltipOpts: {
content: "<span style='display:block; padding:7px;'>%x - <strong style='color:yellow;'>%y</strong></span>",
xDateFormat: "%b %d, %Y %H:%M",
shifts: {
x: 20,
y: 0
},
defaultTheme: false
},
xaxis: {
mode: "time",
minTickSize: [1, "hour"],
timeformat: '%H:%M',
labelWidth: "40"
},
yaxis: { min: 0 },
legend: {
noColumns: 0,
position: "ne"
},
colors: ["#0892cd"],
shadowSize: 0
};
$.plot(chart_placeholder,[{
label: "Click / Visits",
data: data_visits,
points: {fillColor: '#fff'},
lines: {fillColor: 'rgba(8,146,205,.2)'}
}],options);
}
It generates chart properly and shows correct time in tooltip, but it does not show correct time in xAxis as per my settings, it always show 00:00 for all xaxis if i use timeformat: '%H:%M' it works fine if i format this as date.
Please help, thanks.
Since your data spans multiple days, flot is logically placing the tick marks at the start each day. This means that with a time format of '%H:%M', you then get 0:00.
In my mind something like this makes a lot more sense for you data.
I have a few date/value series on a chart, nothing complicated. I would like to have the zooming navigator at the bottom as in here but it doesn't show up on my chart.
$(function () {
$('#container').highcharts({
chart: { type: 'spline' },
title: { text: 'intensity' },
rangeSelector: { selected: 2},
xAxis: { type: 'datetime', },
yAxis: [
{ title: { text: 'Intensity (A)' }, min: 0 },
{ title: { text: 'Nb' }, min: 0, opposite: true },
],
series: [
{ name: 'serie 1', yAxis: 0, visible: false, turboThreshold: 546, marker: {enabled: false}, data: [
[Date.UTC(2013, 09-1, 25, 10, 38, 01, 0), 142.205467],
[Date.UTC(2013, 09-1, 25, 10, 43, 01, 0), 142.886567],
...]
},
{ name: 'serie 2', yAxis: 1, visible: false, turboThreshold: 20, marker: {enabled: false}, data: [
[Date.UTC(2013, 09-1, 23, 13, 58, 25, 0), 0.000000],
[Date.UTC(2013, 09-1, 23, 13, 58, 26, 0), 1.000000],
... ]
},
...
Just in case this might be the problem, I have roughly 40 series in total and 30000 points in total too.
I have tried to have navigator: {enabled: true} and similar things (setting the data serie in the navigator to be the same as my first data serie) but none worked
What should I do ? Do I HAVE to use highstocks ? Their api is more complicated than highcharts and I would prefer to use the latter if possible
Navigator is available only in highstock.js file. So you can use this file in combine with you highcharts.