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]);
Related
I have the following error: TypeError: Cannot read property 'skip' of undefined.
I have a method which builds a chart in my app. That happens OnInit
var ctx = document.getElementById("myChart");
var chartInstance = new Chart(ctx);
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels :this.equity,
datasets: [{
data: this.equity
}]
}
});
}
this.equity is an array of values that I calculate on the client side using data from the server. That is the list that I filter later on.
Everything builds smoothly untill I start filtering. The chart is built upon values in a list. I have coded a filter that filters the list with various options. At the end of each filtering I call the method above again to rebuild the chart.
Now here is where strange things start to happen. The chart rebuilds smoothly. I filter many times with different options and then at some point boom I get this error! It doesn't occur at some particular moment when I'm pressing on the filter, it just occurs.
I think it is because every time I create a new chart object and supply it with new values. The variable for the values is the same as for the old object and that causes an error because at some point Angular checks out the old object and it has already got a new list of values which doesn't match the old list.
Has this hapened to anyone? Does anybody now how do I null out the old chart object at the point when I create a new chart object so this possibly solves? Thanks!
Try destroying the old chart instance before creating a new one, using the destroy() method.
...
if (myChart) myChart.destroy();
myChart = new Chart(ctx, {
type: 'line',
...
...
make sure the myChart variable is globally accessible
However, a better approach would be to update your chart using the update() method, when you add/update any data in your chart, instead of creating a new instance of chart everytime.
I´m not able to get access to the chart-object in highchart with the angularjs directive HIGHCHARTS-NG.
var chart = $scope.chartConfig.getHighcharts();
console.log("chart", chart);
Gives me an error: $scope.chartConfig.getHighcharts is not a function.
When I
console.log("chart", chartConfig);
the object offers me the getHighcharts()-function.
When I say
var chart = $scope.chartConfig
console.log("chart", chart);
it´s not offering the getHighCharts-function anymore!
I really need to get access to that chart-object.
Thanks
I will suggest to use the highcharts libraries how they are.
Because in this case this is not an official pluggin, and the problem is that in a near future it might not be compatible anymore.
Anyway, to get the chart object you can try:
Using the pluggin method .getHighChart. If you have this:
<highchart id="chart1" config="chartConfig"></highchart>
you can use func option;
$scope.chartConfig = {
...,
func: function(chart){
//play with chart
}
}
which is a reference to the callback function when it creates the highchart object:
var x = new Highcharts(options, func);
using jQuery
var chart = $("#chart1").highcharts();
I hope it helps.
Regards,
Luis
I'm using jqBarGraph to draw a graph on a page, but after the page loads, the graph updates with new values. How do I redraw the graph?
I'm updating the array I'm used to initialize the graph and then re-using it to initalize the graph (occurs within an each()).
Initial array:
array_msa_graph_1 = new Array(
[12300, 'MSA', '#88c100'],
[0, 'Gap', '#5e8500'],
[12300, 'ATB', '#74a400']
);
jQuery('#msa_graph_1').jqbargraph({
data: array_msa_graph_1
});
Updating array:
var graph_id = $(this).find('.msa_graph').attr('id');
var array_name = 'array_' + graph_id;
var graph_array = eval(array_name);
var msa_value = getMSA(graph_id);
graph_array[0][0] = msa_value;
$('#' + graph_id).jqbargraph({
data: graph_array
});
However, in the redraw process, it seems the array gets appended to the already existing graph and doesn't update the existing columns and labels.
What am I doing wrong?
Woah, this is quite an old post. I am also implementing bar graph using this plugin. I was having this trouble yesterday. I managed to solve this issue by taking a look at their page source. I found out that the person was able to clear the modification made on the graph. Hence, is this line of code that reset the values. $('#DivforGraph').html(''); //reset graph during dynamic change :)
*I will post the solution here.Maybe it might benefit someone who is facing the same problem as us! Cheers! ^_^
I have this problem using highcharts-ng: when I try to push a new data series over an existing data series already in a chart, the new series will be zoomed with the old zoom. My question is: is there any way to zoom to the default value of the new series after it's loaded?
$scope.datChart.series.pop();
$scope.datChart.series.push({data:dataArray, name:'Total'});
//$scope.datChart zoom out to default value of the new series
PS: the function zoomOut() doesn't work with highcharts-ng.
Thanks anyways
I faced the same problem. I found a way around by setting:
$scope.chart.xAxis.min = xMinValue;
$scope.chart.xAxis.max = xMaxValue;
$scope.chart.xAxis.currentMin = xMinValue;
$scope.chart.xAxis.currentMax = xMaxValue;
so every time you push new data, you do it by updating these $scopes as well
I am looking at a simple Rickshaw chart with data from a JSON file.
d3.json(data, function(error, json) {
var graph = new Rickshaw.Graph( {
element: document.getElementById(chart_id),
renderer: 'line',
series: [
{name: 'myseries',
data: json[0].data}
]
})
graph.render();
});
I would like to access the graph after it has been rendered. Since the graph is created within a callback function I cannot simply return the handle. Also document.getElementById(chart_id) does not have a chart attribute.
My goal is to, for example, allow users to specify a certain range for multiple charts at the same time (e.g. last 5 years) without having to adjust the RangeSlider for each one of them. With access to the chart I could then do
new_rng = [new_min,new_max]
graph.window.xMin = new_rng[0]
graph.window.xMax = new_rng[1]
$('#' + slider_id).slider('option', 'values',new_rng)
Any ideas?
I think this is a similar problem to the one I encountered with a xively feed where the data is not returned when the graph is rendered. Here's my post.
Multiple calls to xively.feed.history()