I have created a BarChart with angular-chart like this:
<canvas id="bar"
chart-data="ctrl.barChartData"
chart-options="ctrl.barChartOptions"
chart-labels="ctrl.barChartLabels"
chart-series="ctrl.barChartSeries"
chart-click="ctrl.chartClick"
class="chart chart-bar">
</canvas>
I have wrote a chartClick function based on some example and looks like this:
vm.chartClick = function(evt){
var myBarChart = //how I can obtain a access to my created bar chart?
var activePoints = myBarChart.getPointsAtEvent(evt);
console.log("active: "+activePoints);
}
My question is: how can I obtain an access to chart I have created and assign it to myBarChart?
I have found solution for Highcharts however I can't find it for Chart.js
UPDATE:
Based on link provided by #IBarros I have manage to wrote following few lines of code:
$scope.$on('chart-create', function (event, chart) {
//console.log(chart);
myBarChart = chart;
});
I have 2 charts - one pie chart, one bar chart. What is more the event can be emitted multiple times for each chart so as a result I have a 7 charts printed into console. My next question is: how to find out what chart is a bar chart I'm looking for?
The reason why the event is fired 7 times was explained in this issue: How to get chart instance? #464
If options or other optional attributes are set after the data is set
the chart will be destroyed and recreated. This logic is what allows
the chart to be automatically updated everytime something changes in
the chart settings.
When that happens you should just update the reference on your side.
To figure out which chart object is the one you want, just look for the chart directive id (or chart type) in the chart object.
Example:
Use an object as an associative array
$scope.myCharts = {};
Save object reference in the associative array
$scope.$on('chart-create', function (event, chart) {
console.log(chart.chart.canvas.id);
console.log(chart.chart.config.type);
//If id is the same, reference will be updated
$scope.myCharts[chart.chart.canvas.id] = chart;
});
Access chart object by its directive id
console.log($scope.myCharts[id]);
Related
Hi I am ordering the x values in my bar chart with .ordering. It orders correctly. However on filtering on other linked charts the ordering doesn't change. How do I achieve this behaviour?
Also ordering for me only works when I am overriding the default groupX.all() function with
groupX.all = function() {
return groupX.top(Infinity);
}
How can I make my bar chart order itself everytime it's redrawn?
How about this (untested):
chart.on('preRedraw', function() {
chart.rescale();
});
Since the ordering is implemented via the X scale, this should get the chart to recompute the scale each time.
I'm using CanvasJS to create a line graph based on some numbers coming in from my Myo. When new data comes in, the graph doesn't update. Since I don't populate the graph with initial data points, it stays empty forever.
My code: Here
Try this way.
Lets say:
var myChart = new CanvasJS.Chart(...);
Then to update chart data use:
myChart.options.data[0].dataPoints = YOUR_DATA_ARRAY;
myChart.render();
Worked for me, as I didn't find any 'update' method in documentation.
I'm working on a d3.js pie chart application. I am trying to develop the functionality that when you click on the legend rectangles, it toggles the slice on/off as well as the fill inside the legend rectangle.
Although there is a bug with an undefined function - but I am not sure why this error is occurring as the function is defined.
http://jsfiddle.net/Qh9X5/3261/
this.piedata = methods.pie(dataSet);
console.log("animate slice2", this.piedata);
This line (233) has turned your currentDataSet from an Array into an Object:
var currentDataSet = jQuery.extend(true, {}, methods.currentDataSet);
d3 then complains when it tries to call the map function on currentDataSet as it is expecting an array.
You need to change it to take an Array as the second parameter:
var currentDataSet = jQuery.extend(true, [], methods.currentDataSet);
I haven't seen this problem with other Google charts before but I am using the Annotation Chart and every time the data is updated the following lines are called which duplicates the chart object in the DOM as a sibling of the parent:
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_' + this.display.displayDivId));
chart.draw(data, options);
This more or less makes sense based on the code but how can I prevent the new method from firing and instead create a chart object out of the existing DOM element and then call the .draw() method on that object?
Is this possible? The only other thing I can think of would be to clear the existing one from the DOM first, and then proceed w/ the logic I illustrated above.
Any thoughts/suggestions would be much appreciated.
I have used jqplot line chart.
I have get data from php page using ajax.In some condition I will display specific series.So
How to pass series dynamically in jqplot line chart and also set legend of series ?
I have manually write code for above requirement.I have apply click event on legend series and draw graph as per click on legend.
I have also change y-axis value as per select/deselect series legend.
I originally tried the answer posted by #sdespont, but due to additional properties that need to be in place for the series, it wasn't working properly. I was able to get this working by doing the following:
plot1.data = data;
plot1.replot( data );
data is a 3D array of the same makeup as you would pass in when creating the plot. If I did either part without doing the other, it wouldn't refresh properly, but the combination of the two seems to do the trick. Refreshing the plot in this fashion would dynamically add or remove any series I added to the data array.
Hope that helps.
You could add or remove series by playing with plot1.series array.
Here is a good jsfiddle : jsfiddle.net/fracu/HrZcj
The idea is to create an array with data
myNewSerie = Array();
x = (new Date()).getTime();
y = Math.floor(Math.random() * 100);
myNewSerie.push([x, y]);
Then add it to the graph using the next available slot
plot1.series[plot1.series.length] = myNewSerie
And finally redraw using plot1.replot();
Check out the updateSeries function in the end of the fiddle
Not tested, but should work
I had the same problem recently. "replot" works but is veeerrryyy slow. I used "jQPlot.drawSeries" which is blazingly fast. Just give your new series data to jQPlot as usual and call jQPlot.drawSeries({}, <nr of your series from 0...xxx)
My realtime chart with 800 values runs with >> 60 FPS on my PC and also very fast on my mobiles.