I have chart that has both splines and a columnrange which ideally would be inverted so the bars run horizontal and the xAxis values will be on the y axis.
See current code at jsfiddle.
Relevant part of code:
$(function () {
$('#container').highcharts({
chart: {
//type: 'spline'
//inverted: true,
},
credits: {
enabled: false
},
title: {
text: 'Polygon Graph: 109470 - North Penrith'
},
xAxis: [{
type: 'datetime',
}, {
type: 'category',
categories: ['Planning', 'Bulk Earthworks', 'DA Design', 'CC Design']
}],
yAxis: [{
opposite: true,
labels: {
format: '${value:,.0f}'
},
title: {
text: 'Value ($)'
},
min: 0
}, {
type: 'datetime',
}],
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
var d = new Date(this.y);
return d.getDate();
}
}
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %b %y', this.x) + ': ' + ' $' + this.y;
}
},
series: [{
name: 'Expected Costs',
data: [
[Date.UTC(2013, 9, 29), 145000],
[Date.UTC(2013, 10, 6), 140000],
[Date.UTC(2013, 10, 13), 133000],
[Date.UTC(2013, 10, 20), 125000],
[Date.UTC(2013, 10, 27), 116000],
[Date.UTC(2013, 11, 3), 106000],
[Date.UTC(2013, 11, 10), 101000],
[Date.UTC(2013, 11, 17), 96000],
[Date.UTC(2013, 11, 24), 94000],
[Date.UTC(2013, 12, 1), 82000],
[Date.UTC(2013, 12, 8), 70000],
[Date.UTC(2013, 12, 15), 58000],
[Date.UTC(2013, 12, 22), 33000],
[Date.UTC(2013, 12, 29), 8000],
],
color: 'red'
}, {
name: 'Actual Costs',
data: [
[Date.UTC(2013, 9, 29), 135000],
[Date.UTC(2013, 10, 6), 133000],
[Date.UTC(2013, 10, 13), 125000],
[Date.UTC(2013, 10, 20), 116000],
[Date.UTC(2013, 10, 27), 104000],
[Date.UTC(2013, 11, 3), 89000],
[Date.UTC(2013, 11, 10), 84000],
[Date.UTC(2013, 11, 17), 78000],
//[Date.UTC(2013,11,24),75000 ],
// [Date.UTC(2013,12,1),64000 ],
// [Date.UTC(2013,12,8),59000 ],
// [Date.UTC(2013,12,15),50000 ],
// [Date.UTC(2013,12,22),25000 ],
// [Date.UTC(2013,12,29),0 ]
],
color: 'green'
}, {
name: 'Projected Costs',
data: [
//[Date.UTC(2013,9,29),135000 ],
// [Date.UTC(2013,10,6),133000 ],
// [Date.UTC(2013,10,13),125000 ],
// [Date.UTC(2013,10,20),116000 ],
// [Date.UTC(2013,10,27),104000 ],
// [Date.UTC(2013,11,3),89000 ],
// [Date.UTC(2013,11,10),84000 ],
[Date.UTC(2013, 11, 17), 78000],
[Date.UTC(2013, 11, 24), 75000],
[Date.UTC(2013, 12, 1), 64000],
[Date.UTC(2013, 12, 8), 59000],
[Date.UTC(2013, 12, 15), 50000],
[Date.UTC(2013, 12, 22), 25000],
[Date.UTC(2013, 12, 29), 0]
],
dashStyle: 'longdash'
}, {
name: 'Gantt',
type: 'columnrange',
//inverted: true,
xAxis: 1,
yAxis: 1,
data: [
[Date.UTC(2013, 9, 29), Date.UTC(2013, 9, 30)],
[Date.UTC(2013, 9, 30), Date.UTC(2013, 10, 17)],
[Date.UTC(2013, 10, 18), Date.UTC(2013, 10, 30)],
[Date.UTC(2013, 10, 30), Date.UTC(2013, 11, 17)]
],
}]
});
I have tried starting from a columnrange chart and building it from there, however that results in the spline values graphing from smallest to largest (even with a reverse option). This meant it seemed like a better idea to add the columnrange to the spline base.
I'm stuck it seems like highcharts should be able to do this.
How do I get the columnrange to be horizontal while still maintaining the rest of the layout of the graph?
Unfortunatley when you use inverted options then axis are flipped and all series are inverted. It is default behaviour. You cannot combine inverted and not inverted series.
Related
I'm here because I'm in struggle with some sliders for my dataviz app.
I already did a chart with a slider and it work fine, but now I want to do the same with ColumnChart instead of LineChart... :
Here is the working code :
width={"100%"}
chartType="LineChart"
loader={<div>Loading Chart</div>}
data={[
["Date", "Value"],
[new Date(2000, 11, 26), 13],
[new Date(2000, 11, 27), 50],
[new Date(2000, 11, 28), 32],
//there is very much lines here but for simplicity i removed them
]}
options={{
// Use the same chart area width as the control for axis alignment.
interpolateNulls: false,
chartArea: { height: "80%", width: "90%" },
hAxis: { slantedText: false },
vAxis: { viewWindow: { min: 0, max: 55 } },
legend: { position: "none" },
colors: ['#f6c7b6']
}}
rootProps={{ "data-testid": "0" }}
chartPackages={["corechart", "controls"]}
controls={[
{
controlType: "ChartRangeFilter",
options: {
filterColumnIndex: 0,
ui: {
chartType: "LineChart",
chartOptions: {
chartArea: { width: "90%", height: "50%" },
hAxis: { baselineColor: "none" },
colors: ['green'],
},
},
},
controlPosition: "bottom",
controlWrapperParams: {
state: {
range: {
start: new Date(2000, 1, 1),
end: new Date(2000, 4, 6),
},
},
},
},
]}
/>
Here is the result : Here is the result
Now I want the same data but with ColumnChart,
I did that :
<Chart
width={"100%"}
chartType="ColumnChart"
loader={<div>Loading Chart</div>}
data={[
["Date", "Value"],
[new Date(2000, 11, 11), 32],
[new Date(2000, 11, 12), 5],
[new Date(2000, 11, 13), 46],
[new Date(2000, 11, 14), 31],
[new Date(2000, 11, 15), 17],
[new Date(2000, 11, 16), 17],
[new Date(2000, 11, 17), 6],
[new Date(2000, 11, 18), 43],
[new Date(2000, 11, 19), 11],
[new Date(2000, 11, 20), 44],
[new Date(2000, 11, 21), 44],
[new Date(2000, 11, 22), 37],
[new Date(2000, 11, 23), 43],
[new Date(2000, 11, 24), 26],
[new Date(2000, 11, 25), 13],
[new Date(2000, 11, 26), 50],
[new Date(2000, 11, 27), 32],
[new Date(2000, 11, 28), 25],
]}
options={{
// Use the same chart area width as the control for axis alignment.
interpolateNulls: false,
chartArea: { height: "80%", width: "90%" },
hAxis: { slantedText: false },
// vAxis: { viewWindow: { min: 0, max: 55 } },
legend: { position: "none" },
is3D: true,
colors: ['orange'],
}}
rootProps={{ "data-testid": "1" }}
chartPackages={["corechart", "controls"]}
/*
controls={[
{
controlType: "ChartRangeFilter",
options: {
filterColumnIndex: 0,
ui: {
chartType: "ColumnChart",
chartOptions: {
chartArea: { width: "90%", height: "50%" },
hAxis: { baselineColor: "none" },
},
},
},
controlPosition: "bottom",
controlWrapperParams: {
state: {
range: {
start: new Date(2000, 11, 1),
end: new Date(2000, 11, 6),
},
},
},
},
]}
*/
/>
And the result
But when I uncomment the code of time slider, i have a weird result :
weirdResult
What I missing ? how can i have the same kind of slider with ColumnChart ?
Thanks for any helps !
I'm working with React and React google Chart which is a wrapper for Google Chart
as noted in the reference for the ChartRangeFilter,
ColumnChart is not a valid chart type (see option --> ui.chartType)
try using ComboChart instead,
and set the seriesType chart option to bars
see following snippet...
controls={[
{
controlType: "ChartRangeFilter",
options: {
filterColumnIndex: 0,
ui: {
chartType: "ComboChart", // <-- use ComboChart
chartOptions: {
chartArea: { width: "90%", height: "50%" },
hAxis: { baselineColor: "none" },
seriesType: "bars", // <-- set series type
},
},
},
controlPosition: "bottom",
controlWrapperParams: {
state: {
range: {
start: new Date(2000, 11, 1),
end: new Date(2000, 11, 6),
},
},
},
},
]}
I have a highcharts which appears to show one day too many in the x-axis. This occurs when I set endOnTick to true, and if I instead set endOnTick to false the x-axis seems to be wrongly aligned (not in center, as if there were to be another tick that's supposed to be there). As you can see from my fiddle I am using moment.js to set the min/max dates, but startOf('month') works fine and endOf('month') should show the last day of the month, shouldn't it? I've tried to set UTC to false as you can see in the fiddle, but that didn't work. I am sorry if I'm missing something obvious here but I am quite new to both Highcharts and moment.js so please be patient with me :) Any tips would be appreciated.
Here is my code:
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var myChart = $('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: moment().format('MMMM') + ' ' + moment().format('YYYY')
},
xAxis: {
title: {
text: 'DATE'
},
type: 'datetime',
endOnTick: true,
tickInterval: 24 * 3600 * 1000,
dateTimeLabelFormats: {
day: '%e'
},
min: moment().startOf('month'),
max: moment().endOf('month')
},
yAxis: {
title: {
text: null
},
max: 4,
min: 1,
allowDecimals: false,
tickInterval: 1
},
plotOptions: {
series: {
marker: {
symbol: 'circle'
},
animation: false
}
},
series: [{
data: [
[Date.UTC(2017, 6, 25), 3.2],
[Date.UTC(2017, 7, 1), 2],
[Date.UTC(2017, 7, 5), 1.75],
[Date.UTC(2017, 7, 10), 2.4],
[Date.UTC(2017, 7, 15), 2.7],
[Date.UTC(2017, 7, 23), 2.3],
[Date.UTC(2017, 7, 28), 3],
[Date.UTC(2017, 7, 31), 2]
]
}, {
data: [
[Date.UTC(2017, 7, 1), 3],
[Date.UTC(2017, 7, 5), 2.75],
[Date.UTC(2017, 7, 10), 3.2],
[Date.UTC(2017, 7, 15), 2.3],
[Date.UTC(2017, 7, 23), 3.3],
[Date.UTC(2017, 7, 28), 1.5]
]
}],
legend: {
enabled: false
},
exporting: {
enabled: false
},
})
}
)
And here is a fiddle with the same code: https://jsfiddle.net/t0eeab8b/1/
Thanks in advance!
I am trying to created stacked columns in Highstock. in following js fiddle.
The code is
//http://jsfiddle.net/nishants/y0t130f3/2/
$(function () {
$('#container').highcharts('StockChart',{
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: [new Date(2014, 5, 30).getTime()/1000,new Date(2014, 5, 29).getTime()/1000,new Date(2014, 5, 28).getTime()/1000,new Date(2014, 5, 27).getTime()/1000,new Date(2014, 5, 26).getTime()/1000,new Date(2014, 5, 25).getTime()/1000,new Date(2014, 5, 24).getTime()/1000,new Date(2014, 5, 23).getTime()/1000,new Date(2014, 5, 22).getTime()/1000,new Date(2014, 5, 21).getTime()/1000,new Date(2014, 5, 20).getTime()/1000,new Date(2014, 5, 19).getTime()/1000,new Date(2014, 5, 18).getTime()/1000,new Date(2014, 5, 17).getTime()/1000,new Date(2014, 5, 16).getTime()/1000,new Date(2014, 5, 15).getTime()/1000,new Date(2014, 5, 14).getTime()/1000,new Date(2014, 5, 13).getTime()/1000,new Date(2014, 5, 12).getTime()/1000,new Date(2014, 5, 11).getTime()/1000 ]
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '' + this.x + '' +
this.series.name + ': ' + this.y + '' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2,5, 3, 4, 7, 2,5, 3, 4, 7, 2,5, 3, 4, 7, 2,]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1,2, 2, 3, 2, 1,2, 2, 3, 2, 1,2, 2, 3, 2, 1,]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5,3, 4, 4, 2, 5,3, 4, 4, 2, 5,3, 4, 4, 2, 5,]
}]
});
});
The code on x axis should be dates from 11/05/2014 to 30/05/2014 . I tried all new Date
unix time stamp and unix time stamp /1000. but nothing works. What I want to achieve is
very straight forward => How to put the dates on x axis of highstock.
Unlike HighCharts, I don't think HighStock support the xAxis.categories config.
However, you could specify the dates directly in serie.data like this:
{
name: 'John',
data: [
[new Date(2014, 5, 11).getTime(), 5],
[new Date(2014, 5, 12).getTime(), 3],
[new Date(2014, 5, 13).getTime(), 4],
...
]
}
And the dates must be in ascending order, otherwise the chart will be broken.
Another thing is you might want to set this to make columns align with date labels correctly.
plotOptions: {
column: {
...
dataGrouping: {
enabled: true,
forced: true,
units: [
['day', [1]]
]
}
}
},
Example JSFiddle: http://jsfiddle.net/1xLny72q/2/
Hope this helps.
When we make Highstock graph by series then we can't pass x-axis seprated data as per like Highchart
like in your code
xAxis: {
categories: [new Date(2014, 5, 30).getTime()/1000,new Date(2014, 5, 29).getTime()/1000,new Date(2014, 5, 28).getTime()/1000,new Date(2014, 5, 27).getTime()/1000,new Date(2014, 5, 26).getTime()/1000,new Date(2014, 5, 25).getTime()/1000,new Date(2014, 5, 24).getTime()/1000,new Date(2014, 5, 23).getTime()/1000,new Date(2014, 5, 22).getTime()/1000,new Date(2014, 5, 21).getTime()/1000,new Date(2014, 5, 20).getTime()/1000,new Date(2014, 5, 19).getTime()/1000,new Date(2014, 5, 18).getTime()/1000,new Date(2014, 5, 17).getTime()/1000,new Date(2014, 5, 16).getTime()/1000,new Date(2014, 5, 15).getTime()/1000,new Date(2014, 5, 14).getTime()/1000,new Date(2014, 5, 13).getTime()/1000,new Date(2014, 5, 12).getTime()/1000,new Date(2014, 5, 11).getTime()/1000 ]
},
its not work in HighStock
for this you need to pass these each separate value on each series like below
{
name: 'John',
data: [
[new Date(2014, 5, 11).getTime(), 5],
[new Date(2014, 5, 12).getTime(), 3],
...
]
},name: 'Jane',
data: [
[new Date(2014, 5, 11).getTime(), 2],
[new Date(2014, 5, 12).getTime(), 3],
...
])
}, {
name: 'Joe',
data: [
[new Date(2014, 5, 11).getTime(), 5],
[new Date(2014, 5, 12).getTime(), 4],
...
]}
and as per #ranTarm dates must be in ascending order and dataGrouping as mention in his comment
I have a highcharts graph with 2 lines. The x-axis is type datetime.
I want a labeled tick in the x-axis for every month in the overall date range: Jul '11, Aug '11, Sep '11, etc.
The only way all of the monthly ticks will display is if I set my parent container to be extremely wide. However, my production layout only has a container of 695px.
How do I force all of the ticks to display when I'm at the smaller width?
I have a fiddle here
Here is my code:
var chart;
var lineIndex = 0,splineIndex=0;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy'
},
exporting: { enabled: false },
title: {
text: ''
},
legend:{
itemStyle: {
fontSize: '13px',
fontFamily: 'Arial,sans-serif'
}
},
xAxis: {
type: 'datetime',
min: Date.UTC(2011, 4, 31),
max: Date.UTC(2012, 11, 6),
labels: {
step: 1,
style: {
fontSize: '13px',
fontFamily: 'Arial,sans-serif'
}
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%b \'%y',
year: '%Y'
}
},
yAxis: [{ // Primary yAxis
labels: {
style: {
fontSize: '13px',
fontFamily: 'Arial,sans-serif'
},
formatter: function() {
return '$' + Highcharts.numberFormat(this.value,2,'.',",");
}
},
title: {
text: '',
style: {
color: '#89A54E'
},
},
max:.85,
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: ''
},
min:9000,
max:12000,
labels: {
style: {
fontSize: '13px',
fontFamily: 'Arial,sans-serif'
},
formatter: function() {
return '$' + Highcharts.numberFormat(this.value,0,".",",");
}
}
}],
tooltip: {
enabled: false
},
plotOptions: {
line: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {
if(this.y == 10000) {
return '<div class="tweak">$' + Highcharts.numberFormat(Math.round(this.y),0,".",",") + '</div>';
} else if (this.y > 5) {
return '<div class="tweak-0">$' + Highcharts.numberFormat(Math.round(this.y),0,".",",") + '</div>';
} else if (this.x == Date.UTC(2011, 11, 1)) { // grab values for special dates and assign tweak classes so we can adjust the label spacing
return '<div class="tweak-1">$' + Highcharts.numberFormat(this.y,3,".",",") + '</div>';
} else if (this.x == Date.UTC(2012, 1, 1)) {
return '<div class="tweak-2">$' + Highcharts.numberFormat(this.y,3,".",",") + '</div>';
} else if (this.x == Date.UTC(2011, 7, 1) || this.x == Date.UTC(2012, 7, 1) ) {
return '<div class="tweak-3">$' + Highcharts.numberFormat(this.y,2,".",",") + '</div>';
} else if ( this.x == Date.UTC(2012, 0, 17) ) {
return '<div class="tweak-4">$' + Highcharts.numberFormat(this.y,3,".",",") + '</div>';
}
}}
}
},
credits: {
enabled: false
},
series: [{
name: 'Growth of $10,000 Investment',
type: 'line',
color: '#002d56',
yAxis: 1,
data: [
[Date.UTC(2011, 5, 1), 10000],
[Date.UTC(2011, 8, 1), 9996],
[Date.UTC(2011, 11, 1), 10652],
[Date.UTC(2012, 2, 1), 11387],
[Date.UTC(2012, 5, 1), 11586],
[Date.UTC(2012, 8, 1), 11984],
[Date.UTC(2012, 11, 1), 12179]
]
}, {
name: 'Historical Distributions Per Share',
color: '#762123',
type: 'line',
enableMouseTracking: false,
data: [
[Date.UTC(2011, 5, 1), 0.70],
[Date.UTC(2011, 6, 1), 0.70],
[Date.UTC(2011, 7, 1), 0.70],
[Date.UTC(2011, 8, 1), 0.70],
[Date.UTC(2011, 9, 1), 0.70],
[Date.UTC(2011, 9, 25), 0.70],
[Date.UTC(2011, 10, 1), 0.717],
[Date.UTC(2011, 11, 1), 0.717],
[Date.UTC(2012, 0, 10), 0.717],
[Date.UTC(2012, 0, 17), 0.728],
[Date.UTC(2012, 0, 24), 0.728],
[Date.UTC(2012, 0, 31), 0.745],
[Date.UTC(2012, 1, 1), 0.745],
[Date.UTC(2012, 1, 28), 0.745],
[Date.UTC(2012, 2, 6), 0.76],
[Date.UTC(2012, 2, 13), 0.76],
[Date.UTC(2012, 2, 20), 0.76],
[Date.UTC(2012, 2, 27), 0.76],
[Date.UTC(2012, 3, 3), 0.76],
[Date.UTC(2012, 3, 10), 0.76],
[Date.UTC(2012, 3, 17), 0.76],
[Date.UTC(2012, 3, 24), 0.76],
[Date.UTC(2012, 4, 1), 0.76],
[Date.UTC(2012, 4, 8), 0.76],
[Date.UTC(2012, 4, 15), 0.76],
[Date.UTC(2012, 4, 22), 0.76],
[Date.UTC(2012, 4, 29), 0.76],
[Date.UTC(2012, 5, 5), 0.76],
[Date.UTC(2012, 5, 12), 0.76],
[Date.UTC(2012, 5, 19), 0.76],
[Date.UTC(2012, 5, 26), 0.76],
[Date.UTC(2012, 6, 3), 0.76],
[Date.UTC(2012, 6, 10), 0.76],
[Date.UTC(2012, 6, 17), 0.76],
[Date.UTC(2012, 6, 24), 0.76],
[Date.UTC(2012, 6, 31), 0.76],
[Date.UTC(2012, 7, 1), 0.76],
[Date.UTC(2012, 7, 7), 0.76],
[Date.UTC(2012, 7, 14), 0.76],
[Date.UTC(2012, 7, 21), 0.76],
[Date.UTC(2012, 7, 28), 0.76],
[Date.UTC(2012, 8, 4), 0.76],
[Date.UTC(2012, 8, 11), 0.76],
[Date.UTC(2012, 8, 18), 0.76],
[Date.UTC(2012, 8, 25), 0.76],
[Date.UTC(2012, 11, 1), 0.76]
],
marker: {
enabled: false
}
}]
});
});
You can add the tickInterval to the xAxis properties:
...
tickInterval: 30 * 24 * 3600 * 1000,
...
There will appear some overlap so also might want to rotate the labels a bit:
See this jsfiddle.
I'm working with a column chart using Highcharts. The chart needs to handle an arbitrary number of columns.
Here's an example of one such chart that I need to handle:
$('#TimesChart2').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Response Times'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
}
},
yAxis: {
title: {
text: 'Minutes'
}
},
series: [{
name: 'Average Response Time',
data: [[Date.UTC(2013, 6, 30), 878.42], [Date.UTC(2013, 6, 31), 579.68], [Date.UTC(2013, 7, 1), 400.42], [Date.UTC(2013, 7, 2), 622.95], [Date.UTC(2013, 7, 5), 1260.97], [Date.UTC(2013, 7, 3), 0], [Date.UTC(2013, 7, 4), 0], [Date.UTC(2013, 7, 6), 517.945] ],
dataGrouping: {
enabled: false
},
pointPadding: .05
}],
});
The problem is that the columns have an extremely small width on this set of data. In some datasets (see the first graph in the jsfiddle link), the columns have normal width and are fine.
One possible workaround is to set the pointWidth to a fixed value, but then on large graphs the columns overlap. I've tried experimenting with pointPadding and grouping as well, to no avail.
http://jsfiddle.net/3NZZW/
Anyone know what's happening here?
That's really odd. But, you're first data series is in reverse date order. If you fix that, the chart is right.
http://jsfiddle.net/pUTQd/
series: [{
name: 'Average Response Time',
data: [[Date.UTC(2013, 7, 2), 354.5], [Date.UTC(2013, 7, 3), 1981.875], [Date.UTC(2013, 7, 4), 434.5], [Date.UTC(2013, 7, 5), 678.1], [Date.UTC(2013, 7, 6), 87.465] ],
dataGrouping: {
enabled: false
},
pointPadding: .05
}],
(note I just changed the dates, I didn't change the data)