How to add Highcharts low and high data series using javascript - javascript

I was trying to create a graph that represents the schedule of our Store using highcharts. With that, I use columnrange to a start and end time where the store is open.
But I'm stuck on how can I push those data using array and json.
Here's what I want to achieve. I made this mock-up with hard coded data;
JSFIDDLE: http://jsfiddle.net/rds_a/Lscqugbp/3/
code:
$(function () {
window.chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'columnrange',
inverted: false
},
title: {
text: "Store Schedule"
},
xAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Yesterday','Today']
},
yAxis: {
min: 0,
max: 24,
categories: ['01','02','03', '04','05', '06','07', '08', '09','10', '11', '12', '13', '14', '15','16','17', '18', '19','20', '21','22','23', '24'],
title: {
text: 'Time'
}
},
legend: {
enabled: true
},
plotOptions: {
columnrange: {
grouping: false
}
},
series: [{
name: 'Open',
stack: 'OnSite',
color: 'orange',
data: [{
x: 0,
low: 7,
high: 10
},{
x: 0,
low: 11,
high: 16
},{
x: 1,
low: 6,
high: 12
},{
x: 1,
low: 17,
high: 21
}]
},
{
name: 'Close',
stack: 'OnSite',
color: 'black',
data: [
{
x: 0,
low: 01,
high: 07
},{
x: 0,
low: 10,
high: 11
},
,{
x: 0,
low: 15,
high: 24
},
{
x: 1,
low: 1,
high: 7
},
{
x: 1,
low: 12,
high: 17
},
{
x: 1,
low: 21,
high: 24
}]
}]
});
});
While here's what I'am currently have;
JSFIDDLE: http://jsfiddle.net/rds_a/9P5fC/485/
code:
$(function () {
var jdata = {
"Open": {
"y": [4,8],
"name": "Open",
"n": [0]
},
"Closed": {
"y": [9,12],
"name": "Closed",
"n": [1]
}
};
var seriesArr = [];
$.each(jdata, function (key, data) {
var series = {
name: key,
data: []
};
$.each(data.y, function (index, value) {
series.data.push({
y: value
});
});
$.each(data.n, function (index, value) {
series.data[index].n = value;
});
seriesArr.push(series);
});
var options = {
chart: {
renderTo: 'container',
type: 'column',
inverted: false
},
title: {
text: 'Store Schedule'
},
xAxis: {
categories: ['Monday', 'Tuesday']
},
yAxis: {
min: 0,
max: 24,
categories: ['01','02','03', '04','05', '06','07', '08', '09','10', '11', '12', '13', '14', '15','16','17', '18', '19','20', '21','22','23', '24'],
title: {
text: 'Time'
}
},
legend: {
enabled: true
},
plotOptions: {
columnrange: {
stacking: 'percent'
}
},
series: seriesArr
};
var chart = new Highcharts.Chart(options);
});
Thanks in advance to those who can give their inputs.

Related

Highcharts - Linear series zoom on logarithmic axis

I'm having trouble when zooming in on a linear series that is on a logarithmic yAxis. What would be an easy solution?
Zoom out:
Zoom in:
Linear series is not rescaling correcly, those series should remain on same position relative to main series, is there any missing configs to those series that would adjust them to logarithmic axis?
Demo: https://jsfiddle.net/bernardo0marques/dfqouLm5/30/
Code snippet:
Highcharts.stockChart("container", {
chart: {
type: "line",
zoomType: "xy",
},
series: [
{
data: [
{
x: -220924800000,
high: 63,
low: 56,
close: 62,
open: 56,
name: "01/01/1963",
color: "#F57350",
},
{
x: 1657670400000,
high: 18893.92,
low: 18159.03,
close: 18159.03,
open: 18593.15,
name: "13/07/2022",
color: "#297F0D",
},
],
dataGrouping: {
forced: true,
groupPixelWidth: 0,
units: [["day", 1]],
},
id: "main-series",
name: "Demo series",
type: "candlestick",
yAxis: "default",
},
{
color: "#C0C0C0",
data: [
[-220914000000, 369],
[1659236400000, 198817.91340815497],
],
dashStyle: "LongDash",
id: "upper-tendency",
tooltip: {
valueDecimals: 0,
xDateFormat: "%B %Y",
},
showInLegend: false,
yAxis: "default",
},
{
color: "#C0C0C0",
data: [
[-220914000000, 34],
[1659236400000, 16672.03531810569],
],
dashStyle: "Solid",
id: "lower-tendency",
tooltip: {
valueDecimals: 0,
xDateFormat: "%B %Y",
},
showInLegend: false,
yAxis: "default",
},
],
title: { text: "Logarithmic Zoom: Linear series" },
tooltip: { shared: true, split: false },
xAxis: {
dateTimeLabelFormats: {
second: "%d/%m/%y<br/>%H:%M:%S",
minute: "%d/%m/%y<br/>%H:%M",
hour: "%d/%m/%y<br/>%H:%M",
day: "%d/%m/%y",
month: "%m/%y",
year: "%Y",
},
type: "datetime",
},
yAxis: [
{
id: "default",
opposite: true,
type: "logarithmic",
title: { text: "" },
reversed: false,
offset: 50,
tickInterval: 0.4,
},
],
});
It is a bug which you can track in the following ticket:
https://github.com/highcharts/highcharts/issues/16784
As a temporary workaround, you can set xAxis.ordinal to false in your config.
Demo:
https://jsfiddle.net/BlackLabel/rfxygz5m/

