I've googled a lot, but couldn't find any information. Is it possible to draw a polygon on the scatter plot in the ECharts to achieve the same view as on the picture below?
ECharts has an API to draw polygons:
function renderItem(params, api) {
if (params.context.rendered) {
return;
}
params.context.rendered = true;
let points = [];
for (let i = 0; i < data.length; i++) {
points.push(api.coord(data[i]));
}
let color = api.visual('color');
return {
type: 'polygon',
shape: {
points: echarts.graphic.clipPointsByRect(points, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
})
},
style: api.style({
fill: color,
stroke: echarts.color.lift(color)
})
};
}
var data = [
[
echarts.number.round(3.8),
echarts.number.round(4)
],
[
echarts.number.round(3.8),
echarts.number.round(4.5)
],
[
echarts.number.round(5),
echarts.number.round(6)
]
];
option = {
xAxis: {},
yAxis: {},
series: [
...other charts here ...
{
type: 'custom',
renderItem: renderItem,
data: data
}
]
};
The result will look like:
Related
I created a chart with two y-axis and one x-axis and struggle to create tooltips with intersect = false, so it will start the tooltip when hovering over the line and not only the point of the chart
However, the whole settings for the tooltip, described on
https://www.chartjs.org/docs/latest/configuration/tooltip.html
Does not seem to have any effect for me. My code see below
I am using this code inside a NodeRed template node
\<canvas id="myChart" width=912 height =370\>\</canvas\>
\<script\>
var textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');
var gridcolor = '#E6E6E6';
var linecolors = \['#333F50','#B55A11', '#90C050'\]
var backgroundColor = \['#999FA7','#DAAC88', '#C7DFA7'\]
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: {{{payload.labels}}},
datasets: [
{
label: 'Folie Länge Ist',
backgroundColor: backgroundColor[0],
borderColor: linecolors[0],
data: {{{payload.eins}}},
yAxisID: 'left-y-axis',
},
{
label: 'Folie Länge Soll',
backgroundColor: backgroundColor[1],
borderColor: linecolors[1],
data: {{{payload.zwei}}},
yAxisID: 'left-y-axis',
},
{
label: 'Aufwickler Durchmesser',
backgroundColor: backgroundColor[2],
borderColor: linecolors[2],
data: {{{payload.drei}}},
yAxisID: 'right-y-axis',
}
]
},
// Configuration options
options: {
animation: false,
legend: {
display: true,
position: "top"
},
elements: {
point: {
pointStyle: 'circle',
radius: 0
},
line: {
tension: 0,
fill: false
}
},
plugins: {
tooltip: {
mode: 'index',
intersect: false
}
},
scales: {
yAxes: [
{
gridLines :{display:false},
id: 'left-y-axis',
type: 'linear',
position: 'left',
ticks: {
fontColor: linecolors[0],
callback: function(value, index, ticks) {
return new Intl.NumberFormat('de-DE').format(value);
}
}
},
{
gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:1},
id: 'right-y-axis',
type: 'linear',
position: 'right',
ticks: {
fontColor:linecolors[2],
callback: function(value, index, ticks) {
return new Intl.NumberFormat('de-DE').format(value);
}
}
}
],
xAxes: [
{
ticks: {
autoSkip: true,
autoSkipPadding: 10,
maxRotation: 0,
minRotation: 0
}
}
]
}
}
});
\</script\>
Tried setting intersect = false, also enable = false just to test if these settings have an effect
I am creating a horizontal bar chart using Google charts and I want to position the horizontal axis tick labels between ticks (offset tick label to the right by half a tick). There is also no guarantee that each label will be the same number of characters. Is there any functionality to achieve this?
This is my function for creating the chart
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Performance", "Level", { role: "style" }],
["PL", 1.01, "#5aa66d"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: function (dt, rowIndex) { return 'PL=' + (dt.getValue(rowIndex, 1)).toString()} ,
sourceColumn: 1,
type: "string",
role: "annotation"
},
2]);
var options = {
width: 600,
height: 100,
bar: { groupWidth: "80%" },
legend: { position: "none" },
hAxis: {
minValue: 0,
maxValue: 3,
ticks: [
{ v: 0, f: 'Col1' },
{ v: 1, f: 'Col2' },
{ v: 2, f: 'Col3' },
{ v: 3, f: 'Col4' }
]
}
};
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
}
This is the chart currently
https://imgur.com/LvQEbtY
and this is what I want to achieve:
https://imgur.com/hwvIOG2
EDIT:
For ideas, right before chart.draw I add an event listener and find all the text tags and modify the 'x' attribute to re-position the tick labels. This works, but it also affects the on-bar data label which is a problem.
google.visualization.events.addListener(chart, 'ready', function () {
var elements = document.getElementById("barchart_values").getElementsByTagName("text");
for (var i = 0; i < elements.length; i++) {
elements[i].setAttribute('x', (Number(elements[i].getAttribute('x')) + (chart.getChartLayoutInterface().getBoundingBox('chartarea').width / 4 / 2))); //chart width / tick count / 2
}
});
first, we won't be able to offset the grid lines and use the ticks option.
let's offset the grid lines by making the major transparent and the minor visible.
we can also offset the baseline by setting to a negative value.
baseline: -0.5,
minorGridlines: {
color: '#cccccc',
count: 1
},
gridlines: {
color: 'transparent',
count: 4
},
then, in order to have custom tick labels, we can use your original idea to change them manually.
just need a unique attribute to separate them from the bar labels.
here, the text-anchor attribute is used.
if (elements[i].getAttribute('text-anchor') === 'middle') {
elements[i].textContent = 'Col' + parseInt(elements[i].textContent) + 1;
}
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
["Performance", "Level", { role: "style" }],
["PL", 1.01, "#5aa66d"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, rowIndex) { return 'PL=' + (dt.getValue(rowIndex, 1)).toString()} ,
sourceColumn: 1,
type: "string",
role: "annotation"
}, 2]);
var options = {
width: 600,
height: 100,
bar: { groupWidth: "80%" },
legend: { position: "none" },
hAxis: {
baseline: -0.5,
minorGridlines: {
color: '#cccccc',
count: 1
},
gridlines: {
color: 'transparent',
count: 4
},
minValue: 0,
maxValue: 3,
}
};
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
google.visualization.events.addListener(chart, 'ready', function () {
var elements = document.getElementById("barchart_values").getElementsByTagName("text");
for (var i = 0; i < elements.length; i++) {
if (elements[i].getAttribute('text-anchor') === 'middle') {
elements[i].textContent = 'Col' + (parseInt(elements[i].textContent) + 1);
}
}
});
chart.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barchart_values"></div>
the above will ensure all the labels remain visible, just simply moving them, could cause them to be pushed off the visible portion of the chart.
I have a column chart with positive and negative values. Using the default dataLabels, keeps the label at the end of the column, which isn't ideal for negative values, as it goes below the x axis.
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
height: 200,
borderColor: '#ddd'
},
title: {
text: ''
},
legend: {
padding: 0,
margin: 5
},
credits: {
enabled: true
},
tooltip: {
enabled: false
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
crop: false,
overflow: 'none'
}
}
},
colors: ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'],
loading: {
labelStyle: {
top: '35%',
fontSize: "2em"
}
},
xAxis: {
categories: ["7/12", "7/13", "7/14", "7/15", "7/16"]
},
series: [{
"name": "Odometer",
"data": [{
"y": 94.98
}, {
"y": 182.96
}, {
"y": -160.97
}, {
"y": -18.00
}, {
"y": 117.97
}]
}]
});});
Example: http://jsfiddle.net/absessive/NKXRk/54/
Add plotOptions.column.stacking as normal like this and it will work.
You can change a little bit Highcharts.seriesTypes.column.prototype.alignDataLabel function, so it will not have functionality of aligning the dataLabel below your column if its value is smaller than 0.
Here you can find code that may help you:
H.seriesTypes.column.prototype.alignDataLabel = function(point, dataLabel, options, alignTo, isNew) {
var inverted = this.chart.inverted,
pick = H.pick,
Series = H.Series,
series = point.series,
merge = H.merge,
dlBox = point.dlBox || point.shapeArgs, // data label box for alignment
below = false,
inside = pick(options.inside, !!this.options.stacking), // draw it inside the box?
overshoot;
// Align to the column itself, or the top of it
if (dlBox) { // Area range uses this method but not alignTo
alignTo = merge(dlBox);
if (alignTo.y < 0) {
alignTo.height += alignTo.y;
alignTo.y = 0;
}
overshoot = alignTo.y + alignTo.height - series.yAxis.len;
if (overshoot > 0) {
alignTo.height -= overshoot;
}
if (inverted) {
alignTo = {
x: series.yAxis.len - alignTo.y - alignTo.height,
y: series.xAxis.len - alignTo.x - alignTo.width,
width: alignTo.height,
height: alignTo.width
};
}
// Compute the alignment box
if (!inside) {
if (inverted) {
alignTo.x += below ? 0 : alignTo.width;
alignTo.width = 0;
} else {
alignTo.y += below ? alignTo.height : 0;
alignTo.height = 0;
}
}
}
// When alignment is undefined (typically columns and bars), display the individual
// point below or above the point depending on the threshold
options.align = pick(
options.align, !inverted || inside ? 'center' : below ? 'right' : 'left'
);
options.verticalAlign = pick(
options.verticalAlign,
inverted || inside ? 'middle' : below ? 'top' : 'bottom'
);
// Call the parent method
Series.prototype.alignDataLabel.call(this, point, dataLabel, options, alignTo, isNew);
};
The only change I have made is that I have changed below parameter to false.
Here you can find an example how it can work:
http://jsfiddle.net/NKXRk/59/
Best regards,
i am using sencha touch to show a chart and add data to store of chart dynamically.but when i add data to store, my chart does not update result.
this is code of my chart:
Ext.define('MyApp.view.MyLineChart1', {
extend: 'Ext.chart.CartesianChart',
requires: [
'Ext.chart.axis.Category',
'Ext.chart.axis.Numeric',
'Ext.chart.series.Line'
],
config: {
itemId: 'xy',
store: 'MyStore',
colors: [
'#115fa6',
'#94ae0a',
'#a61120',
'#ff8809',
'#ffd13e',
'#a61187',
'#24ad9a',
'#7c7474',
'#a66111'
],
axes: [
{
type: 'category',
fields: [
'x'
],
maximum: 5,
minimum: 0
},
{
type: 'numeric',
fields: [
'y'
],
grid: {
odd: {
fill: '#e8e8e8'
}
},
position: 'left'
}
],
series: [
{
type: 'line',
colors: 'rgba(0,200,0,0.3)',
style: {
smooth: true,
stroke: 'rgb(0,200,0)',
},
xField: 'x',
yField: 'y'
}
],
listeners: [
{
fn: 'onChartShow',
event: 'show',
order: 'after'
}
]
},
onChartShow: function(component, eOpts) {
var TaskRunner = Ext.create("MyApp.controller.TaskRunner");
chart = Ext.ComponentQuery.query("#xy")[0];
store = chart.getStore();
chart.animationSuspended = true;
chart.update();
store.removeAll();
this.timeChartTask = TaskRunner.start({
run: this.update_chart,
interval: 1000,
repeat: 10,
scope: this
});
},
update_chart: function(chart) {
var me = this;
chart = Ext.ComponentQuery.query("#xy")[0];
store = chart.getStore();
count = store.getCount();
xAxis = chart.getAxes()[0];
visibleRange = 10000;
second = 1000;
console.log(xAxis.getMinimum());
if (count > 0) {
lastRecord = store.getAt(count - 1);
xValue = lastRecord.get('x') + second;
if (xValue - me.startTime > visibleRange) {
me.startTime = xValue - visibleRange;
xAxis.setMinimum(this.startTime);
xAxis.setMaximum(xValue);
console.log("count >0");
}
store.add({
x: xValue,
y: me.getNextValue()
});
// store.load();
chart.redraw();
} else {
chart.animationSuspended = true;
me.startTime = Math.floor(Ext.Date.now() / second) * second;
xAxis.setMinimum(me.startTime);
xAxis.setMaximum(me.startTime + visibleRange);
store.add({
x: this.startTime,
y: me.getNextValue()
});
chart.animationSuspended = false;
// store.load();
chart.redraw();
console.log("count < 0");
}
},
getNextValue: function(previousValue) {
var delta = Math.random()*4 - 2;
if (Ext.isNumber(previousValue)) {
return Ext.Number.constrain(previousValue + delta, -2, 2);
}
return Math.random()*4 - 2;
}
});
this is my store:
Ext.define('MyApp.store.MyStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.MyModel1'
],
config: {
model: 'MyApp.model.MyModel1',
storeId: 'MyStore'
}
});
and this is my model:
Ext.define('MyApp.model.MyModel1', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
config: {
fields: [
{
name: 'x'
},
{
name: 'y'
}
]
}
});
If you want set data to store use this code:
var store = Ext.getStore('MyStore');
store.load(function () {
var store = Ext.getStore('MyStore');
store.removeAll();
store.add({
x: xValue,
y: me.getNextValue()
});
store.sync();
});
I have the following code to contruct a pie chart.
The problem is i don't get a shadow.
Note : If the chart config, theme='Base', then the pie has a shadow
Ext.define('ChartPanel', {
extend: 'Ext.panel.Panel',
//------------------CONSTRUCTOR
, constructor: function(externalConfigs) {
externalConfigs = externalConfigs || {};
var configs = {
title: 'My panel',
items: [
{
xtype: 'chart',
store: myStore,
width: '30%',
series: [{
type: 'pie'
, field: 'persentage'
, shadow: 'sides'
, showInLegend: false
, donut: false
, renderer: function(sprite, record, attributes, index, store) {
if (record.data.description == 'option1') {
sprite.setAttributes({
fill: 'url(#redGradient)',
stroke: '#ffffff'
}, false);
} else if (record.data.description == 'option2') {
sprite.setAttributes({
fill: 'url(#greenGradient)',
stroke: '#ffffff'
}, false);
}
}
}]
, gradients: [{
id: 'redGradient',
angle: 45,
stops: {
0: { color: '#820000' },
100: { color: '#BD1E00' }
}
}, {
id: 'greenGradient',
angle: 0,
stops: {
0: { color: '#89AC10' },
100: { color: '#A1C22D' }
}
}]
}
]
}
Ext.apply(configs, externalConfigs);
this.callParent([configs]); //Call the parent constructor
}
});
Any ideas how to get a shadow?
Thanks
Use shadow: true (see the docs in the previous link to see other possible options) within your chart definition. (Not within the pie definition). There is no shadow config property for Ext.chart.series.Pie. You would need to use shadowAttributes within Ext.chart.series.Pie.
I found that
return attributes;
inside the renderer is essential.