I have an object
{
"AmountExpectedPay" : 300,
"AmountToPayToVendor" : 100,
"Category" : "DME",
"Current" : "Step 5",
"Date" : "1/2/2019",
"Employee" : "JB",
"GrossProfit" : 0,
"Margin" :
{
"ActualIncomeActualPayment" : 1.19808,
"ActualIncomeExpectedPayment" : 1.19808,
"ExpectedIncomeActualPayment" : 1,
"ExpectedIncomeExpectedPayment" : 0.760410013079052
}
This represents a Purchase Order. I have 5504 of these.
I would like to graph these in DC JS as a series chart, but as I understand DC, The series chart needs these broken into four separate records(Objects), one record for each type of margin so that Crossfilter can group by type and DC JS render each type as a line.
However, is there a way to use CrossFilter's reduce methods to pseudo create one series for each type for the series chart?
Thanks for your help!
Related
Hoping someone can help me out with a calculation.
Say I have a coordinates for a bounding box, for example as a viewport returned from Google Places API, e.g.
"viewport" : {
"northeast" : {
"lat" : 37.4238253802915,
"lng" : -122.0829009197085
},
"southwest" : {
"lat" : 37.4211274197085,
"lng" : -122.0855988802915
}
}
I'm then using these to return results from Elasticsearch filtering by locations within a Geo Bounding Box: https://www.elastic.co/guide/en/elasticsearch/reference/5.1/query-dsl-geo-bounding-box-query.html
This is fine, however i'd like run a calculation to increase this viewport by, for example, 5 miles with the return value being another bounding box of increased size.
I guess the diagonal line running through the viewport would need to be increased by 2.5 miles each way, but I'm not sure on the calculation.
Thanks in advance.
So it turns out this can be solved using Vicenty's formulae: (https://en.wikipedia.org/wiki/Vincenty%27s_formulae#Direct_Problem).
JavaScript implementation at https://www.npmjs.com/package/geodesy for anyone interested.
Praise Vicenty.
We have an AmChart Stock Chart implementation with multiple panels. We want to add graphs with the compared property set to true on demand to the first panel of a Stock Chart containing multiple panels.
How do we do this?
What we tried so far:
We push data sets into an AmChart instance called tmpchart. When we add a chart to the panel below the first one it and then attempt to add a graph at index 1, the graph is not drawn. In case we do not have a graph in panel 2, the series are added to panel 1.
tmpchart.dataSets.push({
//title: String(tmpchart.dataSets.length+1) + "th data set",
fieldMappings: [{
fromField: "value" + intSegmentAdded,
toField: "value" + intSegmentAdded
}],
dataProvider: newChartData,
categoryField: "year",
compared: true
});
console.log("---printing dataset -----")
//console.log(tmpchart.dataSets);
console.log(tmpchart.panels[0]);
var oldPanel = tmpchart.panels[0];
var graph = new AmCharts.StockGraph();
graph.id = "g" + intSegmentAdded;
graph.valueField = "value" + intSegmentAdded;
graph.compareField = "value" + intSegmentAdded;
graph.comparable = true;
graph.compareGraph = {type : "smoothedLine", fillAlphas : 0.15, lineThickness :2 };
oldPanel.addStockGraph( graph );
As you can see in the output, the blue and yellow series are added first to the top panel and the green is added to panel below it. When we attempt to add another series to top panel - the red one - it does not appear, even though it is in the dataSets array.
Your code appears to be fine by itself. The only thing your sample is missing is a validateData call.
Codepen
It might be helpful for you to provide an SSCCE that reproduces your scenario more accurately so we can better understand your issue.
I have used CCC Heat Grid in CDE to create a bubble chart with bubbles of different colors. My data set has only 6 values: (1, 1.1, 2, 2.1, 3, 3.1). I have sizeRole property to "value" so that the size of the bubble varies based on the magnitude of these six values. Alternative, I could have set colorRole property to "value". I have set three colors: green (1), yellow (2) and red (3).
Now, what I want to have 1 as green, 2 as yellow and 3 as red; and biggest constant size for 1.1, 2.1 and 3.1. The values 1.1, 2.1 and 3.1 represent alarms in my data set, so I want them to be of biggest size bubble or some other differentiating visual element.
I tried the following in pre-execution but no luck
function changeBubbles(){
var cccOptions = this.chartDefinition;
// For changing extension points, a little more work is required:
var eps = Dashboards.propertiesArrayToObject(cccOptions.extensionPoints);
// add extension points:
eps.bar_shape = function getShape(){
var val = this.scene.vars.value.value;
if(val == 1.1 || val == 2.1 || val == 3.1){
return 'cross';
}
else {}
};
// Serialize back eps into cccOptions
cccOptions.extensionPoints = Dashboards.objectToPropertiesArray(eps);
}
How can we achieve this?
I hope the answer is still relevant, given that this is a late response.
To use bubbles you should have useShapes: true.
You can set a different constant shape by using the shape option. For example, shape: "cross".
To have the bubble size be constant, you should set the "sizeRole" to null: sizeRole: null. Bubbles will take all of the available "cell" size.
Then, the "value" column should be picked up by the "colorRole", but to be explicit, specify: colorRole: "value".
By default, because the color role will be bound to a continuous dimension ("value"), the color scale will be continuous as well.
To make it a discrete scale, change the "value" dimension to be discrete:
dimensions: {
"value": {isDiscrete: true}
}
Finally, to ensure that the colors are mapped to the desired values, specify the "colorMap" option:
colorMap: {
"1": "green",
"2": "yellow",
"3": "red"
}
That's it. I hope this just works :-)
I'm working on a visualization tool for time series with multiple dimensions.
To simplify my case, each data-point has a dimension on type, clusterId and a set of months:
{
type: "green",
clusterId:42,
months:[1392185580000, 1394604780000, 1397279580000]
}, {
type: "red",
clusterId:43,
months:[1392185580000]
}
Now I would like to show the dates in a dc.barChart, which shows the months of all datasets as keys(bars), and the number of observations of each month as value of the bar.
In the given case, it would result in 3 bars, the first one with a height of 2, and the other with a height of 1.
How can I create this dimension and implement the grouping/reducing function?
You don't have to worry about filtering by this dimension, I already have a custom filter for this dimension. The only thing is displaying the bars on the barChart.
If i get this correctly, you need some code, that outputs: 1392185580000: 2, 1394604780000: 1, 1397279580000:1?
arr.forEach(function(d) {
d.months.forEach(function(month) {
if (!store.hasOwnProperty(month)) {
store[month]=0;
}
store[month]++;
});
});
demo fiddle
is there a way to not display a series label in the legend when label is entered in the series options (something like a showLabel:false) ?
Reason : I actually need a more explicit identifier that 1,2... to know which series I'm checking within a python script that will build the different buttons used to display or not some series.
Any help will by really appreciated.
If no such options is present for series I could just enter a brand new one option and fill it with the identifier anyway to perform the check in my python script afterward.
Regards
You can use the showLabel option for each series. For example if you have 3 series and you want to not display the label of the second serie you can use something like the following :
series: [
{showLabel: true},
{showLabel: false},
{showLabel: true}
]
Please see an example on jsfiddle here
Edit
An alternative can be to define a variable with your own labels and to use it then in jqplot (example n°2 here:
var mylabels = ["This", "particular", "way"];
var plot = jQuery.jqplot('chart', [data], {...
legend: {
labels: mylabels
}
}