I have a bar chart written with vizframe and i want to call the fireSelectData function with the following parameter:
var oSelection = {
data: [{
target: $('.v-datapoint')[29],
data: [{
ctx: {
path: {
mg: 0,
mi: 0,
dii_a1: 0,
dii_a2: 0
},
val: 82.2
}
}]
}],
name: "selectData"
}
var frame = this.getView().byId('vizFrameId')
frame.fireSelectData(oSelection)
where $('.v-datapoint')[29] is the <g> svg tag and 28.2 is the value of a column. I'm not sure if these are the correct parameters for the object.
Which is really not clear for me is the path. Which value should be there for mg, mi, dii_a1 and dii_a2?
if you want to select specific values you can use the vizframe's vizSelection function.
oVizFrame.vizSelection([{data : dataPoint}], {clearSelection : true});
the first parameter is an array of datapoints wich are in the model of the vizframe. You can get those objects with oVizFrame.getModel().getProperty('/yourProperty')
if you set clearSelection: true the previous selection will be cleared.
Related
`Given the following document inside a collection card: I have to update the whole data value for a particular id in staticCard
`
{
"staticCards": [
{
id:123,
search:"",
data:[]
},
{
id:456,
search:"",
data:[]
},
],
"dynamicCards":[
{
id:789,
search:"",
data:[]
},
{
id:127,
search:"",
data:[]
},
{}
]
}
You need to determine the index of the array element, which isn't straightforward if you want to match one of the object attributes instead of the whole object. POSITION() is not an option in this case, but you can solve it with a subquery. Then you can use REPLACE_NTH() to set a new value. Finally, you need to update the respective top-level attribute.
LET pos = FIRST(FOR i IN 0..LENGTH(doc.dynamicCards)-1
FILTER doc.dynamicCards[i].id == 127
LIMIT 1
RETURN i
)
LET new = REPLACE_NTH(doc.dynamicCards, pos, { id: 128, search: "", data: [] })
UPDATE doc WITH { dynamicCards: new } IN coll
Below is my sample JSON object. I want to get the 'title' value based
on the longitude value. I have multiple(20-30) longitudes to get the titles, so I don't want to loop through those many times:
{
items:[
{
longitude:-72.897668,
latitude:40.453576,
title:52 street
},
{
longitude:-71.897668,
latitude:41.453576,
title:5th Ave
}
]
}
Can anyone suggest me how to get value without using for-loops.
Did you try something linke array.filter()?
function filterByLongitude(element) {
var expected = -72.897668
return element.longitude === expected;
}
var items = [{
longitude:-72.897668,
latitude:40.453576,
title:'52 street'
}, {
longitude:-71.897668,
latitude:41.453576,
title: '5th Ave'
}];
var match = items.filter(filterByLongitude);
console.log(match[0].title); // 52 street
I have a array of objects and each object has two properties:
{key:count}
I am going to configure my chart and I should set the data source of the chart like below:
{meta: "unknown", value: [the count of unknown]},
{meta: "male", value: [the count of male]},
{meta: "female", value: [the count of female]}
Lets say my current array of objects is like:
[{"0":"10"}, {"1":"7"}, {"2":"9"}] in which 0 stands for unknown gender, 1 for male and 2 for female.
How can I set the value in the chart data in one line in such a way that it can find the count of each gender based on its key automatically from the array of objects.
Edit:
I have already written a method and it does the job:
public getKeyValue(data, key) {
for (var i = 0; i < data.length; i++) {
if (data[i].key == key)
return data[i].count;
}
return 0;
}
However, I was wondering if there's a single line code solution like LINQ.
You can, but it's not pretty.
This will do the job:
data.map(item => item.key === key ? item.count : 0).reduce((previous, current) => previous + current);
(Check an example in playground)
But I wouldn't recommend using this instead of your code, because your code won't iterate over all the array elements if one was found to match the criteria, with my solution regardless of whether or not the criteria was met, there will be two iterations over all the array elements.
For example:
var key = "key3",
data: { key: string, count: number}[] = [
{ key: "key1", count: 1 },
{ key: "key2", count: 2 },
{ key: "key3", count: 3 },
{ key: "key4", count: 4 },
{ key: "key5", count: 5 },
//...
{ key: "key1554", count: 1554 }
];
The array (data) has the length of 1554, but you're looking for the 3rd element.
Your way will have 3 iterations and then return the value, my way will have 3108 iterations, one cycle (1554) for the map function and then another cycle for the reduce function.
Just started using flot.js for the first time and have a few problems/questions. The chart displays fine minus a few things that are bothering me.
1 - The ticks and dates don't seem to line up properly. For example, in the current chart I am working on there are only two entries for two different days. The actual data value (point) is not above the date it corresponds with for some reason. See the image here
2 - Is there any way to make the y axis larger than the dataset to prevent the lines from overlapping the legend? In this example it is fine, but I have seen others where the data overlaps the legend.
3 - How to handle no data? I plan to expand on this to allow the user to select start/end dates... so if there are no results is there a nice way to return this and/or possibly show a message in the chart? The main thing here is the script doesn't break when there is no data.
JS :
//get the data
$.ajax({
url: "/process/chart_main.php",
type: "POST",
dataType: "json",
success: onDataReceived
});
function onDataReceived(series) {
console.log(series);
// Load all the data in one pass; if we only got partial
// data we could merge it with what we already have.
data = series;
var options = {
series: {
lines: {
show: true,
lineWidth: 2,
fill: true,
fillColor: {
colors: [{
opacity: 0.05
}, {
opacity: 0.01
}
]
}
},
points: {
show: true
},
shadowSize: 2
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#eee",
borderWidth: 0
},
//colors: ["#d12610", "#37b7f3", "#52e136"],
xaxis: {
tickSize: [1, "day"],
mode: "time",
timeformat: "%m-%d-%Y"
},
yaxes: [{
position: "left"
}],
legend: {
position: "ne"
}
};
$.plot("#flot_chart", data, options);
}
PHP:
//actual select removed for this display
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
if($results)
{
foreach($results as $row)
{
$data1[] = array( strtotime($row['date']) * 1000, $row['day_count'] );
}
//send our data values to $mergedData, add in your custom label and color
$mergedData[] = array('label' => "Events" , 'data' => $data1, 'color' => '#37b7f3');
}
// return result array to ajax
echo json_encode($mergedData);
Probably the ticks are at midnight (07-09-2014 00:00:00) while the data points are not. If you want to line them up remove the time from your datapoints or give flot the ticks with the same time as your datapoints as an array instead of the tickSize option (see here, you have to give the ticks as timestamps like in the datapoints):
xaxis: {
ticks: [1405942268798, 1405942368798, ...]
}
Use the min and max properties for the axis options (see same link as above):
xaxis: {
min: 1405942268798,
max: 1405942368798
}
flot doesn't "break" when there is no data, it just shows an empty chart. If you want to show an additional message, you can check for yourself before calling $.plot():
if (data.length == 0) {
alert('No data');
}
I am using the column charts for my project. I have written a custom function that colors each bar of the chart based upon its y value. This works fine when I initialize the chart. As I hover over the chart, the color of the bar goes back to the default and my custom colors never return.
I have tries disabling on hover but that doesn't seem to work. I don't want the color to change even when hovered over the bar. Any suggestions?
You are looking for this option:
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
}
},
Fiddle here.
EDITS
Instead of modifying the SVG directly to set your colors, do it within the api:
var max = 200;
var seriesData = $.map([107, 31, 635, 203, 2],function(datum, i){
return {
color: datum > max ? 'red' : '#2f7ed8',
y: datum
};
});
$('#container').highcharts({
chart: {
type: 'bar'
},
tooltip: {
valueSuffix: ' millions'
},
series: [{
name: 'Year 1800',
data: seriesData
}]
});
New fiddle.
You are updating color in a wrong way, use point.update() instead: http://jsfiddle.net/CaPG9/8/
$('#container').highcharts({
chart: {
type: 'bar'
},
tooltip: {
valueSuffix: ' millions'
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}]
},function(chart){
var max = 200;
$.each(chart.series[0].data,function(i,data){
if(data.y > max)
data.update({
color:'red'
});
});
});