dimple.js plots the wrong values - javascript

We are trying to develop a chart which plots a weather file with its corresponding relative humidity and temperature values. So far the chart generates itself correctly, and plots the current weather data based on your location, but it does not plot typical yearly weather data for the current location.
The correct array is written to console, but when handed to dimple to plot, the data that ends up on the chart is not the same as the data logged in console. it is usually significantly higher.
We are having trouble with the code starting on line 171.
See below link:
http://jsfiddle.net/jamesrowse/bnq419qx/1/
This could be a problem with a conflict between d3.csv and dimple, or dimple being handed such a large number of points to plot.
It is just the function starting from line 171 ending on line 193 that is giving us issues:
d3.csv("http://psychrometric.s3-website-us-east-1.amazonaws.com/HourlyWeatherFiles/GBR_London.Gatwick.037760_IWEC.csv", function (data) {
// console.log(data);
var hourlydata = [];
for (var i = 0; i < data.length; i++) {
//console.log(data[i]);
var rh = parseFloat(data[i].rh);
var dbt = parseFloat(data[i].dbt);
hourlydata.push({
"Relative Humidity": rh,
"Dry-Bulb Temperature": dbt,
"Moisture Content": psy.convert(rh, dbt, "rh", "w")
});
}
console.log("*********************************");
console.log(hourlydata);
var hourlySeries = myChart.addSeries("Relative Humidity", dimple.plot.bubble, [xAxis, yAxis]);
hourlySeries.data = hourlydata;
hourlySeries.radius= 3;
drawChart();
});
Any help would be appreciated

It is aggregating your series. It appears the default aggregation is to sum all records whenever the x-axis values match before displaying. You can override that behavior by defining an aggregation on your series as described here: https://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.series#aggregate
Another thing you might want to explore is the 'stacked' option, though that doesn't appear to help for reasons I can't understand at the moment: https://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.series#stacked

Related

ChartJS difficulty with X Axis and pulling appropriate data