"javascript" bar graph that breaks down annual columns to monthly

I would like the make a bar or column graph using daily data, and by default user should get annual representation of the data, then if the user clicks on a column of a specific year, they get a monthly break down of that year.
Please help
Thanks
Also add the desire plugin to it
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text:"Fortune 500 Companies by Country"
},
axisX:{
interval: 1
},
axisY2:{
interlacedColor: "rgba(1,77,101,.2)",
gridColor: "rgba(1,77,101,.1)",
title: "Number of Companies"
},
data: [{
type: "bar",
name: "companies",
axisYType: "secondary",
color: "#014D65",
dataPoints: [
{ y: 3, label: "January" },
{ y: 7, label: "Febrary" },
{ y: 5, label: "March" },
{ y: 9, label: "April" },
{ y: 7, label: "May" },
{ y: 7, label: "June" },
{ y: 9, label: "Jult" },
{ y: 8, label: "August" },
{ y: 11, label: "September" },
{ y: 15, label: "October" },
{ y: 12, label: "November" },
{ y: 15, label: "December" },
]
}]
});
chart.render();
}
</script>

Making Highcharts look like progress bar with more than one series

I have been trying to modify the look of highcharts bars and I have managed to make the horizontal bar charts to look like progress bar charts. I followed this answer here in SO in order to do that. Right now, I am having two problems with this. The chart looks fine if I have one data series but here is how it looks if I have more than one series (there can be up to 3 series).
Therefore, I want to increase the margin between the labels (USA, Japan etc). Secondly, I would like to align the data labels (10, 40, 20 etc) towards the right of the chart, outside the bars. I think I need to write some javascript but I am not sure where to start or what to modify. Any help is appreciated.
Thanks.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: '#003755',
marginBottom: 60,
marginLeft: 80,
marginTop: 40,
marginRight: 140
},
colors: ['#0AA3DB', '#3AC6B1', '#000612'],
xAxis: [{
categories: ['USA', 'Japan', 'Canada', 'Brasil', 'China', 'Russia', 'UK', 'France', 'NA'],
labels: {
align: 'left',
x: 0,
y: -13,/* to be adjusted according to number of bars*/
style: {
fontSize: "0.875rem",
color: '#fff'
}
},
lineColor: 'transparent',
tickLength: 0
}],
yAxis: {
lineWidth: 0,
gridLineWidth: 0,
labels: {
enabled: false
}
},
plotOptions: {
bar: {
dataLabels: {
allowOverlap: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
},
series: {
pointWidth: 8, //width of the column bars irrespective of the chart size
borderRadius: 5,
borderColor: 'transparent',
pointPadding: 0,
groupPadding: 0,
dataLabels: {
enabled: true,
format: '<b>{point.y:,.0f}</b>',
shared: true,
useHTML: true,
align: 'right'
}
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
yDecimals: 2
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<b>{point.name} - {point.y:,.0f}%</b>',
shared: true,
useHTML: true
},
series: [{
name: 'Current',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}, {
name: '2005',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}, {
name: '2023',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}]
});
https://jsfiddle.net/fbsveysb/
Use groupPaddingfor increasing the space between column groups.
The default value of dataLabels.align is left (point on the left side of the label) - this value should be used to position data labels outside of the bars.
Live working demo: https://jsfiddle.net/kkulig/w782cud7/
API references:
https://api.highcharts.com/highcharts/series.bar.dataLabels.align
https://api.highcharts.com/highcharts/series.bar.groupPadding
This may be one of the possible solution as I made in comment. It uses Scrollbars for any axis which shows how to have scroll in axis. It uses highstock.js file, it can be applied to regular Highcharts axes.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: '#003755',
marginBottom: 60,
marginLeft: 80,
marginTop: 40,
marginRight: 140,
events: {
load: function() {
var maxVal = 0;
for (var i = 0; i < this.series.length; i++) {
if (Math.max.apply(Math, this.series[i].yData) > maxVal) {
maxVal = Math.max.apply(Math, this.series[i].yData)
}
}
this.yAxis[0].setExtremes(0, maxVal + 10)
}
}
},
colors: ['#0AA3DB', '#3AC6B1', '#000612'],
xAxis: [{
categories: ['USA', 'Japan', 'Canada', 'Brasil', 'China', 'Russia', 'UK', 'France', 'NA'],
labels: {
align: 'left',
x: 0,
y: -20,
/* to be adjusted according to number of bars*/
style: {
fontSize: "0.875rem",
color: '#fff'
}
},
lineColor: 'transparent',
tickLength: 0,
min: 0,
max: 4,
scrollbar: {
enabled: true
},
}],
yAxis: {
lineWidth: 0,
gridLineWidth: 0,
labels: {
enabled: false
}
},
plotOptions: {
bar: {
grouping: true,
pointPadding: 0,
dataLabels: {
allowOverlap: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
},
series: {
pointWidth: 8, //width of the column bars irrespective of the chart size
borderRadius: 5,
borderColor: 'transparent',
dataLabels: {
enabled: true,
//format: '{point.y:.1f}',
format: '<b>{point.y:,.0f}</b>',
shared: true,
useHTML: true,
overflow: 'none'
}
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
yDecimals: 2
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<b>{point.name} - {point.y:,.0f}%</b>',
shared: true,
useHTML: true
},
series: [{
name: 'Current',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}, {
name: '2005',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}, {
name: '2023',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}]
});
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container"></div>

