type: 'realtime',
realtime: {
duration: 20000,
refresh: 2000,
delay: 2000,
pause: false,
ttl: undefined,
onRefresh: onRefresh
function onRefresh(chart: any) {
chart.data.datasets.forEach(function (dataset: any) {
dataset.data.push({
x: Date.now(),
y: +this.selectedSensor.sensor_val
// y: undefined
});
});
chart.update();
}
I changed the string data to number and put it in.
y: +this.selectedSensor.sensor_val
And I've also used a shape-shifting method, but no data appears on the graph.
Maybe you are using 'use strict'? In strict mode, the value of this remains as undefined, as explained in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#function_context. If selectedSensor is defined as a global variable, use the global object (window in a browser) instead of this.
Related
Here is a codepen that I am using to solve this problem. What I would like to do is get the length of the horizontal bars to determine if the label should be plotted inside or outside of the bar. Currently, what I have happening:
{
datalabels: {
color: function(context) {
return [0, 3].includes(context.dataIndex) ? 'black' : 'white'
},
anchor: 'start',
align: 'right',
offset: function(context) {
const chart = context.chart;
const area = chart.chartArea;
const meta = chart.getDatasetMeta(context.datasetIndex);
const model = meta.data[context.dataIndex];
// model.width is NaN
// is there a way to get this value
// after the animation is complete?
console.log(model, model.width)
return 4;
},
font: {
size: 9
}
}
When you run the codepen you notice that model.width prints as NaN but when you look at the object itself model.width is there. If I introduce a setTimeout to log that value it exists (not NaN). When I turn the animation off model.width is available in the function.
Therefore, I think the way to make this happen is to get the values after the animation renders. Is there a way to do that in the offset function for datalabels or is there another way of doing that?
You can use the getProps on the model to get the width after the animations are over like so:
offset: function(context) {
const chart = context.chart;
const area = chart.chartArea;
const meta = chart.getDatasetMeta(context.datasetIndex);
const model = meta.data[context.dataIndex];
const {
width
} = model.getProps(['width'], true);
console.log(width)
return 4;
},
Updated codepen: https://codepen.io/leelenaleee/pen/MWQGbdM?editors=1010
I might have been thinking about it the wrong way. By playing around with the values I realized the value itself is a pretty good indication of whether it should be inside or outside of the bar. What I've done instead is evaluate if the value is greater than 30. If so the color is white and the anchor is set to start. If it less than 30 the color is black and the anchor is set to end:
https://codepen.io/thoughtassassin/pen/rNJvOrj
plugins: {
datalabels: {
color: (context) => getValue(context) > 30 ? '#fff' : '#000',
anchor: (context) => getValue(context) > 30 ? 'start' : 'end',
align: 'right',
offset: 5,
font: {
size: 9
}
},
}
I'm building a scatter chart using Chart.JS(latest version), one of the behaviours I'm trying to implement is clicking on a single point and highlighting it by changing the background color of the selected point.
I've used the getElementsAtEvent method from the Chart.JS API in order to get the active element and change it's background. For a brief moment I can see it changing the color but it returns to its original color and all the other points now have the color I wanted to apply to the selected one... I tried various approaches to this, using the updated and render methods but with no desired result...
Here's the code inside the function that'll run onClick
function (evt, activeElements, chart) {
const selectedPoint = chart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
selectedPoint[0].element.options.backgroundColor = '#fa6400';
chart.update();
}
Here's a fiddle
https://jsfiddle.net/dc3x70yg/1/
Thanks in advance
You can define the option pointBackgroundColor on the dataset. When the user clicks on a point, you recreate pointBackgroundColor, but now use an array that contains the desired color for each point.
Please take a look at your amended code below and see how it works.
new Chart('myChart', {
type: 'scatter',
data: {
datasets: [{
label: '# of Votes',
data: [{ x: -10, y: 0 }, { x: 0, y: 10 }, { x: 10, y: 5 }, { x: 0.5, y: 5.5 }],
pointBackgroundColor: '#ddd',
pointRadius: 5,
}]
},
options: {
onClick: (event, elements, chart) => {
const dataset = chart.data.datasets[0];
dataset.pointBackgroundColor = dataset.data.map((v, i) => i == elements[0]?.index ? '#fa6400': '#ddd');
chart.update();
},
scales: {
y: {
beginAtZero: true
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
I'm using chart.js 3.6.1 with VueJS. These are options for particular data I'm having trouble:
hover: {
mode: 'x',
intersect: false
},
scales: {
y: {
// not relevant
},
x: {
type: 'time',
min: minRangeDate.value,
max: maxRangeDate.value,
time: {
displayFormats: {
day: 'dd.MM.',
hour: 'HH:mm',
minute: 'HH:mm',
second: 'HH:mm:ss'
}
},
grid: {
display: true
},
ticks: {
color: 'white'
}
}
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'x',
modifierKey: 'ctrl'
},
zoom: {
mode: 'x',
wheel: {
enabled: true,
speed: 0.2
},
pinch: {
enabled: true
}
},
limits: {
x: {
min: minRangeDate.value,
max: maxRangeDate.value,
minRange: 20000 // minimum zoom to seconds
}
}
}
}
}
When the graph is zoomed everything looks fine like in the picture below:
but when the graph is zoomed out hover is picking multiple points which is not desired behavior, pic below:
And as far as zoom is, the more points hover is picking.
Any idea how to overcome this. I've tried using 'point' and 'nearest' but then I get only one data in the tooltip as it is the default behavior.
Also, using 'index' is not possible because two datasets are not always the same length and it is not logical and desired to compare values by index.
Ok, here is the solution I came up with, followed by this ChartJS issue on GitHub. I've made a filter for tooltip and it looks like this now:
plugins: {
tooltip: {
mode: 'x',
displayColors: false,
intersect: false,
filter: function (tooltipItem, currentIndex, tooltipItems) {
// On zoomed out graph, hovering mouse picks a lot of data for x-axis and displays them all in tooltip.
// This filter returns only first item from each dataSet from hover picked items passed
// to tooltip, so it can be correctly displayed in tooltip for different line charts(datasets)
return tooltipItems[currentIndex].datasetIndex !== tooltipItems[currentIndex - 1]?.datasetIndex
},
.
.
.
}
Hover still selects multiple data, but the tooltip shows only one for each dataset.
I would like to add arrows to the chart, I am guessing if i can find the position of the highest marker, I can use it to add some html to get some custom tool-tips or markers.
I tried looking for a format function in markers, and in the axis, I just am not sure what I am looking for here.
Any help is much appreciated. I haven't been able to wrap my head around this one.
The feature is a WIP and I am in the process of creating examples to illustrate the functionality.
The proposed API for the feature will look like below
var options = {
chart: {
height: 350,
type: "area",
events: {
mounted: function(ctx, config) {
const lowest = ctx.getLowestValueInSeries(0)
const highest = ctx.getHighestValueInSeries(0)
ctx.addPointAnnotation({
x: new Date(ctx.w.globals.seriesX[0][ctx.w.globals.series[0].indexOf(lowest)]).getTime(),
y: lowest,
label: {
text: 'Lowest: ' + lowest,
offsetY: 2
},
customSVG: {
SVG: `<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
<path d="M0 0h24v24H0z" fill="none"/>`,
cssClass: undefined,
offsetX: -10,
offsetY: -30
}
})
ctx.addPointAnnotation({
x: new Date(ctx.w.globals.seriesX[0][ctx.w.globals.series[0].indexOf(highest)]).getTime(),
y: highest,
label: {
text: 'Highest: ' + highest,
offsetY: 2
},
})
}
}
},
dataLabels: {
enabled: false
}
}
which will produce the following result
The functionality is not available in the current release (3.5.1) of ApexCharts, but it will soon be added in 3.6.0 which is going to be released this weekend (March 10, 2019).
Disclaimer: I am the creator of ApexCharts
Okay, so I've been at this all day and can't figure out why the grid is loading all records instead of the pageSize: 25 limit I configured on the store. The paging toolbar is rendering the correct pages, but the grid is what is autoloading all records. I'm thinking it is because of the way my controller is loading the view. I have my .cfc server side processing setup correctly using the paging_on, start, limit, sort and dir in my arguments. If anyone can help me out, it would be greatly appreciated.
Here is my controller:
onAccountActivityListAfterrender: function(pnl, eOpts) {
var store = this.getStore("AccountSessions");
store.load({
params : {
start : 0,
limit : 25
},
callback: function (recs, op, success) {
if (!success) {
Ext.Msg.alert("Error!", op.error[0].ERROR);
}
var grid = Ext.getCmp('pnl-accountactivity-list');
grid.getStore().add(store.getRange());
this.showApp(pnl);
},
scope: this
});
},
and here is my store:
Ext.define("EXAMPLE.store.AccountSessions", {
alias: "store.AccountSessions",
extend: "Ext.data.Store",
model: "EXAMPLE.model.AccountSession",
pageSize: 25,
proxy: {
api: {
create : undefined,
read : "ajax/account.cfc?method=account_sessions",
update : undefined,
destroy : undefined
},
extraParams: {
account_id: account
},
reader: {
messageProperty: "ERRORS",
root: "DATA",
successProperty: "SUCCESS",
totalProperty: "TOTAL",
type: "json"
},
type: "ajax"
}
});
You'd better to show the server-side codes.
Make sure the values that returned correctly~