I'm using Highcharts (link to a specific demo -- click View Options to compare below code) to render some data for personal-use.
[Note: this is almost definitely a me-related error, so I don't mean to insinuate that Highcharts is at fault -- it's really a wonderful api!]
When setting the series.data field of the chart object, I encounter strange array sectioning.
For instance, this works fine:
series: [{
name: 'seriesName',
data: [22, 24, 15]
}]
And three data points are plotted with values 22, 24 and 15.
However,
series: [{
name: 'sillySeries',
data: chartData[0]
}]
renders 3 points with the values 2, 4 and 5 and the titles of the points are 2, 2 and 1 respectively... that is, it's splitting the array entries into a title and then a value for two-digit numbers.
console.log shows me that chartData looks like
22,24,15,2010-9,2010-10,2010-11
(3 values for 3 months)
Although the actual arrays are more like [22,24,15][2010-9,2010-10,2010-11]
My 2d-array chartData[][] has [column][row] indices for the data, and I figured that asking for chartData[0] would return an array.
Perhaps my question should be: How do I return a 1d array from a 2d array representation for setting properties/values in javascript objects? It seems like I'm probably overlooking something very obvious.
edit:
data: [24]
plots one point at 24, awesome.
data: '24'
splits up the data as title and then value, effectively plotting a point at 4 and not 24.
So the representation becomes a string when I try to pass an array to the data field. Any way I can do like string.toArray ?
edit 2:
chartData[col][row] is declared as an empty array
var chartData = [];
and subsequently filled up with values by iterating over an HTML table's rows and columns, where the innermost loop contents look like
chartData[cellIndex][rowIndex] = $(currentCell).text();
While chartData is probably an array, it sounds like chartData[0] is a string. When you use an array index on a string you get the character at that position, which is exactly what you are experiencing...
renders 3 points with the values 2, 4 and 5 and the titles of the points are 2, 2 and 1 respectively... that is, it's splitting the array entries into a title and then a value for two-digit numbers.
There are many ways to define arrays within arrays in javascript; here is one:
var chartData = [
[22,24,15]
,['2010-9','2010-10','2010-11']
];
parseInt() saved the day.
something like
for (i=0; i<chartData[0].length; ++i) {
columnOne.push(parseInt(chartData[0][i]);
}
gave me an array that I could then use to display the data with the data field in the object notation
data: columnOne
or more literally
chart1.series[0].data = columnOne;
Thank you James for pointing out
While chartData is probably an array, it sounds like chartData[0] is a string.
which lead to my discovery that the data in my array was actually all strings, which I kept this way because some fields are strings, some are dates (YYYY-MM-DD) and some are just ints.
Many thanks to you both =)
Well, this is not a real answer, but might help you.
Highcharts enables you to preprocess certain options. In your case, you could do something like :
options.series[0].data = new Array(1, 0, 4);
doc reference : http://www.highcharts.com/documentation/how-to-use#options
If this fails, comment above.
Related
Good day,
Im currently on a project that uses javascript as it's front end im having a hard time figuring out why does everytime that im creating a object there will be always a _symbolIndex and _colorIndex in the object.
ex. my codes looks like this.
test_data = {
name: data[i].number,
data: reply_stats*100
};
series_value.push(test_data);
the test_data object has
Object
_colorIndex:0
_symbolIndex:0
data:25
name:"09356152280"
but i only add name and data.
i used this for the highcharts
thanks in advance
I encountered the same issue, haven't found it in the docs (maybe it is there, I just haven't picked it up). So I went investigating a bit.
Turns out Highcharts autoinserts metadata _colorIndex and _symbolIndex properties into a serie object that is passed alone or as an array element into their series property.
If the object being passed already has _indexColor and _symbolIndex, for example from the previous loading into the chart, then these _someprefixIndexproperties will not be modified.
Otherwise, if these properties do not exist, new propertis will be autoinserted into each serie object (in the array passed to series property) in the following way:
autoinsert will start a counter value from 0 and incrementing it on each insert.
Not knowing this can lead to a problem that I had. The _colorIndex will dictate the autocoloring of series on the chart. I ended up having the same color for two series that I expected to be autocolored in different color. It was due to the fact I added one serie, for example i referred to it in my code as
var serieA = {
name: "Temperature",
data: [34, 32, ...]
}
Then I added another serie similarly, serieB as
var series = [
serieA,
serieB
]
It turned out that serieA already had _colorIndex === 0 from first loading, and serieB got the same _colorIndex === 0 on autoinsert
Hope it helps someone
I am grouping the slickgrid table, and I want to know the no.of rows after grouping.
I found this solution
grid.getData().getPagingInfo().totalRows
from this question.
But it is not working for the table after grouping.
It returns the total no.of rows of the data not the updated no.of rows after grouping.
Please help me to solve this
Not sure if I understand your question right, but to me it seems that you are confusing Slick objects here. The grid.getData() will return the complete datasource of your grid.
If you take a look at the official SlickGrid example-grouping demo, you will see a grid with grouped set of datas. You can try yourself by opening your favorite browsers Javascript debugger:
dataView.getGroups()
It will return you the corresponding Array of objects from the dataview that contains all groups informations like:
Array [ Object, Object, ... , another 15... ]
You can reach these objects thru specifying the given element key of the returned array:
dataView.getGroups()[0]
Return value of command:
Object {__group: true, level: 0, count: 1, value: 0, title:
"Duration: 0 1, groups: null, groupingKey: "0"}
Now we can see that it has a count property which contains the exact number of rows belong to that group.
So finally by issuing:
dataView.getGroups()[0].count
Will return you:
1
Or by issuing:
dataView.getGroups()[1].count
Will return you:
3
Where both returned count numbers equal with the record numbers you can see in the grid.
I'm tying out dygraphs an it´s pretty fun.
For some reason though it does not accept a variable as labels for the array containing the data. I have formatted the string to exactly look like the "hardcoded" entry but it just won´t work.
Here are some snippets to let you know what i mean.
var select =('<?php echo implode('","', $select); ?>');
var label='"X"'+ ',"'+select+'"';
g = new Dygraph(
// containing div
document.getElementById("graphdiv"),allData,
{
labels: [label], // I tried it with and without the brackets, no difference
legend:'always',
title:'Abweichung der Messerte',
titleHeight:32,
ylabel:'<?php echo $art?>',
xlabel:'Zeit',
showRangeSelector: true,
digitsAfterDecimal: 5,
strokeWidth: 1.5,
drawPoints: true,
}
);
If i log label to the console it looks like this, depending on the selected numbers:
""X","10002","10003""
Still i get the folling error
"Mismatch between number of labels ("X","10002","10003") and number of columns in array (3)"
My array format for allData is [time,Value1,Value2] and works fine if i hardcode the labels.
Please tell me what i´m doing wrong :-)
greetings David
You need to pass an array of strings, not a comma-separated string of labels.
i.e.
['X', 'Y1', 'Y2']
and not
'X,Y1,Y2'
I'm working on a visualization utilizing the crossfilter.js library, and I'm a bit confused on how to create some dimensions from nested attributes within my dataset. For instance, each instance of the dataset has multiple dates associated with it, resulting in a data structure that looks like this:
[ { name: 'instance_name',
dates: ['2014-11-11', '2013-07-06', '2011-02-04'],
category: 'category 1' },
{ name: 'instance_name2',
dates: ['2012-01-01', '2013-03-07'],
category: 'category 2' } ]
I'd like to be able to create dimensions that will allow for filtering based on, say, the dates and the category and dimensions are a straightforward way to do this with crossfilter. However, I'm not sure how to parse the dates. I've tried first creating a date dimension using something like:
var cf = crossfilter(data);
var dateDim = cf.dimension(function(d) { return d.dates; });
and then tried to store just the dates as a variable using the .map() method like so:
var date = dateDim.top(Infinity).map(function(d) { return d.dates; });
The above does retrieve just the dates and stores them as a variable, however (a) this is just an array of dates each of which is a string, and (b) this doesn't get me any closer to linking the dateDim to other crossfilter dimensions I'd like to create for the visualization. Any help would be greatly appreciated. Thanks for reading.
My recommendation is be to flatten your structure before loading it in to Crossfilter. So your 1st record will become 3 records (1 for each date) and your 2nd record will become 2 records. You can then parse the dates and treat them as a dimension in Crossfilter without too much trouble. The downside is that counting because a problem, but that is manageable with custom grouping functions.
Im creating a singleline series chart using dates and closing prices from yahoo. I have converted the dates into JS timestamps and put them in an array named timeStampArray and put the closing prices into an array named closePrices.
I can populate the chart with data like so:
data : [
[ 1361750400000, 442.80],
[ 1361491200000, 450.81]
],
I wish to use the data from my arrays and the API says to use an array with two values for x and y, like this
data: [[5, 2], [6, 3], [8, 2]]
therefore can I combine my two arrays so that they fit this format?
I can only find examples of how to combine my arrays into key-value pairs like this {'test1':'1', 'test2':'2'};
Also when I create the chart using hardcoded data it orders the dates in ascending order but I want it to keep the ordering that they are input, e.g 25th Feb before 22nd Feb as this is showing historical data.
Is there a way to correct this?
Heres the jsFiddle of my current code: http://jsfiddle.net/mXnZy/
update: ive tried
var timeClose = new Array();
for(var i=0; i<data.query.results.quote.length; i++)
{
timeClose.push( [timeStampArray[i], closePrices[i]] );
}
however this outputs [1361750400000, 442.80, 1361491200000, 450.81] which is wrong.
If you mean that you want them sorted in reverse order, you can use the 'reversed' property on the x axis:
http://api.highcharts.com/highstock#xAxis.reversed
If you mean that you want them listed in whatever order they're entered, without being sorted, it will be much more complicated.
You could provide ordinal x values, and provide the date as additional data. You could then use the axis label formatter to show the dates that you wish.