I am trying to hide columns for the records which are having null or zero values in the row, for this I am using filter method achieve. But for some reason filter function is not calling.
Below is the data sample,
[
{
"cs": 1000,
"DateTime": "02/06/2015",
"subject": "lect",
"math": 1777.655,
"politics": 0.88
},
{
"cs": null,
"DateTime": "02/07/2015",
"subject": "lect",
"math": 344,
"politics": 0.99
},
{
"cs": null,
"DateTime": "02/08/2015",
"subject": "lect",
"math": 920.304,
"politics": 0.777
},
]
Here is the my custom aggregators function and pivotable configuration, where in filter is called.
pivotUI configuration
.pivotUI( {
rows: ["subject"],
cols: ["DateTime"],
aggregators: {
"math": successRate,
"politics": successRate2,
"cs":successRate3
},
hiddenAttributes: ['Date'],
})
Custom aggregator function
var successRate3 = function() {
return function() {
return {
sumSuccesses: "",
sumTrials: 0,
push: function(record) {
if (!isNaN(parseFloat(record['cs'])) && record['cs'] !== null) {
this.sumSuccesses = parseFloat(record['cs']);
}
},
value: function() { return this.sumSuccesses },
format: function(x) { return x; },
filter: function(record){ return record["cs"] > 0; },
rendererName: "TABLE",
numInputs: 0
};
};
};
Related
I have some data coming in random order and would like to convert into into a specific order for Highchart column ranges. Any insight on doing this effectively and insight would help
Also regardless of order of input data I always want to show chart in Apple Orange Banana order with their correct representation
I have tried using maps,sets,array in ruby and have something working which is super brittle and not the most effective.
headers = Array.wrap(raw_data.dig('data', 'dimensions', 'axes', 'headers'))
values = Array.wrap(raw_data.dig('data', 'values', 'c')).map(&:to_f)
labels = headers.map { |header| Array.wrap(header['label']) }
data = values.each_slice(2)
This is the weight of the fruits LOW is lowest weight and HIGH is highest weight. The problem is order of data is ordered by weight so I cant just slice consecutive values of array.
JSON DATA
{
"data": {
"dimensions": {
"axes": {
"headers": [{
"label": ["Apple", "Low"]
}, {
"label": ["Apple", "High"]
}, {
"label": ["Orange", "Low"]
}, {
"label": ["Banana", "Low"]
}, {
"label": ["Orange", "High"]
}, {
"label": ["Banana", "High"]
}]
}
}
"values": {
"c": ["173", "273", "414", "608", "610", "1050"]
}
}
EXPECTED OUTPUT
{
series: [
{'name': 'Weight', 'data': [[173, 273], [414, 610], [608, 1050]]}
],
axis_labels: ['Apple', 'Orange', 'Banana'],
}
chart
https://jsfiddle.net/Praveen2710/7sdqz6Le/8/
You need to preprocess your data to the format required by Highcharts:
var json = {...}
var series = {
name: 'Weight',
data: []
},
i,
header1,
header2,
value,
indexOf,
point,
categories = [];
for (i = 0; i < json.data.values.c.length; i++) {
labels = json.data.dimensions.axes.headers[i].label;
header1 = labels[0].toLowerCase(),
header2 = labels[1].toLowerCase(),
value = json.data.values.c[i];
indexOf = categories.indexOf(header1);
if (indexOf !== -1) {
series.data[indexOf][header2] = Number(value);
} else {
categories.push(header1);
series.data.push({
[header2]: Number(value),
x: series.data.length
});
}
}
Highcharts.chart('container', {
...,
series: [series]
});
Live demo: http://jsfiddle.net/BlackLabel/nm976qho/
Is it possible to add "bpmn:Resource" element in propertiesPanel and edit its attribute? how to do it?
I've already added some properties to property panel based on the property-panel[link] example.
But I have a challenge in adding 'bpmn:Resource' to the properties panel. I don't want it to be added as an extensionElement.
I'd like it to be inside bpmn:Definitions (beside bpmn:Process). Also I'd like to extend the original bpmn:Resource to add some parameters.
So in MyModdle.json I added:
{
"name": "Resource",
"extends": [
"bpmn:Resource"
],
"properties": [
{
"name": "parameters",
"isMany": true,
"type": "MyParameter"
}
]
}, {
"name": "MyParameter",
"properties": [
{
"name": "myParameterType",
"isAttr": true,
"type": "String"
}
{
"name": "myParameterName",
"isAttr": true,
"type": "String"
},
{
"name": "myParameterValue",
"isAttr": true,
"type": "String"
}
]
}
now for example in newElement function of MyResource.js
var newElement = function (type, prop, factory) {
return function (element, extensionElements, value) {
var commands = [];
var resource = getResource(element);
if (!resource) {
var parent = extensionElements;
resource = createResource(parent, bpmnFactory);
console.log('resource', resource);
commands.push(cmdHelper.addAndRemoveElementsFromList(
element,
extensionElements,
'values',
'extensionElements',
[resource],
[]
));
}
var newElem = createResourceParameter(type, resource, bpmnFactory, {
resourceId: 'id-' + value
});
commands.push(cmdHelper.addElementsTolist(element, parameters, prop, [newElem]));
return commands;
};
}
I know this cmdHelper adds 'bpmn:Resource' to extensionElements but I don't know what to use instead!
Im ploting a 3-pie chart as a single Highchart in a resizable container with VueJs and vue-highcharts component.
To do this, I need then to redefine my pies positions and sizes when the container is resized. Im having a huge struggle in redrawing the pies after I alter my series positions and sizes. Here's some code:
<template>
<div class="multiple-pie-wrapper" ref="root">
<vue-highcharts style="height: 100%; width: 100%;" :Highcharts="Highcharts" :options="options" ref="chart"></vue-highcharts>
</div>
</template>
<script>
import VueHighcharts from 'vue2-highcharts';
import Highcharts from 'highcharts';
export default {
props: {
options: { type: Object, required: true }
},
data: function () {
return {
Highcharts: Highcharts
};
},
components: {
VueHighcharts
},
methods: {
reflow: function() {
var series = this.options.series;
//... Calculate the new positions and sizes and set it to
// series[i].size and series[i].center
// HERE IS WHERE I SHOULD REDRAW IT
}
},
mounted() {
this.reflow();
}
}
</script>
The highchart options:
{
"title":{
"text":"3 Pies"
},
"credits":{
"enabled":false
},
"exporting":{
"enabled":false
},
"series":[
{
"type":"pie",
"data":[
{
"name":"Firefox",
"y":45.0
},
{
"name":"IE",
"y":26.8
},
{
"name":"Chrome",
"y":12.8
},
{
"name":"Safari",
"y":8.5
},
{
"name":"Opera",
"y":6.2
},
{
"name":"Others",
"y":0.7
}
],
"dataLabels":{
"enabled":false
},
"showInLegend":true
},
{
"type":"pie",
"data":[
{
"name":"Firefox",
"y":45.0
},
{
"name":"IE",
"y":26.8
},
{
"name":"Chrome",
"y":12.8
},
{
"name":"Safari",
"y":8.5
},
{
"name":"Opera",
"y":6.2
},
{
"name":"Others",
"y":0.7
}
],
"dataLabels":{
"enabled":false
},
"showInLegend":false
},
{
"type":"pie",
"data":[
{
"name":"Firefox",
"y":45.0
},
{
"name":"IE",
"y":26.8
},
{
"name":"Chrome",
"y":12.8
},
{
"name":"Safari",
"y":8.5
},
{
"name":"Opera",
"y":6.2
},
{
"name":"Others",
"y":0.7
}
],
"dataLabels":{
"enabled":false
},
"showInLegend":false
}
]
}
I have tried the following without success:
this.$refs.chart.chart.redraw()
this.$refs.chart.chart.reflow()
series[i].setData(series)
None of them have any effect and my pies are plotted as if the center and size are the default ones (therefore, overlaping each other).
Any ideas?
I've created a method that does graph redesign.
reloadTypeSeries(){
let pizzaCharts = this.$refs.pizzaCharts;
let updateSeries = JSON.parse(this.updateoptions);
let concatJson = [];
$.each(updateSeries, function(key, value) {
concatJson = concatJson.concat([[updateSeries[key].name, updateSeries[key].y]]);
});
pizzaCharts.chart.series[0].setData(concatJson, true);
}
Hope this helps!
I would like to do the following with the contextmenu plugin:
- Rename "Create" as "Add"
- Remove "Edit"
How does one do it?
I do NOT want to create a custom menu because then I only get a node and not the nice data object that can be used in the Create, Rename and Delete events.
Found the answer in the code of jstree itself:
Added this to the jstree code:
"contextmenu": {
items: customContextMenu
}
And this for the context menu items:
function customContextMenu() {
'use strict';
var items = {
"create" : {
"separator_before": false,
"separator_after": true,
"_disabled": false, //(this.check("create_node", data.reference, {}, "last")),
"label": "Add",
"action": function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
inst.create_node(obj, {}, "last", function (new_node) {
setTimeout(function () { inst.edit(new_node); }, 0);
});
}
},
"rename" : {
"separator_before": false,
"separator_after": false,
"_disabled": false, //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")),
"label": "Rename",
"action": function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
inst.edit(obj);
}
},
"remove" : {
"separator_before": false,
"icon": false,
"separator_after": false,
"_disabled": false, //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")),
"label": "Withdraw",
"action": function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
if (inst.is_selected(obj)) {
inst.delete_node(inst.get_selected());
} else {
inst.delete_node(obj);
}
}
}
};
return items;
}
I am trying to build a chart from JS that has multiple "y:" data points in multiple series. I have got the chart working fine using a static configuration, but am struggling to get it to work when adding the points via the API.
I am trying to acheive:
'series':[
{
'name':'Series 1',
'color':'#FF8500',
'data':[
{
'y':1.0002193448599428
},
{
'y':0.4999027241865406
},
{
'y':4.499986649534549
},
{
'y':0.4998817439627601
}
]
},
{
'name':'Series 2',
'color':'#66B3FF',
'data':[
{
'y':12.99999999901047
},
{
'y':13.00000000082946
},
{
'y':18.99999999841384
},
{
'y':5.000000001018634
}
]
},
My code so far looks like this:
var options = {
'chart':{
'renderTo':'MyChart',
'zoomType':'xy',
'defaultSeriesType':'bar',
'width':880
},
<snip>
...
</snip>
'yAxis':{
'title':{
'text':'Seconds'
},
},
'xAxis':{
'title':{
'text':'Objects'
},
'categories': [],
'opposite':true
},
'series':[
{
'name':'Series 1',
'color':'#FF8500',
'data':[]
},
'series':[
{
'name':'Series 2',
'color':'#66B3FF',
'data':[]
}
]
};
options.chart.renderTo = targetdiv;
//Categories add perfectly here:
$.each(harfile.log.entries, function(i, val) {
options.xAxis.categories.push(val.request.url);
console.log(val.request.url);
});
$.each(harfile.log.entries, function(i, val) {
//need to do some logic to catch "-1" for all these values...
options.series[0].data.push("y:" + val.timings.receive);
});
$.each(harfile.log.entries, function(i, val) {
//need to do some logic to catch "-1" for all these values...
options.series[1].data.push(y:" + val.timings.receive);
});
console.log(options.series[0].data);
This produces a "TypeError: Cannot call method 'push' of undefined"
Just use Highcharts API's series.addPoint().