I am using high charts https://www.highcharts.com/ for making a combination chart of Jump line and Column chart. High charts do not have such type for jump line charts . Can anyone have better solution?
How can I integrate jump line chart with column chart using high charts ?
This is what I need to make ...
Combo Chart
Here's the code I am using
Highcharts.chart("container", {
title: {
text: "Combination chart"
},
plotOptions: {
column: {
borderRadius: 5
},
series: {
marker: {
enabled: false
}
}
},
xAxis: {
categories: ["PU", "EK", "EY", "BR", "MS", "DL", "JL", "BA", "NZ", "CV"]
},
labels: {
items: [
{
// html: 'Total fruit consumption',
style: {
left: "50px",
top: "18px",
color:
// theme
(Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color) ||
"black"
}
}
]
},
series: [
{
// max:0,
pointWidth: 7,
type: "column",
name: "TP",
lineWidth: 8,
data: [10, 45, 15, 95, 10, 100, 75, 20, 66, 55]
},
{
type: "column",
name: "1S",
pointWidth: 7,
data: [13, 25, 50, 75, 100, 60, 25, 50, 75, 100],
// yAxis: 1
},
{
type: "column",
name: "1A",
pointWidth: 7,
data: [13, 20, 50, 75, 100, 40, 28, 51, 95, 100],
// yAxis: 1
},
{
type: "line",
name: "LYTP",
data: [10,10,null,80,80,null,90,90,null,103,103],
// dashStyle: "longdash",
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[1],
fillColor: "lightblue"
}
},
{
// type: 'pie',
// name: 'Total consumption',
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}
]
});
.highcharts-strong {
font-weight: bold;
}
.highcharts-figure, .highcharts-data-table table {
min-width: 320px;
max-width: 600px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/timeline.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Timeline charts are used to place events on a time axis,
such as this example showing the major space exploration
events from 1951 to 1975.
</p>
</figure>
There is no a series in Highcharts which perfectly meets your requirements in this case, but you can easily create such. It is enough to slightly modify the column series:
(function(H) {
H.seriesType('jump-line', 'column', {
height: 6
}, {
translate: function() {
H.seriesTypes.column.prototype.translate.apply(this);
this.points.forEach(function(point) {
point.shapeArgs.height = this.options.height;
}, this);
}
});
}(Highcharts));
Highcharts.chart('container', {
...,
series: [..., {
type: 'jump-line',
pointPadding: 0,
grouping: false,
data: [4, 4, 4]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/x3rtdzc0/
API Reference:
https://api.highcharts.com/class-reference/Highcharts#.seriesType
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
Related
I am trying to understand from this demo
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-time-series
by changing only data and run it , But it not working , from my understand datetime type it should be millisecond right ?
This test data is select from mysql by using command UNIX_TIMESTAMP(dateTime_Field)*1000
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: '[[1015174800000, 62], [1044810000000, 86], [1081011600000, 147], [1110819600000, 177], [1137344400000, 408], [1191258000000, 1612], [1221411600000, 960], [1240160400000, 960], [1291395600000, 6833], [1319043600000, 2952], [1332262800000, 3746], [1366995600000, 5612], [1417971600000, 8662], [1442250000000, 6504], [1482166800000, 15010], [1512838800000, 8168], [1526662800000, 10439], [1559581200000, 33594], [1580922000000, 22307], [1614186000000, 25955]]'
}]
});
.highcharts-figure,
.highcharts-data-table table {
min-width: 360px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Highcharts has extensive support for time series, and will adapt
intelligently to the input data. Click and drag in the chart to zoom in
and inspect the data.
</p>
</figure>
Your data structure looks correct, but you need to use an array instead of a string. You can use JSON.parse to convert.
series: [{
type: 'area',
name: 'USD to EUR',
data: JSON.parse('[[1015174800000, 62], [1044810000000, 86], ...]')
}]
Live demo: https://jsfiddle.net/BlackLabel/w9vfut1k/
API Reference: https://api.highcharts.com/highcharts/series.area.data
I want same color of line and area of a time series chart in highcharts. I am attaching the link of jsfiddle
here the shaded area and line color of chart is blue but i want with this hex code #70843A. can anyone help me? https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-time-series
Highcharts.getJSON(
"https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/usdeur.json",
function (data) {
Highcharts.chart("container", {
chart: {
zoomType: "x",
},
title: {
text: "USD to EUR exchange rate over time",
},
subtitle: {
text:
document.ontouchstart === undefined
? "Click and drag in the plot area to zoom in"
: "Pinch the chart to zoom in",
},
xAxis: {
type: "datetime",
},
yAxis: {
title: {
text: "Exchange rate",
},
},
legend: {
enabled: false,
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1,
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[
1,
Highcharts.color(Highcharts.getOptions().colors[0])
.setOpacity(0)
.get("rgba"),
],
],
},
marker: {
radius: 2,
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1,
},
},
threshold: null,
},
},
series: [
{
type: "area",
name: "USD to EUR",
data: data,
},
],
});
}
);
.highcharts-figure,
.highcharts-data-table table {
min-width: 360px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Highcharts has extensive support for time series, and will adapt
intelligently to the input data. Click and drag in the chart to zoom in and
inspect the data.
</p>
</figure>
If I understand the question right, you don't want that gradient.
Highcharts offers it, and its in your working example, specifically
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1,
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[
1,
Highcharts.color(Highcharts.getOptions().colors[0])
.setOpacity(0)
.get("rgba"),
],
],
}
This can be updated, towards the end with the setOpacity..
[1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(1).get('rgba')]
As it says, you just set the opacity to 1. Full block colour.
If you just want to change the colour itself, you can just set the fill colour to a CSS colour..
fillColor: '#FF0000',
Ugly Red JSfiddle
Documentation is here : Highcharts Documentation
And if you want the line colour etc set to the HEX you metnioned.
You can set lineColor in the marker ..
Green LineColour
The documentation is very well laid out.
I have a scenario as something similar to this.
https://jsfiddle.net/31om2f6d/
Note that the data plotted in x-axis and data inside series is a list of 50 values (in this example, I have mentioned 6 values.) I need to drilldown into another three line charts which indicates the sum of the counts.
For example, Point 50 in 2019.1 will be split into three points say(10,10,30) in the drilldown. Similarly the rest of the points as well.As a result, there should be 3 line charts when I drilldown from linechart of main page. Kindly help me out with this function. (The values for the drilldown is in the form of list as well.)
Note: I have been reading in forum like drilldown can be done only in point mapping and not when mapped in series. I am not sure if that is the exact behaivour. If so, kindly let me know how we can map a series of 50 dynamic data by points and drilldown from there.
Any help is appreciated. Thanks in Advance.
Highcharts.setOptions({
colors: [
'#470303', '#c40a0a', '#a34d4d', '#eda4a4'
]
});
Highcharts.chart('container-trend', {
chart: {
type: 'line',
},
title: {
text: 'Trend'
},
exporting: {
tableCaption: false,
enabled: false
},
credits: {
enabled: false
},
xAxis: {
categories: [2019.1, 2019.2, 2019.3, 2019.4, 2019.5, 2019.6]
},
yAxis: {
title: {
text: 'Counts '
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: true
}
},
series: [{
name: 'Total Counts',
data: [50,70,30,40,50,20]
}]
});
.highcharts-figure, .highcharts-data-table table {
min-width: 360px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container-trend" style="min-width: 310px; height: 320px; margin: 0 auto"></div>
</figure>
Would you like to achieve something like here: https://jsfiddle.net/BlackLabel/f4bvud2q/?
series: [{
name: 'Total Counts',
data: [{y: 50, drilldown: '2019.1'},70,30,40,50,20]
}],
drilldown: {
series: [{
name: '2019.1',
id: '2019.1',
data: [10, 10, 30]
}]
}
API: https://api.highcharts.com/highcharts/drilldown.series
I've got a project where I'm putting together a graph with some example sample data. I need to format the legend in a specific way such that I couldn't use Chart.JS's, so I implemented a custom HTML version. See the example below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!--
NOT USED FOR THIS EXAMPLE
<script src="data.js"></script>
-->
<script src="https://codepen.io/EtherealBug/pen/bMZJWQ.js"></script>
<div id="image" class="canvas-container">
<div class="canvas-container-inner">
<canvas id="myChart"></canvas>
</div>
<span id="js" class="chart-legend"> </span>
<div id="js-legend" class="chart-legend">
</div>
</div>
<style>
canvas {
width: 100% !important;
max-width: 2000px;
height: auto !important;
}
#js-legend {
/*width: 130px;*/
background-color: rgba(0, 0, 0, 0);
margin-top: 1.25%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
/*chart.js default*/
font-size: .85em;
font-weight: bold;
color: #666;
/*chart.js default*/
}
#js {
float: left;
width: 2em;
height: 0.25em;
background: black;
margin-top: 1em;
margin-left: 10%;
}
#image {
border: 2px solid rgba(102, 102, 102, .2);
}
</style>
<script>
var labels = jsonfile.jsonarray.map(function(e) {
return e.Time;
});
var data = jsonfile.jsonarray.map(function(e) {
return e.Speed;
});
var ctx = myChart.getContext('2d');
var config = {
options: {
legend: {
display: false,
},
title: {
display: true,
text: "Steady State",
fontSize: 25,
padding: 25,
},
scales: {
xAxes: [{
scaleLabel: {
fontSize: 14,
fontStyle: 'bold',
display: true,
labelString: 'Time (days)'
},
ticks: {
autoSkip: true,
maxTicksLimit: 9,
fontStyle: 'bold',
minRotation: 0,
maxRotation: 0,
callback: function(label, index, labels) {
switch (label) {
case 1:
return '1';
case 222:
return '2';
case 443:
return '3';
case 664:
return '4';
case 885:
return '5';
case 1106:
return '6';
case 1327:
return '7';
case 1548:
return '8';
case 1769:
return '9';
case 1993:
return '10';
}
}
},
}],
yAxes: [{
scaleLabel: {
fontSize: 14,
fontStyle: 'bold',
display: true,
labelString: 'Concentration (\u03BCM)'
},
ticks: {
autoSkip: true,
maxTicksLimit: 10,
fontStyle: 'bold',
},
}],
},
},
type: 'line',
data: {
labels: labels,
datasets: [{
lineTension: 0.4, //defaul val = 0.4
pointBackgroundColor: 'rgba(0,0,0,0)',
pointBorderColor: 'rgba(0,0,0,0)',
borderColor: 'black',
borderWidth: 4,
fill: false,
label: 'steady state',
data: data,
}]
}
};
var jsLegend = document.getElementById("js-legend");
jsLegend.innerHTML = '\xa0' + "steady state";
var chart = new Chart(ctx, config);
</script>
The content needs to be responsive, which is where I run into trouble. The line depicting the color of the 'steady state' data should be aligned on the vertical center-line of the label. If you resize the window, it shifts vertically. I can't figure out how to tie the margin-top distance of the line element to that of the 'steady state' element's.
Try this. I have made some changes in your "#js" and "#js-legend" and also have enclosed them in one div.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!--
NOT USED FOR THIS EXAMPLE
<script src="data.js"></script>
-->
<script src="https://codepen.io/EtherealBug/pen/bMZJWQ.js"></script>
<div id="image" class="canvas-container">
<div class="canvas-container-inner">
<canvas id="myChart"></canvas>
</div>
<div id="enclosed-js">
<span id="js" class="chart-legend"> </span>
<span id="js-legend" class="chart-legend"></span>
</div>
</div>
<style>
canvas {
width: 100% !important;
max-width: 2000px;
height: auto !important;
}
#enclosed-js{
position: relative;
margin-top: 1.25%;
margin-left: 10%;
}
#js-legend {
/*width: 130px;*/
background-color: rgba(0, 0, 0, 0);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
/*chart.js default*/
font-size: .85em;
font-weight: bold;
color: #666;
margin-left: 2.1em;
/*chart.js default*/
}
#js {
float: left;
width: 2em;
height: 0.25em;
background: black;
position:absolute;
top: 50%;
}
#image {
border: 2px solid rgba(102, 102, 102, .2);
}
</style>
<script>
var labels = jsonfile.jsonarray.map(function(e) {
return e.Time;
});
var data = jsonfile.jsonarray.map(function(e) {
return e.Speed;
});
var ctx = myChart.getContext('2d');
var config = {
options: {
legend: {
display: false,
},
title: {
display: true,
text: "Steady State",
fontSize: 25,
padding: 25,
},
scales: {
xAxes: [{
scaleLabel: {
fontSize: 14,
fontStyle: 'bold',
display: true,
labelString: 'Time (days)'
},
ticks: {
autoSkip: true,
maxTicksLimit: 9,
fontStyle: 'bold',
minRotation: 0,
maxRotation: 0,
callback: function(label, index, labels) {
switch (label) {
case 1:
return '1';
case 222:
return '2';
case 443:
return '3';
case 664:
return '4';
case 885:
return '5';
case 1106:
return '6';
case 1327:
return '7';
case 1548:
return '8';
case 1769:
return '9';
case 1993:
return '10';
}
}
},
}],
yAxes: [{
scaleLabel: {
fontSize: 14,
fontStyle: 'bold',
display: true,
labelString: 'Concentration (\u03BCM)'
},
ticks: {
autoSkip: true,
maxTicksLimit: 10,
fontStyle: 'bold',
},
}],
},
},
type: 'line',
data: {
labels: labels,
datasets: [{
lineTension: 0.4, //defaul val = 0.4
pointBackgroundColor: 'rgba(0,0,0,0)',
pointBorderColor: 'rgba(0,0,0,0)',
borderColor: 'black',
borderWidth: 4,
fill: false,
label: 'steady state',
data: data,
}]
}
};
var jsLegend = document.getElementById("js-legend");
jsLegend.innerHTML = '\xa0' + "steady state";
var chart = new Chart(ctx, config);
</script>
I'm trying to create a mapping website for my thesis. I got this sample from high-maps, and it works.
// Prepare random data
var data = [
['DE.SH', 728],
['DE.BE', 710],
['DE.MV', 963],
['DE.HB', 541],
['DE.HH', 622],
['DE.RP', 866],
['DE.SL', 398],
['DE.BY', 785],
['DE.SN', 223],
['DE.ST', 605],
['DE.NW', 237],
['DE.BW', 157],
['DE.HE', 134],
['DE.NI', 136],
['DE.TH', 704],
['DE.', 361]
];
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=germany.geo.json&callback=?', function (geojson) {
// Initiate the chart
Highcharts.mapChart('container', {
title: {
text: 'GeoJSON in Highmaps'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
tickPixelInterval: 100
},
series: [{
data: data,
mapData: geojson,
joinBy: ['code_hasc', 0],
keys: ['code_hasc', 'value'],
name: 'Random data',
states: {
hover: {
color: '#a4edba'
}
},
dataLabels: {
enabled: true,
format: '{point.properties.postal}'
}
}]
});
});
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px"></div>
I have a map file which is located in my local data, so I want to change the existing map with mine and also change the random data. I try to change the $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=germany.geo.json&callback=?', function (geojson) with $.getJSON('3312kec.geojson', function (geojson).
// Prepare random data
var data = [
['010', 728],
['020', 710],
['030', 963],
['040', 541],
['050', 622],
['060', 866],
['070', 398],
['080', 785],
['090', 223],
['100', 605],
['110', 237],
['120', 157],
['130', 134],
['140', 136],
['150', 704],
['160', 398],
['170', 785],
['180', 223],
['190', 605],
['200', 237],
['201', 157],
['210', 134],
['220', 136],
['230', 704],
['240', 361]
];
$.getJSON('3312kec.geojson', function (geojson) {
// Initiate the chart
Highcharts.mapChart('container', {
title: {
text: 'GeoJSON in Highmaps'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
tickPixelInterval: 100
},
series: [{
data: data,
mapData: geojson,
joinBy: ['code_hasc', 0],
keys: ['code_hasc', 'value'],
name: 'Random data',
states: {
hover: {
color: '#a4edba'
}
},
dataLabels: {
enabled: true,
format: '{point.properties.postal}'
}
}]
});
});
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px"></div>
I have tried various ways but always failed. Is there someone who can help me?