Develop Reference

Cannot access variables in angular from d3 Funnel js callback

As per the latest document in D3 JS funnel I have click event callback as referred by the documentation. But when I'm unable to access functions from inside angular component using this.try().
Here is the implementation, don't know how to implement it.
JS Code
const options = {
chart: { bottomPinch: 1, animate: 200, height: 300 },
block: {
// dynamicHeight: true,
// dynamicSlope: true,
highlight: true,
},
events: {
click: {
block(d) {
console.log(d.label.raw);
this.try(d.label.raw);
},
},
},
tooltip: { enabled: true, }
};
const chart = new D3Funnel('#d3Funnel');
chart.draw(data, options);
})
HTML
<div id="d3Funnel"></div>
It gives the error
ERROR TypeError: this.try is not a function
at SVGPathElement.block
I don't know how to resolve this.
Reference of library
https://github.com/jakezatecky/d3-funnel

block(d) { ... } is just a shorthand for block: function(d) { ... }, which would not lexically bind this.
If you replaced your event with an arrow function, such as block: (d) => { ... }, your code would be able to resolve this as you intend.

How can I change the color of the selected point in Highcharts?

I have an HighCharts line plot in which the user can click points using this code:
plotOptions: {
series: {
point: {
events: {
click: function(event) {
// some processing
}
...
I want to change the color of the selected point.
I know that I could write :
marker: {
states: {
select: {
fillColor: 'red',
...
But, in my case, I really need to do this inside click, How can I do it ?

You can always use the update function for that:
plotOptions:{
series:{
marker:{
states:{
select:{
lineColor:'red',
fillColor:'red'
}
}
},
point:
{
events:{
click: function(){
this.setState("select");
this.update({
marker:{
fillColor:'red',
lineColor:'red',
}
})
}
}
}
}
},
When this refers to the point the user clicked.
As you can see, I composed a custom "select" state with some custom properties, and applied this state when user clicks a point. I also used update in order to change the point marker attributes, so I make sure the point reserves the new attributes after the state is no longer active:
http://jsfiddle.net/gprevqdf/2/

Google Chart Api: doesn't load data

I'm using Google Charts API and i'm getting a issue which i cant understand. All code works well if i use the final alert("Im IN!"), but if i remove it my nArray is not filled. and i dont understand why.
This are global vars:
var Chart;
var data;
var nArray;
This is where i fill my nArray so i can load into my chart.
function setArray(PlayerName,LeadPoints,OppPoints,PropPoints){
var newPlayer = [PlayerName,LeadPoints,PropPoints,OppPoints,'Total'];
nArray.push(newPlayer);
}
This is where i go to CRM to bring data to and fill my array calling the setArray function.
function setPointsByEntity() {
SDK.REST.retrieveMultipleRecords(
"gamify_ponto",
"$select=gamify_Entidade,gamify_PlayerId,gamify_Pontos,gamify_gamify_utilizador_gamify_ponto/gamify_name&$orderby=gamify_PlayerId asc&$expand=gamify_gamify_utilizador_gamify_ponto",
function (results) {
if(results.length>0){
for(var i=0;i<results.length;i++){
(...) // do something
setArray(lastPlayer.Name,leadPoints,oppPoints,propPoints);
}
}
else {
alert("No Contact records are available to set as the primary contact for the account.");
}
},
errorHandler,
function () {
//OnComplete handler
}
);
This is where i load Visualization API, run google visualization, and define my drawVisualization function.
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Create and populate the data table.
data = google.visualization.arrayToDataTable(nArray);
setLabelTotal(data);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, 3, {
type: 'number',
calc: function (dt, row) {
// set offset to determine how far you want to move the labels
var offset = MaxArray(nArray) *0.03; // 3% do valor total.
return dt.getValue(row, 1) + dt.getValue(row, 2) + dt.getValue(row, 3) + offset;
}
},
4]);
var options = {title:"Pontos por Jogador",
width:500, height:300,
hAxis: {
textStyle: {'color': 'white'}},
isStacked: true,
legend: {
position: 'top'
},
series: {
3: {
type: 'line',
color: 'grey',
lineWidth: 0,
pointSize: 0,
visibleInLegend: false
}
},
vAxis: {
viewWindowMode:'explicit',
viewWindow: {
max:MaxArray(nArray) + MaxArray(nArray)*0.3,
min:0
}
},
animation:{
duration: 1000,
easing: 'linear'}
};
// Create and draw the visualization.
chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
chart.draw(view, options);
}
Finally when dom is ready i assign my nArray by invoking setPointsByEntity(). The problem here is if i comment the "alert("Im IN!");" Chart wont appear. It seems that the nArray is not define.
// whenever the dom is ready
$(document).ready(function()
{
setPointsByEntity(); // This function fill my nArray
alert("Im IN!");
});
This question it may have to do with another one that i've posted before, please follow this Question

Move the setPointsByEntity from the document ready handler to a callback from the google loader, and then call the drawVisualization function at the end of the success handler of the AJAX call:
google.setOnLoadCallback(setPointsByEntity);
function setPointsByEntity() {
SDK.REST.retrieveMultipleRecords(
"gamify_ponto",
"$select=gamify_Entidade,gamify_PlayerId,gamify_Pontos,gamify_gamify_utilizador_gamify_ponto/gamify_name&$orderby=gamify_PlayerId asc&$expand=gamify_gamify_utilizador_gamify_ponto",
function (results) {
if(results.length>0){
for(var i=0;i<results.length;i++){
(...) // do something
setArray(lastPlayer.Name,leadPoints,oppPoints,propPoints);
}
}
else {
alert("No Contact records are available to set as the primary contact for the account.");
}
drawVisualization();
},
errorHandler,
function () {
//OnComplete handler
}
);
}

how do you call function to pull data automaticall to chart in highcharts

I need to set up a interval on my data rerriveal and update my chart automatically. I tried the following but did not work. I am not getting any chart back. what am I doing wroing in the event: load function? Is this how it is done, any ideas greatly appreciated.
function server_cpu() {
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series;
setInterval(function() {
$.getJSON('db.php', function(data) {
series=data;
});
}, 1000);
}
},
zoomType: 'x'
},
exporting: {
enabled: true
});
}

events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
$.getJSON('db.php', function(data) {
series.setData(data);
});
}, 1000);
}
},
1st, series is an array, so you'll want series[0]. 2nd, you need to use setData to change the series data after the chart is drawn (http://api.highcharts.com/highcharts#Series.setData())
It's not clear from your code if you're already doing it, but you will need to set the original series : [{data:[...]}]