highcharts type bubble with static Y-axis list

In highcharts type bubble (X-axis:dates, Y-axis:persons), what options I should use in order to have the Y-axis displays each person with a horizontal line so that it intersects with the X-axis line and have the bubble in the intersection.
I used a list of persons as 'categories' but it does not look good.
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Chart'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
gridLineWidth: 1,
title: {
text: 'Date'
}
},
yAxis: {
categories: ['person A', 'person B', 'person C', 'person D', 'person E'],
startOnTick: false,
endOnTick: false,
title: {
text: 'People'
},
maxPadding: 0.2
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>Title</h3></th></tr>' +
'<tr><th>Person:</th><td>{point.y}</td></tr>' +
'<tr><th>Date:</th><td>{point.x}</td></tr>' +
'<tr><th>Number of calls:</th><td>{point.z}</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.z} calls'
}
}
},
series: [{
data: [
{ x: Date.UTC(2003, 9, 21), y: 1, z: 13},
{ x: Date.UTC(2003, 9, 30), y: 2, z: 14},
{ x: Date.UTC(2003, 9, 21), y: 2, z: 16},
{ x: Date.UTC(2003, 9, 30), y: 1, z: 7},
{ x: Date.UTC(2003, 9, 21), y: 3, z: 5},
{ x: Date.UTC(2003, 9, 30), y: 4, z: 8 }
]
}]
});
Current Chart
Expected chart (The lines I crossed need to be shifted to the position in red)
You need to set tickmarkPlacement as 'on' value.
yAxis: {
categories: ['person A', 'person B', 'person C', 'person D', 'person E'],
tickmarkPlacement: 'on',
startOnTick: false,
endOnTick: false,
title: {
text: 'People'
},
maxPadding: 0.2
},
Example: http://jsfiddle.net/hqykwrjd/

Line chart with multiple fields ext js

I am trying to mimic the chart provided in the link Link_here
with my customized data. I get the chart as date v/s temperature. But I don't see the plot of the line chart for t1 field on my chart.
Could some one help me figure out the error.
var storea = Ext.create('Ext.data.Store', {
model: 'WeatherPoint',
data: [
{ temperature: 58, t1 : 23, date: new Date(2013, 1, 1, 8) },
{ temperature: 63, t1 : 52, date: new Date(2013, 1, 1, 9) },
{ temperature: 73, t1 : 56, date: new Date(2013, 1, 1, 10) },
{ temperature: 78, t1 : 67, date: new Date(2013, 1, 1, 11) },
{ temperature: 81, t1 : 87, date: new Date(2013, 1, 1, 12) }
]
});
var chart = Ext.create('Ext.chart.Chart', {
style: 'background:#fff',
animate: true,
store: storea,
shadow: true,
theme: 'Category1',
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['temperature', 't1'],
title: 'Number of Hits',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['date'],
title: 'Month of the Year'
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'date',
yField: 'temperature',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'date',
yField: 't1',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
fill: true,
xField: 'name',
yField: 'data3',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}]
});
var win = Ext.create('Ext.Window', {
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
maximizable: true,
title: 'Line Chart',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}, {
text: 'Reload Data',
handler: function() {
// Add a short delay to prevent fast sequential clicks
window.loadTask.delay(100, function() {
storea.loadData(generateData(8));
});
}
}],
items: chart
});
This is what I get with the above code :
When I added fields: ['temperature', 't1', 'date'], to the store it worked for me.
http://jsfiddle.net/x_window/Kce8n/

Categories