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.
Related
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.
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've run into an issue using jqGrid 5.2.1.
I'd like to retrieve a property from a row of data when a user clicks on a cell. The property is in the original data set, but it isn't displayed in the grid. Also, I'm using the scroll feature, so the row ID's are coming back like "jqg20".
I've tried using getRowData, but that only returns the data that is displayed in that row. getLocalRow will not accept the row ID with "jqg" in it. Is there another way that I can access the same row in the local data that the user clicked in the grid to pull out a property? The property 'attr' is what I want to pull out in the example:
var testData = [
{col1:10, col2:20, col3:30, col4:'TEST', col5:50, col6:60, col7:70, col8:80, col9:90, col10:100, attr: {property: "this is column 1"}}
]
Here is the jsfiddle that I've created to show the problem:
https://jsfiddle.net/rhv247q7/
Before to answer of the direct problems I need to do some notes.
It is recommend to use the jqGrid version where the problem persist. You tell us for version 5.2.1, but you use 4.6, which we think can come to some uncomfortable situations.
It is always good idea to set id row – this can be done either in the description of the colModel (key : true) or with the appropriate reader in this case localReader. When you set this you will be sure that there will be not a problems getting certain row and some other important commands. It is not good idea to let the grid create the ids.
Now to the problem : to do what you want you should use the getLocalRow, which return the data as it comes to the grid – i.e the original data.
In your case there was a bug when scroll is on and no id is set from the developer (i.e. the grid creates internally the id). The problem is fixed in GitHub and you can test it.
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.
In my JS I have the following ajax call, that bind the resulting json using knockout mapping plugin.
$.getJSON("/Game/GetRack", function (data) {
game.rack = ko.mapping.fromJS(data);
ko.applyBindings(game.rack, $('.rack')[0]);
});
/Get/GetRack returns:
[{"Color":3,"Letter":"a","Points":5},null,null]
As you can see, there is only one object in the array. The other two are nulls.
Now using knockout mapping I can do:
ko.mapping.fromJS([null, { Color: 55, Letter: "b", Points: 88 }, null], game.rack);
Doing so correctly updates my view and now I see only a letter B on a second position. The other two are nulls.
My questions is: Can I update a value at a particular position without using mapping.fromJS?
So assuming I have a letter A at index 0, I want to change the second null to
{ Color: 55, Letter: "b", Points: 88 }
and make my UI automatically update to resemble this change. How can this be done?
Edit:
I decided to go with the example given by John Earles. Unfortunately I still have a problem, because my array is two dimenstional.
You have a sample here:
http://jsfiddle.net/wgZ59/29/
(it's very similar to John Earles' example, but includes two dimensional array).
Can someone point out why clicking on change button does not change the values of elements? Is it also possible to change their values without calling HasMutated()?
And the last one (only if the previous two are solved). Is it possible to create html table statically (because e.g. I know that it will always be 3x3, so I want two print table with 3 rows and 3 columns and then bind each individual cell to my matrix cells. I tried that already and I had problems, because knockout didn't have the values for the cells...
EDIT2:
I managed to answer my above questions myself, fiddle example is here:
http://jsfiddle.net/wgZ59/44/
So, I can make a static table and bind individual cells, when I declare the array this way:
self.matrix = ko.observableArray([[0,0,0],[0,0,0],[0,0,0]]);
or
self.matrix = ko.observableArray([[,,],[,,],[,,]]);.
I can update the values and it works for a static table, but it does not work for a dynamic table (created dynamically by knockout). You can see the behavior on the fiddle page (link at the beginning of this edit). Do you know why pressing "change" button does not update the values in a dynamically created table?
I don't know exactly what you are trying to do, but if game.rack is an observableArray then you can manipulate it using JavaScript.
Here is the documentation page on observableArrays:
http://knockoutjs.com/documentation/observableArrays.html
That page shows the available "helper" methods that are available on the observableArray itself. Additionally you can manipulate the underlying array, but then you have to call 'valueHasMutated()' on the observableArray to let any registered listeners know about the changes.
Here is a simple JSFiddle showing manipulation:
http://jsfiddle.net/jearles/wgZ59/8/