I'm having some difficulties with iterating over some json data and displaying the proper X axis (Date/Time) I've tried several times to loop through the json data to extract the time for each worker in "history", but unsuccessful.
Here is a sample of the JSON - https://github.com/devdevdevdev1/rvnpoolcharts/blob/main/samplejson.json
And here is my code - https://github.com/devdevdevdev1/rvnpoolcharts/blob/main/worker_stats.js
To get it to work (somewhat), i've just thrown 48 random numbers as points on the x-axis:
displayWorkerHashrateGraph(Array.from(Array(48).keys()), dataset, label);
but obviously there are several problems with this, such as if a new worker joins after one has already been reporting, it starts at 1 and doesn't line up with the other workers.
You can see here that there is no dates/times on the x axis, and the label says 78 instead of a date label.
Current Graph
I've also tried to loop through the list of each worker and extract the time like so:
let labelsList = [];
let historyList = [];
//Begin History Loop
for (var w in workerData.history) {
var worker = getWorkerNameFromAddress(w);
var a = {
key: worker,
hashrate: []
};
for (var wh in workerData.history[w]) {
a.hashrate.push([workerData.history[w][wh].time * 1000, workerData.history[w][wh].hashrate]);
labelsList.push([w, workerData.history[w][wh].time * 1000]);
}
historyList.push(a);
But that ends up looking like this - Seems its taking the time for all 3 of them, but not lining up with the hashrate and pushing all the values to the left.
What I'm trying to achieve:
Pull the time value for each worker iteration from the history element, regardless of when a worker starts reporting.
Mark the hashrate on the graph at the proper date/time
Only display the last hour of stats (BONUS: a way to zoom out to see all 12 hours of stats)
I'd really appreciate any help you can give, I'm a bit new to javascript and I've tried many times to achieve the above and have seriously been banging my head on a wall. Thanks in advance!

How to use scatter chart with complex data?

I trying to implement scatter chart by example.
In example we can see creating dimension:
runDimension = ndx.dimension(function(d) {return [+d.Expt, +d.Run]; });
Example's data:
Expt Run Speed
1 1 850
1 2 740
1 3 900
I want to use same chart, but I have my data in next format:
[
{
"Timestamp":"2016-12-15T17:29:53Z",
"idgame":"euro",
"users":{
"Jo": {
"energy":200,
"jump_height":0.5
},
"Bob": {
"energy":220,
"jump_height":0.35
}
}
},
{
"Timestamp":"2016-12-15T17:29:55Z",
"idgame":"euro",
"users":{
"Jo": {
"energy":120,
"jump_height":0.15
},
"Bob": {
"energy":240,
"jump_height":0.75
}
}
}
]
I need to build next chart, where x-axis is timestamp and y-axis is jump_height:
My data is allready in crossfilter, so I can't change it.
How can I create good dimension with current format?
I'm still not convinced this is worth the effort, versus biting the bullet and flattening your data and fixing up the other charts. If your data isn't flat you will be fighting crossfilter and dc.js every step of the way.
That said, as usual, it's possible!
We can't use the series chart, because that requires all the data to be present in one group. But since you want to produce multiple symbols from each row of data, an ordinary crossfilter group can't produce the data you need.
Maybe we could use a fake group, but that would be complicated. Instead, let's produce a dimension and group for each user, and then sew them together using a composite chart.
First, we need to parse those timestamps:
data.forEach(function(d) {
d.Timestamp = new Date(d.Timestamp);
});
Next, we'll retrieve a list of all users, by pulling the user keys from each event (timestamp), concatenating them, and then using a d3.set to unique them:
// retrieve all users from all events
var users = data.reduce(function(p, event) {
return p.concat(Object.keys(event.users));
}, []);
users = d3.set(users).values();
In the rest of the code, we'll assume there are the same users for each event. It's possible for them to be different, but it adds extra complexity, and this answer is complicated enough. Just ping me me if you need that feature!
We'll create the chart, crossfilter, and a scale which will assign symbols to users:
var chart = dc.compositeChart("#test");
var ndx = crossfilter(data);
var symbolScale = d3.scale.ordinal().range(d3.svg.symbolTypes);
Now we can create the composite chart. (We'll add the scatter subcharts in the next step.)
chart
.width(768)
.height(480)
.x(d3.time.scale())
.xUnits(d3.time.seconds)
.elasticX(true)
.elasticY(true)
.brushOn(false)
.clipPadding(10)
.shareTitle(false) // allow default scatter title to work
.shareColors(true) // but use different colors for subcharts
.legend(dc.legend().x(350).y(350).itemHeight(13)
.gap(5).horizontal(1).legendWidth(140).itemWidth(70));
We set up the X axis with a time scale, with a resolution of seconds. Both axes have elastic. We need to share colors so that each subchart will be assigned its own color. (The legend is perhaps overspecified - I copied this from another example.)
Finally we get to the meat of it. For each user, we'll create a subchart, and we'll tell the composite chart to compose all of them:
chart.compose(users.map(function(user) {
var userDimension = ndx.dimension(function(d) {
return [d.Timestamp, d.users[user].jump_height];
})
var jumpGroup = userDimension.group();
console.log(user, jumpGroup.all());
var scatter = dc.scatterPlot(chart)
.symbol(symbolScale(user))
.dimension(userDimension)
.group(jumpGroup)
.colorAccessor(function() { return user; })
.symbolSize(8)
.highlightedSize(10);
return scatter;
}))
We're creating a new dimension for each chart. This is because the dc.js scatter plot expects the keys to include both X and Y coordinates, and we can only access the Y coordinate (jump_height) once we know the user. Once we get past that, the group is simple.
The chart will assign the symbol and color based on the user key. These both work the same; an ordinal scale will assign a new value from the range for each new value it encounters in the domain. The only difference is that we're using the default color scale, whereas we had to specify our own symbol scale.
Here's a fiddle: https://jsfiddle.net/gordonwoodhull/3m4mv3xf/19/

To show difference between two bars in high charts?

I want to show difference values in a new line between the two bar charts in high chart plugins, I've create simple bar chart in high charts, but I need to show difference between two bars in the new line.
I'm explaining this in below image, please refer following image.
please help me to fix this ,
Image 2,
i want to show that information in below format/design, is it possible in high charts?
Image 2
I've got as far as extracting the data from the table to calculate the differences. However, as the example has some negative differences e.g. -1, it will depend what graph you would like to put this information on as it would need to have a negative y axis.
The following jQuery code will exact all values, find the difference between the first and second and then add this to an array called diffChart.
var graphs = $('#datatable tbody tr');
var diffChart = [];
for (var i = 0, len = graphs.length; i < len; i++) {
var target = $('#datatable tbody tr').eq(i);
var bar1 = target.find('td').eq(0).text();
var bar2 = target.find('td').eq(1).text();
var diff = Number(bar1) - Number(bar2);
diffChart.push(diff);
}
You can view an example of the console log output in this jsfiddle
Sorry I couldn't be of much help past this.

D3 Range Based Filter

I am working on a D3 bar chart that would visualize a few ranges (massaged data already coming from somewhere else) and allow the user to select a number of ranges for filtering of their search criteria.
Fiddle here:
http://jsfiddle.net/qear2g9b/
The mechanics of it work pretty well I think. The part I am running into problems with, is capturing user input and mapping it to the data.
Once finished, the user should be able to select and drag a range (along the x axis) for the categories they would like to see. I am using d3.brush to let the user select an area on the chart (I haven't looked into how to get it to select the entire chart height yet). On endbrush I am capturing coordinates that I need to map back to the categories that were on the x axis.
Since it is an ordinal scale, it doesn't have invert, so I am kind of suck. Any help would be much appreciated.
Code snippet below:
function brushend() {
console.log("BRUSH END");
console.log(brush.extent());
var pos = brush.extent();
var out = [];
for (var i = 0; i<pos.length;i++) {
for (var j = 0; j<pos[i].length;j++) {
console.log(pos[i][j] + " " + x.invert(pos[i][j])); // Doesn't work because x doesn't have invert method
}
}
}

Making line charts y-axis work?

I'm implementing this charting solution and I'm a little stuck. If I have to line charts in the same graph, as in the first example in the link, but there seems to be a problem with the y-axis. It doesn't show the right ratio between the first and second line chart. See the two images below:
Does anybody have an idea of how to solve this?!
Thanx!
P
I think I understand your problem: the scale of each of the lines on the graph are independent, and the raphael line graph js file is looping through the table data and setting each line's max according to its max value. My recommendation to anyone thinking of using raphaeljs for graphing purposes is to use Graphael instead.
If you REALLY want to fix it, change line 366 of the raphael_linechart in the example files to
max = this.max,
Then add a function that gets the data, and changes the this.max variable to the max value of all the data:
changeMaxValue: function(id) {
var table = helpers.loadTableData(id);
var max = Math.max.apply(Math, table.data);
if(max > this.max) {
this.max = max;
}
},
Pass the id of each table data piece before you actually graph the lines. I didn't test this, so you will have to work out the kinks.

Categories