How do you join the points in an ECharts scatter charts? - javascript

line vs scatter
I would like to join the points with a line in the scatter charts, like Scatter Line Chart in Chart js adding showLine: true.
option = {
xAxis: {},
yAxis: {},
series: [
{
symbolSize: 20,
data: [
[10.0, 8.04],
[8.07, 6.95],
[7.07, 6.95],
[13.0, 7.58]
],
type: 'scatter'
},
{
symbolSize: 1,
color: 'red',
data: [
[3.0, 8],
[3.0, 4],
],
type: 'line',
lineStyle: {
"width": "2"
},
}
]
};

Instead of drawing lineS on the scatter chart, you can draw scatter on the line chart, they will have exactly same effect:
Here's the config for it:
option = {
xAxis: {},
yAxis: {},
series: [
{
symbolSize: 20,
data: [
[7.07, 6.95],
[8.07, 6.95],
[10.0, 8.04],
[13.0, 7.58]
],
symbol: 'circle',
type: 'line'
}
]
};

Related

Chart.js does not scale with two yAxis

I struggle to let my second y-Axis scale to my second data array.
The green data should be scaled according to the right y-Axis (not working).
The red data is correctly scaled to the left y-Axis.
<div id="chartWrapper" class="card-content column is-two-thirds">
<canvas id="myChart" height="250px"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
datasets: [{
label: 'Temperatur in C°',
yAxisID: 'A',
borderColor: "red",
data: 0
},
{
label: 'Niederschlagsmenge in mm',
yAxisID: 'B',
borderColor: "blue",
data: 0
}]
},
options: {
scales: {
A: {
type: 'linear',
beginAtZero: false,
position: 'left',
display: true
},
B: {
type: 'linear',
beginAtZero: false,
position: 'right',
display: true
}
}
}
});
</script>
</div>
Don't be confused with the data being 0, I add the data dynamically.
Thank you very much for any help.
This is because you are using V2 of chart.js in which the scales need to be configured as arrays like so:
new Chart(ctx, {
type: 'line',
data: {},
options: {
scales: {
yAxes: [{
id: 'A'
}, {
id: 'B'
}]
}
}
})

How to draw Balanced yAix in HighCharts?