Adding data to highcharts(Highstock) when user scrolling reaches left end

I'm using highstock on my website. The scroll bar in the navigator of stock chart is drawn using SVG. I want to add more data(via ajax) to the graph when user scrolls to the leftmost end.
I am new to SVG and not sure how to detect that user has scrolled to the end and fire a ajax query based on that. Can anyone help me with this.
Thanks,
Sivakumar.

So, today I had the same problem, and I just found your question.
I don't know if you have any reason for loading the new data only when the user moves the scrollbar, I would recommend to fire the ajax query if the user visualizes the left-most data, instead (that is: scrolling the bar, pressing the left arrow, dragging the area of the navigation chart, and so on).
If this solution applies to you, you can try with something like this:
chart = new Highcharts.StockChart({
chart: {
renderTo: 'chart',
events: {
redraw: function(event) {
if (chart.xAxis) {
var extremes = chart.xAxis[0].getExtremes();
if (extremes && extremes.min == extremes.dataMin) {
console.log("time to load more data!");
}
}
}
}
}, [...]

I solved this problem in the following way.
<script>
import axios from 'axios';
export default {
name: 'Chart',
data() {
return {
chartOptions: {
chart: {
events: {
// we will lose the context of the component if we define a function here
}
},
series: [{
type: 'candlestick',
data: null,
}],
},
};
},
methods: {
onRedraw: function () {
let chart = this.$refs.chart.chart
if (chart.xAxis) {
let extremes = chart.xAxis[0].getExtremes()
console.log(extremes)
if (extremes && extremes.min <= extremes.dataMin) {
console.log("time to load more data!");
}
}
}
},
created() {
axios.get('https://demo-live-data.highcharts.com/aapl-ohlcv.json').then((response) => {
this.chartOptions.series[0].data = response.data
this.chartOptions.series[0].name = 'AAPL'
});
this.chartOptions.chart.events.redraw = this.onRedraw
},
};
</script>
<template>
<highcharts :constructor-type="'stockChart'" :options="chartOptions" ref="chart"></highcharts>
</template>