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.
Related
Exists a function in LightningChartJs to get all visible points from a line or point series in a chart?
If I zoom the chart I want to show something if no visible points available. In some cases I have breaks in my data.
For now I have to check the range and filter all points within this range, but that seems not to be very performant. I guess LC is aware of all the visible points and can give me that.
I would very much welcome any thoughts on the subject or other solutions. Thanks.
LightningChart JS doesn't track the data points that are visible at any time. So the method that you have used to solve the issue is the best way currently.
Something like this seems to be reasonably performant.
function getDataInRange(data, rangeStart, rangeEnd){
const inRangeData = []
const dataLength = data.length
let curPoint
for(let i = 0; i < dataLength; i += 1){
curPoint = data[i]
if(curPoint.x >= rangeStart && curPoint.x <= rangeEnd){
inRangeData.push(curPoint)
}
}
return inRangeData
}
On my personal machine it can process 1 million points in ~10ms ± 2ms. If you only want to know that a point is visible in the range then you could just break the loop as soon as a single point is in the visible range.
Late to the game but for anybody googling:
If you already have a chart defined and it happens to be named 'chart' (otherwise change chart to your chart's object name), you can track the visible start and end data points like this:
axisX = chart.getDefaultAxisX()
window.axisXScaleChangeToken = axisX.onScaleChange((s, e) => {
window.axisXVisibleDataRangeStart = s
window.axisXVisibleDataRangeEnd = e
})
let visiblePoints = [];
for(let i of cur.data){
if(i[0] > window.axisXVisibleDataRangeStart && i[0] < window.axisXVisibleDataRangeEnd) visiblePoints.push(i)
}
Every time the X axis is scaled/zoomed/moved, axisXVisibleDataRangeStart and axisXVisibleDataRangeEnd will change. You're then iterating over where your data points are stored (cur.data in my case and the example) and comparing: If timestamp is within range, push to visiblePoints.
(I am using OHLC where data[0] is the timestamp. Your comparison might be to an object array where {x:} is the value youre looking to compare. You get the idea.)
To remove the listener and stop the logging:
axisX.offScaleChange(window.axisXScaleChangeToken)
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
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
}
}
}
I have a highchart with drag-able points similar to this example, http://jsfiddle.net/highcharts/AyUbx/, except I am only using an area-spline chart. The series of points is taken from this array data = [1,5,3,8,12]
Before I drag any of the points on the graph, I calculate the sum of points on the curve, I get 29. However, I need to calculate the sum of the points after I move the points on the graph. What is the best way to do this? I have been going in circles for ages and I can't seem to figure it out?
This should work for the Stacked bars:
var dataItem = chart.series[X].data[Y],
dataValue = dataItem.percentage/100*dataItem.total;
for the line-graph, you should be able to do:
dataValue = dataItem.y;
See here:
http://jsfiddle.net/AyUbx/720/
$("#sum").text(series.data.reduce(function(a,b){
return a + b.y;
},0));
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.