We Keep Coding

how to make real time gauge chart using anychart?

I use node.js and javascript for creating a program.
I want to create a real time gauge using anychart, but the anychart gauge chart doesn't change although the data is coming from socket.io.
I want to access the anychart gauge chart object and change the data that was received from the socket.
How can I solve this problem?
anychartObj = new RealTimeAnyChart(elementId);
chartArrayList.push(anychartObj);
function RealTimeAnyChart(elemntId){
this.dataSet = anychart.data.set([15]);
this.gauge = anychart.gauges.circular();
this.gauge.data(this.dataSet);
this.gauge.container(elementId);
this.gauge.draw();
}
socket.on(' ',function(){
chartArrayList.gauge = value ?? this part is problem..
}

You can create new dataSet and apply it to you circular gauge like this:
socket.on(' ',function(){
var newData = anychart.data.set([20]);
chartArrayList.gauge.data(newData);
}
If you have an access to the existing dataSet object you can apply new data right to the old dataSet and do not create a new one. You can achieve that like this:
dataSet.data([20]);

Highchart 3D Pie Chart Label color?

I'm trying to use a dark background for my HighChart 3D Pie Chart. By default, the text is black with white glow.
My goal is to have something similar to:
https://www.highcharts.com/demo/pie-gradient/dark-unica
I'm using the WordPress plugin wpdatatables to create the actual pie and was given the following support:
"You can check in our documentation about wpDataCharts callbacks. Every chart exposes a number of options that customize its look and feel. Charts usually support custom options appropriate to that visualization. This callbacks allows adding options that are available in Google Charts API, Highcharts API and Chart.js API"
https://wpdatatables.com/documentation/information-for-developers/wpdatacharts-callbacks/
I tried the following code based on support and HighChart website
jQuery(window).load(function() {
if (typeof wpDataChartsCallbacks == 'undefined') {
wpDataChartsCallbacks = {};
}
wpDataChartsCallbacks[14] = function(obj) {
obj.options.plotOptions.series.dataLabels.color = '#FF0000';
obj.options.chart.backgroundColor = '#GG0000';
obj.options.chart.zoomType = 'x';
obj.options.chart.panning = true;
obj.options.chart.panKey = 'shift';
obj.options.tooltip = {
formatter: function() {
var s = '<b>$' + this.y + '</b>';
return s;
}
}
}
});
I added that line:
obj.options.plotOptions.series.dataLabels.color = '#FF0000';
but doesn't seems to be working.
Any help would be appreciated. Thanks.

I've never used Wordpress callbacks as you are doing, but whenever I need to update a chart's options, I've found that you need to refer to the series as an array, even if you have only one in your chart.
Try this and see whether it works:
obj.options.plotOptions.series[0].dataLabels.color = '#FF0000';
Update: Please see the comment from #ppotaczek below for the correct syntax.

Highcharts: Cannot read property 'chart' of undefined

So I have this chart built out and it works except it keeps throwing the error Cannot read property 'chart' of undefined. I am reloading the chart on window resize so that the html labels reload in correct positions.
It's a double donut chart and shows/hides content based on the selected slice.
Any help would be greatly appreciated.

First of all, you define var chart variable in createChart function, so it always will be undefined - use only one definition (the one on top), later just assign chart to that variable. Anyway, I see two solutions:
use setTimeout() in resize event, to render chart with a delay. Not a reliable solution, because user can play around with width of the browser and something may be broken again
wrap initReflow method to check if chart exists, like this:
(function(H, HA) {
H.wrap(H.Chart.prototype.initReflow = function () {
var chart = this,
reflow = function (e) {
if(chart && chart.options) {
chart.reflow(e);
}
};
HA.addEvent(window, 'resize', reflow);
HA.addEvent(chart, 'destroy', function () {
HA.removeEvent(window, 'resize', reflow);
});
});
})(Highcharts, HighchartsAdapter)
Working demo: https://jsfiddle.net/dpsn9gx8/7/
Edit:
Since Highcharts 4.1.10 Highcharts adapter is built-in, so remove it and use Highcharts: https://jsfiddle.net/dpsn9gx8/11/

How to get object reference from selector for C3 JS charts

I'm using c3.js for graphing and everything is working as expected.
However, I'd like to access the API from other scripts, that is call resize etc...
if I use:
var chart = c3.generate({ ... });
I can then access the chart object and it's API like:
chart.resize();
However, if I do not have access to the chart object as it's another script I can get the HTML DOM element (using jQuery):
$(".c3").each(function(i, chart) {
// Here I want to do something like chart.resize();
// But chart is just the DOM reference, not the chart variable
// I need something like c3.get(chart)????
});
But chart in the loop is a DOM object, not the var chart made from c3.generate.
Any ideas how I can get this object? The documentation isn't quite finished ;)

As you're already using jQuery, here's a solution using jQuery data:
Save a reference to the chart, keyed on its DOM element:
var selector = '#some-selector';
var chart = c3.generate({
bindTo: selector,
// ...
});
$(selector).data('c3-chart', chart);
To access the chart for each .c3 element:
$('.c3').each(function() {
var chart = $(this).data('c3-chart');
});

Why isn't my highcharts chart getting reset/destroyed properly?

In my code I'm initializing the chart like this...
<script type="text/javascript">
var chart = null,
defaultOptions = {
chart: etc etc
};
function drawDefaultChart() {
chart = new Highcharts.Chart(defaultOptions);
}
$(function() {
$(document).ready(function() {
drawDefaultChart();
});
});
</script>
then in the body I have
Reset
but when you click the link, all it does is redraw the graph with the settings from the previous state... I'm not quite sure what is going on. If I add chart.destroy(); the chart doesn't work at all...
function drawDefaultChart() {
chart.destroy(); //this makes the chart not work at all
chart = new Highcharts.Chart(defaultOptions);
}
You can clearly see that I 'm pasing default options to the chart that is suppose to get redrawn.... I don't understand why it uses the old filter settings, i'm about to jump off a bridge, can somebody PLEASE HELP?
my live example is here http://goo.gl/sGu0M
//////// UPDATE
I was able to do it with a lot of blood, sweat, and tears. I ended up putting the data into a php variable on another page (to save real estate), and then calling it using php variables, and then I just call it everytime someone clicks a link. I figured out that in order to redraw the graph, you have to reload ALL the data in each time. The PHP makes this easier in terms of amount of data on the screen.
this was the link that eventually helped me figure it out. http://jsfiddle.net/dane/YUa3R/34/

Always it's recommend to refer API documentation.
use following snippet to destroy the chart $('#container').highcharts().destroy();
Click here for a working solution.

First off, I know NOTHING about highcharts, but it would seem you need: (from your actual page)
function drawDefaultChart() {
$("#container").empty();
chart = new Highcharts.Chart(defaultOptions);
}
to be
function drawDefaultChart() {
$("#container").empty().highcharts(defaultOptions);
}
OR perhaps:
function drawDefaultChart() {
$("#container").highcharts(defaultOptions);
}