I am new to Chart.js and JavaScript. Currently working with a line chart, and now I want to add custom data points to a mouse click event (when I press somewhere on the data set, it takes the current value of the Y axis and using that value it creates a data point in that place). I took the code from http://www.chartjs.org/samples/latest/charts/line/basic.html and trying to modify it. Here is a link to my current chart:
https://i.stack.imgur.com/M9MF1.jpg
I am using the basic chart.bundle.js library, and used D3.js libraries for making data points draggable.
Trying to implement the creation of points per mouse click using the following code, but it seems that it's not good so far.
document.getElementById('canvas').onclick = function(e){
//getting value by pressing on dataset
value = chartInstance.scales[scale].getValueForPixel(e.clientY)
//trying to create dataPoint
myLineChart.points.push(new this.PointClass({
y: value;
strokeColor: this.datasets[datasetIndex].pointStrokeColor,
fillColor: this.datasets[datasetIndex].pointColor
}));
//after all updating my chart
chartInstance.Update(0)
};
Maybe anyone could explain more about this library and how it creates data points?
Every new point in the chart is data, so you need to add that point in the data (chartData.data.dataset[]) array. Instead of adding to the, myLineChart.points which i'm not sure why you have used you should add the data-point in the data array and the UI decorations such as colors are supposed to be specified in the chartOptions.scales.yAxes[] array. Therefore in order to add the point in the chart use:
// here i is the corresponding parameter for which you want to add the new point
chartInstance.data.datasets[i].push(value);
chartInstance.update();
Related
So I'm building a trading tool and am using chartJS for the charts. This is how my charts look now on the page:
So my problem is that when I change the time period of the chart, the chart shows randomly the old data mixed with the new one.
You can see the behaviour here: https://gifyu.com/image/vda5
For now I can't use the Big chart together with the small one on the same page because the big chart which has the timing period has also multiple AJAX calls so every time I click on "1W" for example, a new call is being made and the chart is drawn over.
Things I tried:
I know that for dynamic charts in chartJS I have to destroy the chart, so I'm using
if (window.chart !== undefined) window.chart.destroy();
and for the small charts I use an empty array and push the elements inside. Here is how I do it:
if ($(quoteDisplayEl).hasClass('quoteDisplay-light')) {
chartHandel.push(quoteChart);
} else {
window.chart = quoteChart;
}
so for the big chart I assign it to a global variable and the small one I push it to the empty array - that allows me to have multiple charts on one page.
But in order for the big chart to be destroyed I should destroy and re-render all charts from scratch (I guess) and I tried multiple was of achieving that with now luck.
Unfortunately the code is over 500 lines and has lots of variable data coming from APIs and DB thus I can't make a fiddle demo.
I prefer chart.update() over chart.destroy().
Here's a small, simple example how I usually update data.
I make one object per chart with labels (empty array) and data (empty array) and colors and all the stuff you need.
I fill these arrays with data I get (AJAX).
Optional: If I get all the data and need to filter it to show less data, I copy my object to keep all the data I got and have all the data I need now for my chart in another object
Make an updateChart() function which alters your displayed data or saved data from your backup object or use new data from a new AJAX request.
End your updateChart() with chart.update() (or whatever your chart is called).
Multiple charts shouldn't be a problem and you shouldn't have to destroy your chart.
I'm using the d3 parcoords library. When I modify data plotted in a parallel coordinates chart, and reload the chart, the scale of the axis isn't refreshed.
I tried calling .autoscale(), but if I call it before .render(), it has no effect, and if I call it after .render(), then no polylines are drawn anymore.
$("#example").html(""); //to make sure "ghost" axes are removed
parcoords = d3.parcoords()("#example")
.data(parsedData)
.createAxes()
.brushMode("1D-axes")
.reorderable()//;
.detectDimensions()
.dimensions(dimensionObj)
.autoscale() //no visible effect if placed here
.render()
.updateAxes();
Not sure if this is related (although the issue started at the same time), I started specifying an order for the dimensions. To do this, instead of using an array containing the axes (dimensionArray), I use a JS object dimensionObj containing numbered "index" keys, as follows:
//dimensionArray = ["axis1", "axis2", "axis3", "axis4"]; //orderless array
//Default axes to display with predefined ordering
dimensionObj = {
"axis1": {index:0},
"axis2": {index:1},
"axis3": {index:2},
"axis4": {index:3}
}
For illustration purposes, the following screenshots show how on the top image, the scales are properly set, but on the second (updated) chart, some new polylines are going to 0 on the 1st and 3rd axis, but the scale isn't updated so lines go out of range.
Is there a simple way to refresh the axis scales when reloading a chart? Is it possible that using the JS object in .dimensions() is creating some conflicts with the underlying scale function?
Found what was causing this behaviour: an if statement in d3.parcoords.js pc.autoscale function which was only resetting scales if the yscale was not previously defined. Essentially I edited the if statement from original:
d3.keys(__.dimensions).forEach(function(k) {
if (!__.dimensions[k].yscale){
__.dimensions[k].yscale = defaultScales[__.dimensions[k].type](k);
}
});
to this (of course the if statement could be dropped altogether, I simply kept it in this form in case I need to revert to original version later for any reason):
d3.keys(__.dimensions).forEach(function(k) {
if (!__.dimensions[k].yscale || __.dimensions[k].yscale){
__.dimensions[k].yscale = defaultScales[__.dimensions[k].type](k);
}
});
I am having an issue where I get the error in the title of this question when I create a chart like the one in this fiddle http://jsfiddle.net/w43m47hL/.
I get this problem when selecting a point.
this.select();
The problem occurs when performing these steps.
create the chart
click on a point to select it
destroy the chart
create the chart again
The size of the data set seems to have something to do with the problem. If you change 1500 to 15 you will see that you don't get this problem any more. However the data point that was selected is still selected after the chart is destroyed and created again. I would have thought that the point would not be selected since the chart was destroyed. How is the data point remembering that it was selected?
The issue is caused by keeping reference to "old" data array. During chart initialisation, you set the reference to data array, which is modified. So when you destroy chart, reference still exists. Use the copy of data ($.extend([],data)) in Highcharts objects.
series: [{
data: $.extend([], data)
}],
Example:
http://jsfiddle.net/nazr3det/
I have a large time series data set I need to graph, and am trying to use D3 to do it. I plan to have my graph have the x-axis be time, and allow for movement of the graph in the x direction. I want to have the graph only load/display the points that exist in the current time range on the screen.
For example, if my dataset has times 1-100, but the graph starts out with times 1-10 shown, the graph should only graph points 1-10. Then the user may move to the right and see times 5-15 and the graph should update accordingly.
Can anyone explain to me how this might be done via d3? I am having a hard time bridging the understanding from an entire data set being loaded in at once and graphed immediately to selective graphing of subsets of the data.
I think you are looking for the selection.filter() function. For example you can have:
var allNodes = vis.selectAll("Nodes").data(data.nodes);
var validNodes = allNodes.filter(function(d){return (d.time>1 && d.time <10)});
//use normal graph functions on validNodes.
You can also apply filter directly on the array of nodes.
I'm trying to filter data by clicking on certain rect bar in a stacked bar. This stack bar is a two dimention graph, the horizontal index is years, and the vertical index different product revenues, I want to filter by certain product in certain year. means when I click on a rect bar of the whole graph, the data should get filtered by certain year and certain product.
my code is :
metrics.on("click", function(d,i,j){
d3.select(this)
.style("fill","lightcoral")
.style("stroke","red");
fdata =rawdata.filter(function(d){return (d[xvalue]==_seriesA[i])&&(d[yvalue]==_seriesB[j])});
});
but the weird thing is the value of j is always undefined, although if I attach a title to it :
metrics.append("title").text(
function(d,i,j) {
return i + ' - '+j ;
});
the value of j will get printed correctly, is there anything special about the 'on' click function? why I cannot get the value of j? any help will be appreciated....this is triving me crazy for the whole night...
According to the documentation, the second argument to .on() is a function that takes two arguments, not three. Similarly, it shouldn't work in your second example either.
I think you're getting confused about the distinction between the data and how it is rendered. The .on() function will get you the data. The scales you have created somewhere in your code take that data and map it to x and y coordinates in your graph (or you use the data directly without scales). In the .on() function, you use the data in exactly the same way you used it when you created the graph to start with. That is, the data item (d in your code) contains the data for the specific position that you're highlighting.