I had result that was pulled from the database, and each item in the result is a series in a single chart.
I was able to update that chart but the last element of the result only shows in the chart. What could be the possible problem for this one?
for (i = 0; i < objResult.length; i++) {
temperatureRender.updateSeries([{
name: objResult[i].TankName,
data: objResult[i].TankLogs
}]);
}
It displays the Series but only the last series that I've added.
The updateSeries method overwrites the existing series. So in a for loop (like in the code you've included) you'd only be showing the last element - overriding any previous ones.
Take a look at the appendSeries method instead which will allow you to add additional series, while keeping the already existing.
Just worth mentioning as well, that this is different from appendData which allows you to add additional data points to an already existing series.
Related
I am very new to Javascript and D3. So maybe a very simple question.
I have a csv file that I need to import.
The columns are the following.
Date, Value A(score), Value A(rank), Value B(score), Value B(rank), ....Value Z(rank).
I need to graph this using D3 for Date vs Value A(score) and Value B(score).
I am currently using the code below.
const dataset = d3.csv("boardgame_ratings.csv")
dataset1.then(function(data){
const slices = data.columns.slice(1).map(function(id){
return {
id: id,
values: data.map(function(d){
return {
date: timeConv(d.date),
measurement: +d[id]
};
})
};
})
I omit the actual graphing, because I do not have issue with that.
What I am having an issue is that I need to graph only the "score" section. Not the "rank" section. the code that I wrote graphs every column.
I am having trouble because JS is asynchronous.
How would I implement the following?
Extract the "score" only and date columns from the CSV file.
Declare the new data as dataset.
implement the code.
I'd say the problem here is your code for drawing the chart (as you mentioned, "the code that I wrote graphs every column"). This is not ideal because you need to have control of what you draw, so a quick fix would be creating an array of keys telling what columns to use. Also, filtering out columns is unnecessary because when you fetch the CSV you're getting the whole file: if you don't need some columns, just ignore them. Therefore, filtering them out will only add burden to the browser.
All that said, d3.csv accepts a row function, so eliminating some columns is trivial:
const dataset = d3.csv("boardgame_ratings.csv", d => ({foo: d.foo, bar: d.bar}));
Here I'm keeping only the columns foo and bar, ignoring all other columns.
I'm using highcharts / highstock and their documentation.
I need to dynamically add a series (once after the original chart data is loaded) and I need to hide the series to not be shown into the chart (but still to exist).
The reason for this is, I need to apply indicators to a certain time range and for this I'm using the hidden series (which actually works).
I also need to be able to access to the data of the hidden series at any time, but here is where my issue appears. If I try to access to my hidden series like:
console.log(chart.get('hidden-series').data);
then this returns an empty array.
I have the full code in the following jsfiddle and here is a short explanation of what I'm doing there:
With a click on the first two buttons, I'm dynamically adding two series series2 and series3. One of them is added "normally" (it's visible) and the other is added to not be visible on the chart (using the false, false as second and third parameters in the method addSeries - which I'm not sure what actually this means, since this was a legacy code and I can't find the proper documentation for this anywhere).
And then with the last buttons I'm trying to get the data for each of the series. As you can notice from my test example, even that the series3 is added (it's not visible) when trying to get the data, it's an empty array.
If I comment the two false parameters in the line:
}, false, false);
the data will be retrieved as expected, but the series will be displayed (and this is not what I want).
Is there any other way for getting the data from invisible series? Or maybe the proper description for the parameters in the addSeries method can also help in understanding the issue.
EDIT: (add the reason why I need this, based on the comments below)
The reason that I need this feature is: I need to have the VWAP indicator on the chart and to be applied only for the current day (so starting from 00:00 until the current moment), while the chart itself contains data for multiple days.
So what I'm doing is: I'm taking the subset of the data that represents the current day only, hide this subset and use it's data to show the VWAP indicator only for this certain time range.
The initial load of the indicator works as expected. I need to have access to this data, since the chart is updating in real time and I need to be able to dynamical add new points in the general series of data and but also in the hidden subset for the current day as well.
Regarding docs: you use only part of docs, the one describing options, not methods. You can find methods and props in "Classes" tab, for example addSeries: https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries - the params you have set to false are animation and redraw - definitively not what you want to achieve :)
To achieve what you need you should:
add the third series just like the first one (with redraw=false)
hide this series with series.visible and series.showInLegend options set to false (if you have disabled legend, no need to set showInLegend)
Now the question is why you need series.data. The only reason to use Point Class instances is to call methods like point.remove() or point.update(). Since that one series is always hidden, then I think it's not the case.
If you don't need real Points, just some data from it, then you always have access to the dataset you used to create the series, right? Like chart.addSeries({ data: [ ... ]}).
Anyway, you can force generating points this way: https://jsfiddle.net/BlackLabel/nqsemy3z/2/ - note that series.processData() and series.generatePoints() methods are not part of API.
I'm working on a heatmap chart using dc.js. During the page loads, i want to manually filter the heatmap.
For example, if it filter using this heatmap.filter("30,0"); it works when the page loads. but when i try to filter multiple values using the .filter() function, it didnt work.
I tried doing this just for testing.
var test = [];
test.push("30,0");
test.push("40,2");
heatmapChart.filter(test);
Though it works if its only one item, but if i add another array item, the chart breaks. Is there a specific way to filter multiple items manually?
Yes, but there are a few layers of weird between here and there.
First, the actual filter items are constructed using dc.filters.TwoDimensionalFilter - I think your comma separated strings are only working by accident.
Second, the chart has already overridden .filter() so if you want to get at the base version which can handle multiple items, you need to call chart._filter() instead.
Finally, and weirdest of all, the syntax for filtering on multiple items is to supply an array containing a single array of filter items.
Putting these all together,
var ff = [dc.filters.TwoDimensionalFilter([0,2008]),
dc.filters.TwoDimensionalFilter([3,1994]),
dc.filters.TwoDimensionalFilter([9,2000])];
heatmapChart._filter([ff]);
works with the heatmap filtering example. Note the array of array of filters!
I have the following snippet of code which updates my chart type from one type to another.
chart.series.forEach(function(serie){
serie.update({
type: type,
stacking: stacking,
})
})
I can pass different values in from type to stacking.
If I want my new chart to use a different array of values, the arrays of which are already defined and contain data from the database; how would I do it?
The reason I wish to do this is because I have two values, which are entered in their own arrays, say for example, 40 and 50 from a database. These are then stacked in a column chart (It's the only way I can stack).
I've created another array to store both these values in the one array when deciding to show it in a pie chart (not stacked).
I've tried adding 'data:arrayName' in as a property but this prevents my chart from rendering. Any idea guys?
Thank you.
EDIT: My problem probably only required one object to call. I don't have that much going on so the solution in the possible duplicate isn't really helpful to me. The duplicate code is trying to generate a new array on the fly using loops, I already have an array in place, I'm just figuring out how to update the array once the chart has changed to another type.
I am writing a knockout binding for highcharts, and I therefore have an observable array of highcharts series objects which I want to bind to the chart by adding and/or removing series as necessary using the highcharts api.
Here is the outline of my bindingHandler (for the non-knockout out there, this is the bit which ties my ViewModel to the UI element bound to it).
ko.bindingHandlers.series = {
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
if(element.highChart === undefined){
console.warn('Element ' + element.id + ' not attached to a highchart binding');
return;
}
var value = valueAccessor();
var valueUnwrapped = ko.unwrap(value);
var chart = element.highChart;
var series = chart.series;
if($.isArray(valueUnwrapped)){
// In here is my question
}
}
}
Where the comment is above formsa the crux of my qustion. At this point I have two javascript variables
series - an array of highcharts series objects currently displayed
valueUnwrapped - an array of highcharts series objects which should now be displayed
What would be an efficient way of comparing these two arrays to determine
which instances on the series array which should be removed using the remove method
which instances on the valueUnwrapped array which should be added using the addSeries method
In case its of help, there is a useful looking get method which gets a series by id, and I'm happy to have an id on all my series. That is on the chart object which you will also see in my example code above.
I could of course be really lazy and clear the chart
while(series.length > 0)
series[0].remove(false);
then add them again from my array. I'm wondering if there's perhaps a better way.
I think, that the 'lazy' way isn't that lazy at all. Even if you set for each series 'id' then get() function from Highcharts will loop over all series to find one. And if you have 10 series, you will do the for-loop 10x times. In the fact it checks also axis and points, so it's not as fast as you may expect.
I would stick to
while(series.length > 0)
series[0].remove(false);
$(valueUnwrapped).each(function(el, in){
chart.addSeries(el, false);
});
chart.redraw();
Since that's all: only two 'for' loops with nice performance. While checking and comparing if series need to be removed or updated or just new data set isn't worth of it (in my opinion).
I think you can try to create new question for knockout (without highcharts tag) something like: 'how to compare two array of objects based on ID's' os something like that ;)