I have included a Highcharts chart embed on my website. Now I would like to create many additional charts using other series data. However, I would like all of these additional charts have exactly the same styling and be the same type as my chart1. The only things I will have to change in each chart is the subtitle and series name. I can easily just copy my chart1 code and rename it chart2, chart3 etc. and this works fine. However, I would very much like to just replicate my chart1 for the other data series while only changing subtitles and series name for each data series (CHART1 SUBTITLE and CHART1 SERIESNAME).
I have tried different solutions but none worked so far. Below is the code I have made for my chart1.
chartOptions.chart1 = {
chart: {
type: 'column'
},
title: {
text: 'CHARTNAME',
style: {
fontFamily: 'Montserrat,serif',
spacingTop: 30,
fontSize: '22px'
}
},
subtitle: {
text: 'CHART1 SUBTITLE',
align: 'left',
x: 55,
style: {
fontFamily: 'Montserrat,serif',
spacingTop: 25,
color: "#000",
fontSize: '14px'
}
},
xAxis: {
categories: [],
labels: {
rotation: -20,
}
},
yAxis: {
title: {
text: 'TITLETEXT',
rotation: 270,
y: -30
},
},
series: [{
name: 'CHART1 SERIESNAME',
color: '#006699',
data: []
}],
tooltip: {
}
},
};
Below is the code I use to initialize the series data in chart1. Here I have added a 'chart2' and I essentially hoped it would somehow be able to initialize that in 'chart1' and somehow also changing the chart subtitle and series name.
$('chart').ready(function() {
var tableName = '<?php echo $tableName; ?>'
$.getJSON("../companychart/chartdataNew.php", {id: escape(tableName)}, function(json) {
chartOptions.chart1.xAxis.categories = json['XAXIS NAME']['data'];
chartOptions.chart1.series[0].data = json['SERIES 1']['data'];
chartOptions.chart2.xAxis.categories = json['XAXIS NAME']['data'];
chartOptions.chart2.series[0].data = json['SERIES 2']['data'];
});
You can use Highcharts.merge method to extend default options (used in each chart) by particular chart options (series, subtitle). Check the demo posted below.
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
JS:
var chart1 = {
subtitle: {
text: 'CHART1 SUBTITLE',
},
series: [{
name: 'CHART1 SERIESNAME',
color: '#006699',
data: [1, 2, 3, 4, 5]
}]
},
chart2 = {
subtitle: {
text: 'CHART2 SUBTITLE',
},
series: [{
name: 'CHART2 SERIESNAME',
color: '#0034ef',
data: [5, 1, 2, 6, 2]
}]
},
chart3 = {
subtitle: {
text: 'CHART3 SUBTITLE',
},
series: [{
name: 'CHART3 SERIESNAME',
color: '#23ee45',
data: [3, 5, 2, 3, 1]
}]
},
chartDefaultOptions;
chartDefaultOptions = {
chart: {
type: 'column'
},
title: {
text: 'CHARTNAME',
style: {
fontFamily: 'Montserrat,serif',
spacingTop: 30,
fontSize: '22px'
}
},
subtitle: {
align: 'left',
x: 55,
style: {
fontFamily: 'Montserrat,serif',
spacingTop: 25,
color: "#000",
fontSize: '14px'
}
},
xAxis: {
categories: [],
labels: {
rotation: -20,
}
},
yAxis: {
title: {
text: 'TITLETEXT',
rotation: 270,
y: -30
},
}
};
Highcharts.chart('container1', Highcharts.merge(chartDefaultOptions, chart1));
Highcharts.chart('container2', Highcharts.merge(chartDefaultOptions, chart2));
Highcharts.chart('container3', Highcharts.merge(chartDefaultOptions, chart3));
Demo:
https://jsfiddle.net/BlackLabel/7utogs95/
Related
I'm trying to have zones within my graph that change color when the value exceeds a particular threshold.
Here is my graph:
The Highchart resources have an example for how to do this:
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/color-zones-simple/
My problem however, is that I can't find an example anywhere for how to do it when your Highchart is importing the data from a text file.
I've styled my chart pretty heavily so this is my highchart code snippet:
$(function () {
// Load the fonts
Highcharts.createElement('link', {
href: 'http://fonts.googleapis.com/css?family=Signika:400,700',
rel: 'stylesheet',
type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);
// Add the background image to the container
Highcharts.wrap(Highcharts.Chart.prototype, 'getContainer', function (proceed) {
proceed.call(this);
this.container.style.background =null;
});
Highcharts.theme = {
colors: ['#5B8256'],
chart: {
backgroundColor: null,
style: {
fontFamily: "Arial, Helvetica, sans-serif"},
plotBorderColor: '#606063'},
title: {
style: {
color: '#eeeeee',
fontSize: '16px',
fontWeight: ''}},
subtitle: {
style: {
color: '#eeeeee'}},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {color: '#F0F0F0'},
borderWidth: 0},
legend: {
itemStyle: {
fontWeight: 'bold',
fontSize: '13px'}},
xAxis: {
labels: {
style: {
color: '#eeeeee'}}},
yAxis: {
labels: {
style: {
color: '#eeeeee'}}},
plotOptions: {
series: {shadow: true},
marker: {lineColor: '#333'},
candlestick: {lineColor: '#404048'},
map: {shadow: false}},
navigator: {
xAxis: {gridLineColor: '#D0D0D8'}},
rangeSelector: {
buttonTheme: {fill: '#eeeeee',stroke: '#C0C0C8','stroke-width': 1,
states: {
select: {fill: '#D0D0D8'}}}},
scrollbar: {trackBorderColor: '#eeeeee'},
background2: null};
Highcharts.setOptions(Highcharts.theme);
var options = {
chart: {
zoomType: 'x',
renderTo: 'container',
defaultSeriesType: 'column',
resetZoomButton: {
theme: {display: 'none'}}},
title: {
text: 'Max Pressure Today:',
style: {
fontSize: '14px',opacity: 0,
style: {color: '#'}}},
xAxis: {type: 'datetime'},
yAxis: [{ // Primary yAxis
labels: {format: '{value}',
style: {color: '#eeeeee'}},
title: {
text: '',
style: {color: '#1E1E1E'}},
opposite: false},],
legend: {enabled: false},
tooltip: {shared: true,valueSuffix: ' psi'},
plotOptions: {
column: {pointPadding: 0.2,borderWidth: 0},
series: {name: 'Pressure',pointStart: Date.UTC(2016, 10, 7),pointInterval: 12 * 3600 * 1000}},
series: []};
$.get('demo-data.txt', function(data) {
var lines = data.split('\n');
lines = lines.map(function(line) {var data = line.split(',');
data[1] = parseFloat(data[1]);return data;});
var series = {data: lines};
options.series.push(series);
var chart = new Highcharts.Chart(options);});});
Any help pointing me in the right direction would be appreciated.
You can add zones by plot-options, for example:
plotOptions: {
series: {
zones: [{
value: 20,
color: '#7cb5ec'
}, {
color: '#90ed7d'
}],
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/5w9rvonz/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.zones
I'm using Highcharts' x-range chart module to render a range of multiple values. I have a couple of issues in implementing it.
The hover and select states are not having any effect on the chart
The legend icon is not showing the color of the data
Code below:
var myChart7 = Highcharts.chart('sample', {
chart: {
type: 'xrange',
},
title: null,
xAxis: {
opposite: true,
labels: {
useHTML: true,
formatter: function() {
return this.value + "ms";
},
}
},
yAxis: {
title: {
text: ''
},
labels: {
enabled: true,
},
categories: [],
reversed: true
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true
},
allowPointSelect: true,
states: {
hover: {
color: '#a4edba'
},
select: {
color: '#EFFFEF',
borderColor: 'black',
dashStyle: 'dot'
}
},
pointWidth: 15,
borderRadius: 10,
dashStyle: 'Solid',
}
},
legend: {
enabled: true,
align: 'left',
},
series: [{
color: '#C4D9FF',
name: 'Sample 1',
data: [{
x: 0,
x2: 90,
y: 0,
response: '200',
color: '#C4D9FF',
borderColor: '#789CDF',
}],
},
{
color: '#FFD7C5',
name: 'Sample 2',
data: [{
x: 5,
x2: 70,
y: 1,
response: '200',
color: '#FFD7C5',
borderColor: '#F99B6F',
}],
}, {
color: '#DCFFF5',
name: 'Sample 3',
data: [{
x: 35,
x2: 70,
y: 2,
response: '400',
color: '#DCFFF5',
borderColor: '#35C097',
}],
}
],
});
<div id="sample">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/highstock.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/modules/xrange.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/highcharts-more.js"></script>
JSFiddle link
I don't know if I'm implementing it in the right or wrong way. Please guide me. TIA.
I'm working on Chrome version 85 on mac. Haven't tested it on other browsers.
Those features hasn't been implemented in the version of the Highcharts which you are using. In the current version everything works fine: https://jsfiddle.net/BlackLabel/trxjw4np/
In the x-range series type the legend item doesn't inherit the color from the series, but you can set it programmatically.
Demo: https://jsfiddle.net/BlackLabel/trxjw4np/
events: {
load() {
let chart = this;
chart.legend.allItems.forEach(item => {
item.legendSymbol.css({
fill: item.userOptions.color
})
})
}
}
API: https://api.highcharts.com/highcharts/chart.events.load
I have a weird question:
The series1 variable is an array of date-times, which are too long. Because of this, the chart cannot display correctly. However, if I change series1 to make it contain the values of series2. It will work correctly. Can you let me know what I should do?
Also, how can I get each value in series1 shown as a date? suppose it is a variable from flask {{series1}}. thank you.
$(function () {
var series1 = [1489298400000L, 1492923600000L, 1492318800000L, 1480226400000L, 1494133200000L, 1490504400000L, 1488088800000L, 1475384400000L, 1493528400000L, 1491109200000L, 1480831200000L, 1471755600000L]
var series2 = [1, 7, 2, 1, 4, 1, 1, 1, 4, 6, 1, 1]
var series3 = [102, 95, 110, 111, 81, 104, 99, 92, 90, 100, 103, 98]
var myChart =
Highcharts.chart('container', {
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
credits: {
text: 'Songhuiming',
href: 'http://www.songhuiming.com'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: series1,
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: series2,
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'spline',
data: series3,
tooltip: {
valueSuffix: '°C'
}
}]
});
});
About suffix "L" on the end you can read here.
What you need at first to make all items in series1 array be a string, because as it now, you will have an error. Then remove "L" and convert to dates
let series = ['1489298400000L', '1492923600000L', '1492318800000L', '1480226400000L', '1494133200000L', '1490504400000L', '1488088800000L', '1475384400000L', '1493528400000L', '1491109200000L', '1480831200000L', '1471755600000L'];
let series1 = series.map((item) => {
let date = new Date(parseInt(item.replace("L", ""))));
return `${date.getMonth()} ${date.getFullYear()}`;
});
I have a highcharts graph which has both column and spline graph in it. The data sets are passed using handlebars variables. The code is like this
$(function () {
$('#container').highcharts({
title: {
text: '',
style: {
color: '#cc0000',
fontWeight: 'bold'
}
},
xAxis: {
categories: [{{{xaxisLabel}}}]
},
yAxis: [{ /* Primary yAxis */
labels: {
format: '{value}%',
style: {
color: '#cc0000'
}
},
title: {
text: 'Failure Percentage',
style: {
color: '#cc0000'
}
}
}, { /* Secondary yAxis */
title: {
text: 'Success Percentage',
style: {
color: '#009900'
}
},
max: 100,
labels: {
format: '{value} %',
style: {
color: '#009900'
}
},
opposite: true
}],
labels: {
items: [{
html: '',
style: {
left: '2px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
credits: {
enabled: false
},
series: [{
type: 'column',
name: 'Success',
color: Highcharts.getOptions().colors[2],
yAxis: 1,
tooltip: {
valueSuffix: ' %'
},
data: [{{barSuccess}}]
}, {
type: 'spline',
name: 'Failure',
tooltip: {
valueSuffix: ' %'
},
data: [{{barFailure}}],
marker: {
lineWidth: 3,
lineColor: Highcharts.getOptions().colors[8],
fillColor: 'red'
}
}]
});
});
Now i have two more data sets called as {{toolTipSuccess}} and {{toolTipFailure}}.
{{toolTipSuccess}} goes in the column chart and {{toolTipFailure}} goes in the spline chart.
I want the data in these two datasets to come as a tooltip in the respective graphs. I know this can be done if i pass the data in the (x,y,z) format in the graph, but i'll have to do a lot of code change to accommodate that which i am avoiding.
Does anyone know any roundabout to this problem?
The data in the variables is of this type:-
{{barSuccess}} = [100, 99, 99, 99 .........]
{{barFailure}} = [ 0, 0, 1, 0.3........]
{{toolTipSuccess}} = [363, 763, 762, 987, ........]
{toolTipFailure}} = [12, 3, 13, 8, .........]
Thanks in advance
You could define your own tooltip formatter and then use the position of the column data point in the input 'bar' data to retrieve and display the appropriate data from toolTipSuccess / toolTipFailure. Consider this snippet of a series.tooltip definition:
//... more series definition
tooltip: {
pointFormatter: function(){
return "Rainfall: " + this.y + ", success: " + successPoints[this.series.data.indexOf( this )] + "<br />";
}
}
//... more code
var successPoints = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
JSfiddle here:
http://jsfiddle.net/L2ncbenx/1/
(Apologies, this is a rough edit of an existing highcharts example)
As you can see, this uses the position of the highlighted point to find the position of the required data in the other dataset.
I am creating a chart and have so far found that a scatter and errorbar combination chart is the best fit. I have hit a problem when adding an extra pair of series that because I have used a scatter, that they are placed on top of each other.
This is the standard view for the chart which is correct:
This is what I WANT to happen when I add an extra pair of series data:
But this is what happens:
var chart;
$(function () {
$('#container').highcharts({
title: {
text: 'Chart'
},
tooltip: {
enabled: false
},
xAxis: [{
categories: ['Col1', 'Col2', 'Col3']
}],
yAxis: [{ // Primary yAxis
title: {
text: 'Chart'
}, opposite: true
}
, { // Secondary yAxis
title: {
text: 'Score'
}
}],
plotOptions: {
scatter: {
dataLabels: {
enabled: true,
x: 0,
y: 10
},
enableMouseTracking: false
},
errorbar: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Value',
type: 'scatter',
yAxis: 1,
data: [1001.418, 1000.006, 1005.237],
dataLabels: {
backgroundColor: Highcharts.getOptions().colors[0],
padding: 3,
color: '#ffffff',
style: {
"textShadow": "none",
"lineHeight": "13px"
},
useHTML:true
},
marker: {
symbol: "square"
},
}, {
type: 'errorbar',
whiskerColor: '#555',
stemColor: '#555',
yAxis: 1,
data: [[1000.46, 1002.376], [999.071, 1000.941], [1002.753, 1007.721]]
},
//START extra data
{
name: 'Compare',
type: 'scatter',
yAxis: 1,
data: [1001.918, 1000.506, 1005.737],
dataLabels: {
backgroundColor: Highcharts.getOptions().colors[1],
padding: 3,
style: {
"textShadow": "none",
"lineHeight": "13px"
},
useHTML:true
},
marker: {
symbol: "square"
},
}, {
type: 'errorbar',
whiskerColor: '#555',
stemColor: '#555',
yAxis: 1,
data: [[1001.46, 1003.376], [1000.071, 1001.941], [1003.753, 1006.721]]
},
//END extra data
{
//force the ErrorBar icon into the legend
name: 'ErrorBar',
type: 'scatter',
marker: {
symbol: "url(data:image/gif;base64,R0lGODlhDwAMAIAAAFVVVf///yH5BAEHAAEALAAAAAAPAAwAAAIXhI8ZywEN4Yt0UnmjzWtzn4GXWFXJeRQAOw==)"
},
data:[null]
}
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
http://jsfiddle.net/ewurrLgk/
I have taken a look through the API and I have tried to use other chart types like Line and Column and although they do align correctly, the error bar pretty much disappears because those chart types start from zero. I've also tried pointPlacement but that just moves them both into the middle. Is what I am trying to do just not possible using a scatter?
You should use pointPlacement, but set per particular series. I prepared a minified demo for you:
series: [{
type: 'scatter',
pointPlacement:-0.2,
data: [51,73]
},{
type: 'scatter',
pointPlacement:0.2,
data: [8,7.6]
},{
type: 'errorbar',
pointPlacement:-0.2,
data: [[48, 51], [68, 73]]
}, {
type: 'errorbar',
pointPlacement:0.2,
data: [[6, 8], [5.9, 7.6]]
}]
http://jsfiddle.net/6e749xx9/1/