Is there a way to implement new milestones via data feed from database? I checked the example below but couldn't figure out
https://www.amcharts.com/kbase/time-line-chart-date-based-milestones/
I use "dataLoader" to feed the values into graphs I can just create a new column in my table for the milestones question is how to update it?
The milestones in that example are guides, so they don't normally get updated in any process that modifies the chart's dataProvider. You can use the complete callback to create/update your chart guides:
AmCharts.makeChart("chartdiv", {
// ...
dataLoader: {
url: "...",
complete: function(chart) {
//add/modify guide objects through chart.valueAxes[0].guides or
//directly to the chart object through chart.guides
chart.valueAxes[0].guides = [{
"value": new Date(2016, 2, 5),
"label": "MILESTONE #1",
"position": "top",
"fontSize": 15,
"tickLength": 15
},
// .. etc
];
chart.validateData(); //redraw chart
}
},
// ...
});
Related
I am currently working on a project for my company, where I need to plot highstock charts, which show energy-data of our main buildings.
Since it is live data, new datapoints come per Websocket every few-or-so seconds. However, the graph should only show one datapoint every hour. I wanted to clear this with the highstock dataGrouping, but it does not really work. It groups the points yes, but it still shows the „transmission“, the graph-line, between them. Thus making the whole graph completely irreadable.
In an other Version of the project, the graph only shows the latest datapoint of each group (as specified in the „approximate“ object in the chart options), but also does not start a new group after the chosen Interval runs through.
I've been sitting on this problem for about 3 days now and have not found any proper completely working solution yet.
Unfortunately, due company policy and due to hooks and components necessary, which are only used here in the company, I'm not able to give you a jsfilddle or similar, even though I'd really love to. What I can do is give you the config, mabye you find something wrong there?
const options = {
plotOptions: {
series: {
dataGrouping: {
anchor: 'end',
approximation: function (groupData: unknown[]) {
return groupData[groupData.length - 1];
},
enabled: true,
forced: true,
units: [['second', [15]]],
},
marker: {
enabled: false,
radius: 2.5,
},
pointInterval: minutesToMilliseconds(30),
pointStart: currentWeekTraversed?.[0]?.[0],
},
},
}
This would be the plotOptions.
If you need any more information, let me know. I'll see then, what and how I can send it to you.
Thank you for helping. ^^
This is example how dataGrouping works with live data,
try to recreate your case in addition or use another demo from official Highcharts React wrapper page.
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'minute',
count: 15,
text: '15S',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['second', [15]]
]
}
}, {
type: 'hour',
count: 1,
text: '1M',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['minute', [1]]
]
}
}
},
Demo: https://jsfiddle.net/BlackLabel/sr3oLkvu/
I was trying to create a map with amcharts4's custom maps using this tutorial. It works perfectly when I used a map from amcharts geojson library. But when I add a different map like this map. It only shows the last feature of geojson feature collection. I tried adding a id as described here in this issue but It gave me the same result. Can anybody help me to get this work?
here is a code pen demostrating the issue: https://codepen.io/sankhax/pen/YzwLdJy
Thanks in advance.
Your GeoJSON is still missing the id property, which needs to be unique for each feature in your JSON's features array; the tutorial states that it needs to be in the top-level of the feature object, but having an id in the properties object also works, as you can see in the other map in your codepen. The value stored in electoralDistrictCode from your properties data is a good candidate for an id:
[{
"type": "Feature",
"id": "MON",
"properties": {
"electoralDistrictCode": "MON",
"electoralDistrict": "Monaragala",
// ...
},
"geometry": {/* ... */}
},{
"type": "Feature",
"id": "ANU",
"properties": {
"electoralDistrictCode": "ANU",
"electoralDistrict": "Anuradhapura",
// ...
},
"geometry": {/* ... */}
},
// ...
]
Once you add this to your JSON, your map will render correctly in AmCharts v4. Demo below, using a manual AJAX request to mutate the JSON to work with the library:
var map = am4core.create("chartdiv", am4maps.MapChart);
// indonesia geojson
fetch(
"https://raw.githubusercontent.com/GayanSandaruwan/elections/master/electoral_with_results.geojson"
)
.then(function(resp) {
if (resp.ok) {
return resp.json();
}
throw new Error("Unable to fetch json data");
})
.then(function(data) {
//add the missing id property before assigning it to the map
data.features.forEach(function (feature) {
feature.id = feature.properties.electoralDistrictCode;
});
map.geodata = data;
});
map.projection = new am4maps.projections.Miller();
var polygonSeries = new am4maps.MapPolygonSeries();
polygonSeries.useGeodata = true;
map.series.push(polygonSeries);
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
I'd like to create a Resource Gantt with AnyGantt, currently, when mouse pointer move to the task, it show the resource name and starttime/endtime. I would like to show task name and starttime/endtime.(with following data, I would like to show "task1", not "Equipment#1")
Anyone can help?
Thanks!
[ {"id": 13, "name": "Equipment#1", "periods": [{"id": "task1", "end": 1494099000000, "fill": "green", "start": 1494055800000}]}]
First of all, period's ID is required field and must be unique for gantt chart live edit purposes. You can set any custom field in your raw data like this:
var rawdata = [{
id: 13,
name: "Equipment#1",
periods: [
{
id: "task1",
start: Date.UTC(2017, 4, 6),
end: Date.UTC(2017, 4, 7),
periodCustomName: "Task 1" //This value will be used in tooltip's title.
}
]
}];
Since the data is ready, you have to set custom title format for timeline's tooltip:
//Getting gantt chart's timeline to work with its tooltip.
var timeline = chart.getTimeline();
//Gettnig timeline's tooltip.
var tlTooltip = timeline.tooltip();
//Setting tooltip title format function to access your custom raw data field.
tlTooltip.titleFormat(function() {
//If period is hovered.
if (this.period) {
//Return periodCustomName-field if specified.
return this.period.periodCustomName || this.getData('name');
}
//Else return name of data item ("Equipment#1")
return this.getData('name');
});
I have two databases with similar data (organized differently) and I've created a view for each one returning the same response. I have notice that the time response of the query is different even returning the same response, one being 3182ms, other being 217ms approximately, having queried 5 times.
I query both using:
curl -x GET ...db1/_design/query1/view/q1?group=true and
curl -x GET ...db2/_design/query1/view/q1?group=true.
I have checked the data sizes of the design documents using curl -x GET ...db1/_design/query1/_info. The design data size of the first is 146073878 bites and the second is 3739596 bites.
I thought both should have the same size, because they return the same view, and i havent used any filters, both views beeing equal.
Somebody can explain me why the same view created by different databases have different sizes?
My data is organized using two differents roots, but the same data, changing only the root:
Customer data in the root:
{
"c_customer_sk": 65836,
"c_first_name": "Frank",
"c_last_name": "White",
"store_sales": [
{
"ss_sales_price": 20.24,
"ss_ext_sales_price": 1012,
"ss_coupon_amt": 0,
"date": [
{
"d_month_seq": 1187,
"d_year": 1998
}
],
"item": [
{
"i_item_sk": 10454,
"i_item_id": "AAAAAAAAGNICAAAA",
"i_item_desc": "Results highlight as patterns; so right years show. Sometimes suitable lips move with the critics. English, old mothers ought to lift now perhaps future managers. Active, single ch",
"i_current_price": 2.88,
"i_class": "romance",
"i_category_id": 9,
"i_category": "Books"
}
]
},
{
"ss_sales_price": 225,
"ss_ext_sales_price": 1023,
"ss_coupon_amt": 0,...
View function for customer in the root:
function(doc)
{
for each (store_sales in doc.store_sales) {
var s=store_sales.ss_ext_sales_price;
if(s==null){s=0}
for each (item in store_sales.item){
var item_id=item.i_item_id;
var item_desc=item.i_item_desc;
var category=item.i_category;
var class=item.i_class;
var price=item.i_current_price;}
if(category=="Music" || category=="Home" || category=="Sports"){
for each (date in store_sales.date){
var g=date.d_month_seq;}
if (g>=1200 && g<=1211){
emit({item_id:item_id,item_desc:item_desc, category:category, class:class, current_price:price},s);
}
}}}
reduce:_sum
Example of answer:
key:
{"item_id": "AAAAAAAAAAAEAAAA", "item_desc": "Rates expect probably necessary events. Circumstan", "category": "Sports", "class": "optics", "current_price": 3.99}
Value:
106079.49999999999
Item data in the root:
{
"i_item_sk": 10454,
"i_item_id": "AAAAAAAAGNICAAAA",
"i_item_desc": "Results highlight as patterns; so right years show. Sometimes suitable lips move with the critics. English, old mothers ought to lift now perhaps future managers. Active, single ch",
"i_current_price": 2.88,
"i_class": "romance",
"i_category_id": 9,
"i_category": "Books",
"store_sales": [
{
"ss_sales_price": 20.24,
"ss_ext_sales_price": 1012,
"ss_coupon_amt": 0,
"date": [
{
"d_month_seq": 1187,
"d_year": 1998
}
],
"customer": [
{
"c_customer_sk": 65836,
"c_first_name": "Frank",
"c_last_name": "White",
}
]
},
{
"ss_sales_price": 225,
"ss_ext_sales_price": 1023,
"ss_coupon_amt": 0,...
View for item on root:
function(doc)
{
var item_id=doc.i_item_id;
var item_desc=doc.i_item_desc;
var category=doc.i_category;
var class=doc.i_class;
var price=doc.i_current_price;
if(category=="Music" || category=="Home" || category=="Sports"){
for each (store_sales in doc.store_sales) {
var s=store_sales.ss_ext_sales_price;
if(s==null){s=0}
for each (date in store_sales.date){
var g=date.d_month_seq;}
if (g>=1200 && g<=1211){
emit({item_id:item_id,item_desc:item_desc, category:category, class:class, current_price:price},s);
}
}}}
reduce:_sum
Returning the same answer.
I have made the cleanup and compaction of the designs and the time response of the database which the itens data are in the root is much faster, and the sizes of the data size is smaller too, but I dont know why.
Can someone explain me?
could it be a difference of database compaction? When you replicate an existing databases to an empty one, only the last revision of each documents are sent to the new one, making it potentially way lighter. The same applies to views
Modifying an element using set of a KendoUI grid removes the selection.
If a have a KendoUI DataSource defined as:
var dataSource = new kendo.data.DataSource({
data : [
{ "id": 1, "item": "item1", "value": "foo" },
{ "id": 2, "item": "item2", "value": "foo" },
{ "id": 3, "item": "item3", "value": "foo" },
{ "id": 4, "item": "item4", "value": "foo" }
],
pageSize: 5
});
and the grid as:
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
columns : [
{ field: "item", title: "Item" },
{ field: "value", title: "Value" }
],
selectable: "row"
}).data("kendoGrid");
If I click in a row (select it) and then update the model using the following code:
dataSource.data()[0].set("value", "bar");
The selection gets lost.
Sample code in JSFiddle here
Instructions:
Select any row.
Click the button for changing the value of the first row.
Is there any way of preserving selection when updating a local DataSource?
This is expected behavior when a change event of the dataSource occurs the Grid reacts and it is redrawn. You can silently update the field like this:
dataSource.data()[0].value = "bar";
However this will not trigger the change event and the Grid wont be updated either.
To preserve the selection of the Grid between 'refreshes' you can use the approach covered in this code library article. You can store them in a cookie or in the memory, it is up to you.
Regards
I was able to find solution for a very similar problem. I tried to select next row after modifying selected row, but updating data item cleared selection.
The trick was to save data-uid of the element to be selected. After update, I simply select element by uid.
var selected = grid.select();
var next = selected.next();
var nextUid = next.data("uid");
var dataItem = grid.dataItem(selected);
if (dataItem) {
dataItem.set("value", dataItem.get("value") - 1);
if (next.length)
grid.select($("#grid").find("*[data-uid='" + nextUid + "']"));
}
You can try it here.