I`m trying to draw new multi line chart in Highcharts. How do I draw Balanced yAxis?
I try setting tickPositions, tickInterval etc... use tickPositions this:
Highcharts.chart('container', {
xAxis: {
},
yAxis:{
tickPositions: [0, 100, 1000, 10000],
//tickInterval : 1000
},
series: [
{
name: 'Installation',
data: [4100, 4009]
}, {
name: 'Manufacturing',
data: [1100, 1009]
}, {
name: 'Sales & Distribution',
data: [110, 1009]
},{
name: 'E4',
data: [50, 1009]
}]
});
Something like this:
Your example code uses a yAxis with type: 'linear'. Your example result image uses a yAxis with type: 'logarithmic'.
You can change your code to (JSFiddle example):
Highcharts.chart('container', {
xAxis: {
},
yAxis:{
type: 'logarithmic',
tickPositions: [0, 1, 2, 3, 4]
},
series: [
{
name: 'Installation',
data: [4100, 4009]
}, {
name: 'Manufacturing',
data: [1100, 1009]
}, {
name: 'Sales & Distribution',
data: [110, 1009]
},{
name: 'E4',
data: [50, 1009]
}]
});

Why I don't see the second plot?

Hello I writed this code using javascript and Chart.js :
<script>
new Chart(document.getElementById("line-chart"),
{type:'line',
data: {
labels: [18.123,46.8603108462,75.5976216923,104.334932538],
datasets: [{
data: [418872.777267,262233.131655,180687.131758,133676.324505],
label: "Model",
borderColor: "#3e95cd",
fill: false
}]
}
},
{
type: 'scatter',
data: {
datasets: [{
label : 'Data',
fill:false,
showLine: false,
backgroundColor: "#FF0000",
data : [{x: 17.0, y: 454995.091169},
{x: 18.0, y: 457656.874749},
{x: 19.0, y: 444574.49162},
{x: 20.0, y: 432511.514968},
{x: 21.0, y: 421184.776328}],
}]
},
options: {
title:{
display: true,
text:"Test"},
scales: {
xAxes: [{
type: 'logarithmic',
position: 'bottom'
}],
yAxes: [{
type: 'logarithmic'
}]
}
}
}
);
</script>
And the problem is I don't see the scatter plot, I see only the first plot. Actually I would like to plot these two plot on the same graph in logarithmic scale.
Thank you very much !
You need to add one dataset with type "scatter" in the line datasets. You can checkout their mixed chart documentation here http://www.chartjs.org/docs/latest/charts/mixed.html.
You can checkout my running example here https://jsfiddle.net/sherlcode13/m3mfz6jh/5/
var ctx = new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: [18.123,46.8603108462,75.5976216923,104.334932538],
datasets: [{
data: [418872.777267,262233.131655,180687.131758,133676.324505],
label: "Model",
borderColor: "#3e95cd",
fill: false
}, {
label : 'Data',
fill:false,
showLine: false,
data : [{x: 17.0, y: 454995.091169},
{x: 18.0, y: 457656.874749},
{x: 19.0, y: 444574.49162},
{x: 20.0, y: 432511.514968},
{x: 21.0, y: 421184.776328}],
type: 'scatter'
}
]
},
options: {
title:{
display: true,
text:"Test"
},
scales: {
xAxes: [{
type: 'logarithmic',
position: 'bottom'
}],
yAxes: [{
type: 'logarithmic'
}]
}
}
})
You can use the mixed chart, it is possible to create mixed charts that are a combination of two or more different chart types
http://www.chartjs.org/docs/latest/charts/mixed.html

How to add markers to a grouped bar plot in Highcharts?

I'm using Highcharts to create a grouped bar chart and looking to add markers for each bar.
I've created a multi-series (bar + scatter) plot that is similar to what I want, but since there is no "grouped scatter" plot, the circle marks are centered (Screenshot attached below).
Is there a way to change it so the marks appear on the same row as the bar?
JSFiddle
Highcharts Config
{
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: {
categories: ['One', 'Two', 'Three']
},
tooltip: {
enabled: true
},
series: [
{
name: '2015',
data: [7, 8, 9]
},
{
name: '2015 Goal',
marker: {
symbol: 'circle'
},
data: [5, 6, 6],
type:'scatter'
},
{
name: '2016',
data: [9, 9, 10]
},
{
name: '2016 Goal',
marker: {
symbol: 'circle'
},
data: [10,12,13],
type:'scatter'
}
]
}
Set x value for the point. By default x values for the scatter are integers - 0, 1, 2 so they are centered according to the category. You can move them a little by 0.15 and then in the pointFormatter round those values.
series: [{
name: '2015',
data: [7, 8, 9]
}, {
name: '2015 Goal',
marker: {
symbol: 'circle'
},
data: [
[-0.15, 5],
[1 - 0.15, 6],
[2 - 0.15, 6]
],
type: 'scatter'
}, {
name: '2016',
data: [9, 9, 10]
}, {
name: '2016 Goal',
marker: {
symbol: 'circle'
},
data: [
[0.15, 10],
[1 + 0.15, 12],
[2 + 0.15, 13]
],
type: 'scatter'
}]
In pointFormatter:
plotOptions: {
scatter: {
tooltip: {
pointFormatter: function() {
return `x: <b>${Math.round(this.x)}</b><br/>y: <b>${this.y}</b><br/>`
}
}
}
},
example: http://jsfiddle.net/kh8b4jy3/

Butterfly Chart using Highcharts

I'm trying to create a butterfly chart using Highcharts. I want to plot it as
The Code is as follows
// Data gathered from http://populationpyramid.net/germany/2015/
$(function () {
// Age categories
var categories = ['0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '];
$(document).ready(function () {
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Population pyramid for Germany, 2015'
},
subtitle: {
text: 'Source: Population Pyramids of the World from 1950 to 2100'
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
}
}, /*{ // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1
}
}*/],
yAxis: {
title: {
text: null
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
},
series: [{
name: 'Male',
data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
-3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
-2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
}, {
name: 'Female',
data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
1.8, 1.2, 0.6, 0.1, 0.0]
}]
});
});
});
Here is my fiddle link, how can I get my xAxis labels in between the series. Please guide me to achieve this.
I would approach this differently than morgan did, though that example is certainly useful.
I would do this as a standard bar chart, making use of multiple yAxis objects (one for each series), which also allows for using the reversed property of the left-facing series.
Code Example:
yAxis: [{
title: { text: null },
width: 200,
reversed: true
},{
offset: 0,
title: { text: null },
left: 300,
width: 200
}],
series: [{
yAxis: 0,
data: [...]
}, {
yAxis: 1,
data: [...]
}]
Fiddle:
http://jsfiddle.net/jlbriggs/L80cdxm0/
Example Output:
An inverted columnrange chart combines with the cross-specific-values plugin is a way to go. A column range chart allows you to specify position of the columns and make the space for labels. The plugin moves the axis to the center of the chart.
Highcharts.chart('container', {
title: {
text: 'Butterfly Chart Example'
},
subtitle: {
text: 'stackoverflow.com'
},
chart: {
type: 'columnrange',
inverted: true,
marginTop: 100
},
legend: {
verticalAlign: 'top',
y: 60,
x: -25,
itemDistance: 50
},
xAxis: {
categories: ['G7', 'A8', 'V9', 'V4', 'V3', 'V1', 'V5'],
crossing: 118,
lineWidth: 0,
tickLength: 0,
},
yAxis: {
gridLineWidth: 0,
tickInterval: 50,
min: 0,
max: 250,
lineWidth: 1,
title: {
text: null
}
},
plotOptions: {
series: {
grouping: false
}
},
series: [{
name: 'South',
color: 'blue',
data: [
[55, 100],
[60, 100],
[65, 100],
[55, 100],
[75, 100],
[52, 100],
[60, 100]
]
}, {
name: 'North',
color: 'orange',
data: [
[120, 170],
[120, 150],
[120, 175],
[120, 130],
[120, 125],
[120, 148],
[120, 145]
]
}]
});
example: http://jsfiddle.net/7d4mrhuv/

Categories