I would like to have a dynamic chart. I would like to add new series and even change values of an old series that appear on Forio Contour. I took one of Forio's examples and changed it:
$(function () {
var myContour = new Contour({
el: '.line-multi-basic',
xAxis: {
title: 'Group Size',
type: 'linear'
},
yAxis: {
title: 'Test Score'
},
legend: {
vAlign: 'top',
hAlign: 'left'
}
}).cartesian();
var redLine = [{x: 0, y: 170},{x: 88, y: 170},{x: 178, y: 149},{x: 201, y: 106},{x: 287, y: 83},{x: 331, y: 105},{x: 353, y: 172},{x: 400, y: 219}];
var greenLine = [{x: 0, y: 220},{x: 87, y: 130},{x: 154, y: 197},{x: 197, y: 195},{x: 220, y: 214},{x: 286, y: 215},{x: 332, y: 263},{x: 378, y: 241}, {x: 400, y: 242}];
var blueLine = [{x: 0, y: 103},{x: 44, y: 103},{x: 154, y: 36},{x: 309, y: 150},{x: 376, y: 150},{x: 400, y: 171}];
var data = [{name: 'Math', data: redLine}];
myContour.line(data).tooltip().legend(data).render();
data = [{name: 'Math', data: redLine},
{name: 'Economics', data: greenLine}];
myContour.line(data).tooltip().legend(data).render();
data = [{name: 'Math', data: redLine},
{name: 'Economics', data: greenLine},
{name: 'History', data: blueLine}];
myContour.line(data).tooltip().legend(data).render();
//update redLine and reconstruct data
var redLine = [{x: 0, y: 70},{x: 88, y: 70},{x: 178, y: 49},{x: 201, y: 6},{x: 287, y: 3},{x: 331, y: 5},{x: 353, y: 72},{x: 400, y: 19}];
data = [{name: 'Math', data: redLine},
{name: 'Economics', data: greenLine},
{name: 'History', data: blueLine}];
myContour.line(data).tooltip().legend(data).render();
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://forio.com/tools/contour/contour.min.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://forio.com/tools/contour/contour.min.js"></script>
<div class="chart line-multi-basic"></div>
The legend does not change with data updates!
Also, when I update one of the series, it just draws a new one!
This is a bug in the version of contour that you are using and that was subsequently fixed, if you change the script (and css) include lines to:
<link rel="stylesheet" href="https://forio.com/tools/contour/0.9.114/contour.min.css">
<script src="https://forio.com/tools/contour/0.9.114/contour.min.js"></script>
you should be able to call chart.setData(...).render() and the legend should update correctly.
Related
New to Highcharts, trying to generate waterfall chart with stacking only on intermediate stack. (image below)
Please help.
enter image description here
You should be able to achieve something like this by adding these stacking columns as an additional series to the waterfall chart. I think that everything is clearly showed in the demo.
Demo: https://jsfiddle.net/BlackLabel/tmyrk21f/
{
type: 'column',
pointPadding: 0,
stacking: 'normal',
data: [
// First stack
{
y: 50000,
x: 0,
color: 'red'
}, {
y: 50000,
x: 0,
color: 'orange'
}, {
y: 20000,
x: 0,
},
// Second stack
{
y: 500000,
x: 3,
color: 'red'
}, {
y: 400000,
x: 3,
color: 'orange'
}, {
y: 20000,
x: 3,
},
// Third stack
{
y: 145000,
x: 6,
color: 'red'
}, {
y: 100000,
x: 6,
color: 'orange'
}, {
y: 100000,
x: 6,
}
]
}
API: https://api.highcharts.com/highcharts/series.column.groupPadding
API: https://api.highcharts.com/highcharts/series.line.stacking
We are developing some charts using Highcharts.
And we are using the series.events.afterAnimate in combination with an xAxis.max value.
But when we have for example points from Januari until September, but with an xAxis.max value until December the afterAnimate function is called when it reached December we guess..
But we would like have a callback when all the valid points are drawn, and not we it reaches its max value...
is this possible?
That happens because the clipPath width is by default equal width of the plot area. To change it you can overwrite Highcharts.Series.animate method and set clipPath width equal width of the particular series.
EDIT:
Also, note that when the width of the clipPath is shorter and the duration of the animation is the same the animation will be much slower. To make it look better the time has to be shortened - it can be calculated depending on series width and updated in chart load event.
Check demo and code posted below:
Code:
(function(H) {
H.Series.prototype.animate = function(init) {
var series = this,
chart = series.chart,
clipRect,
animation = H.animObject(series.options.animation),
sharedClipKey;
// Initialize the animation. Set up the clipping rectangle.
if (init) {
series.setClip(animation);
// Run the animation
} else {
sharedClipKey = this.sharedClipKey;
clipRect = chart[sharedClipKey];
if (clipRect) {
clipRect.animate({
width: series.group.getBBox().width,
x: 0
}, animation);
}
if (chart[sharedClipKey + 'm']) {
chart[sharedClipKey + 'm'].animate({
width: chart.plotSizeX + 99,
x: 0
}, animation);
}
// Delete this function to allow it only once
series.animate = null;
}
}
})(Highcharts);
Highcharts.setOptions({
chart: {
events: {
load: function() {
var chart = this,
series = chart.series[0],
seriesWidth = series.graph.getBBox().width,
duration = (seriesWidth / chart.plotWidth) * series.options.animation.duration;
chart.series[0].update({
animation: {
duration: duration
}
});
}
}
},
plotOptions: {
series: {
animation: {
duration: 2000
}
}
}
});
Highcharts.chart('container', {
title: {
text: 'Chart with half data but with max data'
},
subtitle: {
text: 'A label should appear when all points are drawn'
},
xAxis: {
type: 'datetime',
min: Date.UTC(2019, 0, 1),
max: Date.UTC(2019, 11, 31),
tickInterval: 2592000000, // month
},
plotOptions: {
series: {
events: {
afterAnimate: function() {
this.chart.renderer.label(this.name + ' has appeared', 100, 70)
.attr({
padding: 10,
fill: Highcharts.getOptions().colors[0]
})
.css({
color: 'white'
})
.add();
}
}
}
},
series: [{
data: [{
x: Date.UTC(2019, 0, 1),
y: 29.9
},
{
x: Date.UTC(2019, 1, 1),
y: 139.9
},
{
x: Date.UTC(2019, 2, 1),
y: 59.9
},
{
x: Date.UTC(2019, 3, 1),
y: 19.9
},
]
}]
});
Highcharts.chart('container2', {
title: {
text: 'Chart with full data'
},
subtitle: {
text: 'A label should appear on the plot area after animate'
},
xAxis: {
type: 'datetime',
min: Date.UTC(2019, 0, 1),
max: Date.UTC(2019, 11, 31),
tickInterval: 2592000000, // month
},
plotOptions: {
series: {
events: {
afterAnimate: function() {
this.chart.renderer.label(this.name + ' has appeared', 100, 70)
.attr({
padding: 10,
fill: Highcharts.getOptions().colors[0]
})
.css({
color: 'white'
})
.add();
}
}
}
},
series: [{
data: [{
x: Date.UTC(2019, 0, 1),
y: 29.9
},
{
x: Date.UTC(2019, 1, 1),
y: 139.9
},
{
x: Date.UTC(2019, 2, 1),
y: 59.9
},
{
x: Date.UTC(2019, 3, 1),
y: 19.9
},
{
x: Date.UTC(2019, 4, 1),
y: 29.9
},
{
x: Date.UTC(2019, 5, 1),
y: 139.9
},
{
x: Date.UTC(2019, 6, 1),
y: 59.9
},
{
x: Date.UTC(2019, 7, 1),
y: 19.9
},
{
x: Date.UTC(2019, 8, 1),
y: 29.9
},
{
x: Date.UTC(2019, 9, 1),
y: 139.9
},
{
x: Date.UTC(2019, 10, 1),
y: 59.9
},
{
x: Date.UTC(2019, 11, 1),
y: 19.9
},
]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<div id="container2" style="height: 400px"></div>
Demo:
https://jsfiddle.net/BlackLabel/gj7eqkv8/
API reference:
https://api.highcharts.com/highcharts/chart.events.load
the below elements how can i use in the pdf make for create cricle, rectangle or any other shape
'tableCellPadding'
'cellBorder',
'headerCellBorder',
'oddRowCellBorder',
'evenRowCellBorder',
'tableBorder'
$('#cmd').click(function () {
var docDefinition = {
pageMargins: [0, 0, 0, 0],
content: [
canvas: [
{
style: 'rectangleData',
type: 'rect',
x: 198,
y: -186,
w: 198,
h: 188,
r: 8,
lineWidth: 4,
lineColor: '#276fb8',
},
]
}
]
}
I have this Highcharts column chart:
http://jsfiddle.net/ltherond/bmk71a8r/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
type: 'linear'
},
credits: {
enabled: false
},
plotOptions: {
column: {
borderWidth: 0,
groupPadding: 0,
pointPadding: 0,
pointPlacement: 'between',
shadow: false
}
},
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
});
});
I want the first bar to extend horizontally from 0 to 500 on the xaxis.
In other words, I want each bar to start at the current x value and end at the next x value.
How do I do that?
The option you are looking for is connectNulls for your series attribute
From my knowledge this options is only available for Area and Line Charts and no longer available for column or bar chart
I recommend you to change your Chart Type to area chart and use connectNulls option as mentioned in Documentation here
To meet your requirement in Column chart itself you need to tune your data you fed into High chart as follows in your series code segment
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
},{
x: 100,
y: 5,
color: "#00FF00"
},{
x: 200,
y: 5,
color: "#00FF00"
},{
x: 300,
y: 5,
color: "#00FF00"
},{
x: 400,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
This will solve your problem. see the working fiddle http://jsfiddle.net/bmk71a8r/3/
For this approach you need to write extra codes to format your Data
Good Day
data labels overlapping is a tricky problem when areas of the chart are crowded.
Let's look here: http://jsfiddle.net/zpd88mt7/1/
HTML
<body>
<div id="container" class="chart_container" style="width:800px; height:400px;"></div>
</body>
JS
var chart_options = {
chart: {
renderTo: 'container',
type: 'scatter',
zoomType: 'xy'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
align: 'center',
rotation: 0,
x: 0,
y: -2,
formatter: function() {
return this.point.name;
}
},
marker: {symbol: 'circle'}
}
},
series: [
{
id: 'volumes',
lineWidth: 0,
index: 10,
marker: {
enabled: true,
radius: 4
},
data: [
{x: 6798, y: 770, name: '01-XXXXXXXXX', id: '01'},
{x: 7934, y: 1350, name: '02-XXXXXXXXX', id: '02'},
{x: 7516, y: 926, name: '03-XXXXXXXXX', id: '03'},
{x: 7143, y: 907, name: '04-XXXXXXXXX', id: '04'},
{x: 7741, y: 1188, name: '05-XXXXXXXXX', id: '05'},
{x: 3449, y: 1121, name: '06-XXXXXXXXX', id: '06'},
{x: 7542, y: 917, name: '07-XXXXXXXXX', id: '07'},
{x: 8634, y: 1124, name: '08-XXXXXXXXX', id: '08'},
{x: 7986, y: 1132, name: '09-XXXXXXXXX', id: '09'},
{x: 9311, y: 1261, name: '10-XXXXXXXXX', id: '10'},
{x: 7681, y: 552, name: '11-XXXXXXXXX', id: '11'},
{x: 7665, y: 1148, name: '12-XXXXXXXXX', id: '12'},
{x: 8024, y: 889, name: '13-XXXXXXXXX', id: '13'},
{x: 8882, y: 1278, name: '14-XXXXXXXXX', id: '14'},
{x: 7164, y: 1015, name: '15-XXXXXXXXX', id: '15'}
]
}
]
}
var chart;
$(function() {
chart = new Highcharts.Chart(chart_options);
}
);
A good solution could be iterating on labels and moving them upward (or elsewhere) in a free nearby position and connect them to their dot with a line. But it looks like something needing a good amount of time and effort.
Do you know if this has already been solved?
Maybe Highcharts developers are planning something on this side? Probably this is affecting many Highcharts users.