Do not show the missing (detatime) data in the Highchart Area Charts - highcharts
Although there is a 9 hour data interruption on 3 February, data seems to have arrived.
data: [
[Date.UTC(2018,1,2,0),308.5],
[Date.UTC(2018,1,2,1),273],
[Date.UTC(2018,1,2,2),271],
[Date.UTC(2018,1,2,3),304],
[Date.UTC(2018,1,2,4),302],
[Date.UTC(2018,1,2,5),301],
[Date.UTC(2018,1,2,6),311.5],
[Date.UTC(2018,1,2,7),329.5],
[Date.UTC(2018,1,2,8),370.5],
[Date.UTC(2018,1,2,9),533.5],
[Date.UTC(2018,1,2,10),728],
[Date.UTC(2018,1,2,11),739],
[Date.UTC(2018,1,2,12),744],
[Date.UTC(2018,1,2,13),740],
[Date.UTC(2018,1,2,14),748.5],
[Date.UTC(2018,1,2,15),751],
[Date.UTC(2018,1,2,16),765],
[Date.UTC(2018,1,2,17),730],
[Date.UTC(2018,1,2,18),789.5],
[Date.UTC(2018,1,2,19),778.5],
[Date.UTC(2018,1,2,20),762],
[Date.UTC(2018,1,2,21),743.5],
[Date.UTC(2018,1,2,22),356.5],
[Date.UTC(2018,1,2,23),250],
[Date.UTC(2018,1,3,0),185.5],
[Date.UTC(2018,1,3,1),111],
[Date.UTC(2018,1,3,10),117.5],
[Date.UTC(2018,1,3,11),750],
[Date.UTC(2018,1,3,12),673.5],
[Date.UTC(2018,1,3,13),730.5],
[Date.UTC(2018,1,3,14),756.5],
[Date.UTC(2018,1,3,15),733],
[Date.UTC(2018,1,3,16),759.5],
[Date.UTC(2018,1,3,17),763.5],
[Date.UTC(2018,1,3,18),776],
[Date.UTC(2018,1,3,19),775],
[Date.UTC(2018,1,3,20),765.5],
[Date.UTC(2018,1,3,21),748],
[Date.UTC(2018,1,3,22),356.5],
[Date.UTC(2018,1,3,23),259],
[Date.UTC(2018,1,4,0),260],
[Date.UTC(2018,1,4,1),239],
[Date.UTC(2018,1,4,2),234],
[Date.UTC(2018,1,4,3),244],
[Date.UTC(2018,1,4,4),246],
[Date.UTC(2018,1,4,5),247],
[Date.UTC(2018,1,4,6),250.5],
[Date.UTC(2018,1,4,7),275],
[Date.UTC(2018,1,4,8),340],
[Date.UTC(2018,1,4,9),485],
[Date.UTC(2018,1,4,10),711.5],
[Date.UTC(2018,1,4,11),714.5],
[Date.UTC(2018,1,4,12),731],
[Date.UTC(2018,1,4,13),743],
[Date.UTC(2018,1,4,14),756.5],
[Date.UTC(2018,1,4,15),761.5],
[Date.UTC(2018,1,4,16),752],
[Date.UTC(2018,1,4,17),808],
[Date.UTC(2018,1,4,18),736.5],
[Date.UTC(2018,1,4,19),772],
[Date.UTC(2018,1,4,20),760.5],
[Date.UTC(2018,1,4,21),741],
[Date.UTC(2018,1,4,22),390],
[Date.UTC(2018,1,4,23),219.5]]
}],
I do not want this to happen.
I do not want to see anything in this area. I can not remove this area. Can you look at the codes and tell me how to remove this area?
http://jsfiddle.net/f9emysax/
Related
Vaadin 14 FlagItems not aligned correctly on ListSeries
I've got a problem regarding the FlagItem in Vaadin 14.
I'm trying to set a FlagItem for a specific point in a ListSeries, I'm doing this the following way:
PlotOptionsFlags plotOptionsFlags = new PlotOptionsFlags();
plotOptionsFlags.setOnSeries(wageEntry.getEmployeeCode());
plotOptionsFlags.setShape(FlagShape.SQUAREPIN);
plotOptionsFlags.getTooltip().setPointFormat("Wage: {point.y}");
plotOptionsFlags.getTooltip().setHeaderFormat("");
plotOptionsFlags.setShowInLegend(false);
DataSeries flagsSeries = new DataSeries();
flagsSeries.setName(wageEntry.getEmployeeCode().concat(" Current Wage"));
flagsSeries.setPlotOptions(plotOptionsFlags);
for (WageEntry wage : employeeWageEntries) {
if (wage.getWageYear() == LocalDate.now().getYear()) {
flagsSeries.add(new FlagItem(wage.getAge() - 22, wage.getEmployeeCode().concat(" - ").concat(String.valueOf(wage.getWageAmount()))));
}
}
comparisonChartConfiguration.addSeries(flagsSeries);
As you can see, I set the x value relative to the age of an entry, and the text. More over the FlagItem is only created when a certain condition is met. (I used the Vaadin Chart Demo as reference: https://demo.vaadin.com/charts/Flags)
The problem now is, that when the chart is being built, the FlagItem appear on the x axis instead as you can see here:
I really don't understand why this happens.
Maybe it's useful to know, that on the chart three RangeSeries and multiple ListSeries are being drawn.
Thanks for the help!
So I've found out where the problem was. It was something that wasn't added to the code above, so please have mercy. The issues lied withing the fact that I didn't add the ListSeries to the comparisonChartConfiguration before creating the flagsSeries. In short, you need to add the Series you want to append flags on to the ChartConfiguration before you can attach the flagsSeries onto another.
TradingView drawing future area
I'm curious about TradingView.
If a figure is drawn at future coordinates rather than the current point of view, I am curious how to get the corresponding coordinates.
My coordinates are the 359th most up-to-date in the 360 array.
But it's up to date with bars so the future part doesn't work when drawing.
I want to find a way to get future coordinates.
I am using version 1.13
oh sorry I didn't ask in detail.
My question is I want to bring back a part I drew in the past.
However, the drawing line is drawn vertically because the linetool in the chart does not have candle data on the screen yet, so it must be drawn in the nodata zone.
But bybit doesn't. Can you help me?
const widgetOptions = {
debug: false,
symbol: this.props.symbol,
datafeed: Datafeed,
interval: this.props.interval,
container_id: this.props.containerId,
library_path: this.props.libraryPath,
locale: getLanguageFromURL() || 'en',
disabled_features: ['use_localstorage_for_settings'],
enabled_features: ['study_templates'],
charts_storage_url: this.props.chartsStorageUrl,
charts_storage_api_version: this.props.chartsStorageApiVersion,
client_id: this.props.clientId,
user_id: this.props.userId,
fullscreen: this.props.fullscreen,
autosize: this.props.autosize,
studies_overrides: this.props.studiesOverrides,
overrides: {
"mainSeriesProperties.showCountdown": true,
"paneProperties.background": "#131722",
"paneProperties.vertGridProperties.color": "#363c4e",
"paneProperties.horzGridProperties.color": "#363c4e",
"symbolWatermarkProperties.transparency": 90,
"scalesProperties.textColor" : "#AAA",
"mainSeriesProperties.candleStyle.wickUpColor": '#336854',
"mainSeriesProperties.candleStyle.wickDownColor": '#7f323f',
}
};
Datafeed.onReady(() => {
const widget = (window.tvWidget = new window.TradingView.widget(widgetOptions));
widget.onChartReady(() => {
console.log('Chart has loaded!')
});
});
I need to solve this part, but I still haven't been able to solve it
enter image description here
ok i solved it It is to use the response value offset. The solution was to look at the type of interval through the corresponding offset and add the corresponding time interval. The best thing is to modify it to be able to draw in a future space, but I'm not sure how to do that. enter image description here
How do I indent a bulleted list with the Google Docs API
Starting with a Google Doc that looks like: * Item I'm hoping to make a series of API calls to turn the doc into: * Item - Subitem But, I can't figure out how to do this with the API. A CreateParagraphBulletRequest doesn't have an indent level I can specify. The documentation suggests: The nesting level of each paragraph will be determined by counting leading tabs in front of each paragraph. To avoid excess space between the bullet and the corresponding paragraph, these leading tabs are removed by this request. This may change the indices of parts of the text. However, prepending tabs to the beginning of an InsertTextRequest will prepend the tab character, rather than changing the indent: * Item * Subitem Does anyone have any ideas for what I may be doing wrong?
I believe your goal as follows.
You want to create a nested list using Google Docs API.
At first, a list, which has one item as 1st level, is existing in the Google Document. It's as follows.
- item1
Under this situation, you want to insert a nested item to the existing list as 2nd level. It's as follows.
- item1
- item2
Points for achieving your goal:
In this case, in order to insert the item to the existing list as the 2nd level, in my experience, I couldn't directly insert it. In my case, as a workaround, I'm using the following flow.
Insert a text \n\titem2\n for 2nd level using insertText request.
In this case, the 1st level is also inserted. It seems that in order to insert the deep level items, it is required to set from the 1st level and convert to the list with the bullets.
Using createParagraphBullets, it gives the bullets to the list. By this, \t is converted to the nested items.
Remove the bullet of the 1st level.
Remove the line break.
Sample request body:
When above flow is reflected to the request body of the method of batchUpdate in Docs API, it becomes as follows.
{
"requests": [
{
"insertText": {
"text": "\n\titem2\n",
"location": {
"index": 7
}
}
},
{
"createParagraphBullets": {
"range": {
"startIndex": 1,
"endIndex": 15
},
"bulletPreset": "BULLET_DISC_CIRCLE_SQUARE"
}
},
{
"deleteParagraphBullets": {
"range": {
"startIndex": 7,
"endIndex": 8
}
}
},
{
"deleteContentRange": {
"range": {
"startIndex": 7,
"endIndex": 8
}
}
}
]
}
Result:
When above request body is used, the following result is obtained.
Before:
After:
Note:
Although I had looked for other methods for using Docs API without changing the existing list, unfortunately, I cannot still find them. I thought that in order to insert the deep nested items to the existing list, in the current stage, the items might be required to be given from 1st level using \t. Unfortunately, I'm not sure whether this is the specification. So, for example, how about requesting this for the issue tracker as the future request? Ref
References:
Working with lists
documents.batchUpdate
Cytoscape layout to use node attributes as coordinates?
Is there a way to use x,y coordinates stored as attributes of each node to layout a graph using the coordinates that were calculated by another program? And if not, would it be possible to implement this somehow - how does one get started on this? Is there a standard way how to provide the node positions to the cytoscape.js web viewer somehow? Background: it is trivial to use Python networkx to calculate some layouts which are not supported in Cytoscape, and it would also be trivial to store the coordinates as node attributes. All that would then be need is some way for Cytoscape to use those coordinates to find node positions instead of using a layout algorithm.
This is a quite easy thing to do. Many examples on use this functionlity in the demos, as you can see here:
1: FCose Demo
2: Cose Blicent Demo
3: d3-force Demo
4: Euler Compound Demo
5: Spread Demo
As you can see, there are an abundance of examples for this in the demos, but also in the docs. You can see one here and here:
// can use reference to eles later
var eles = cy.add([
{ group: 'nodes', data: { id: 'n0' }, position: { x: 100, y: 100 } },
{ group: 'nodes', data: { id: 'n1' }, position: { x: 200, y: 200 } },
{ group: 'edges', data: { id: 'e0', source: 'n0', target: 'n1' } }
]);
The json used in the .add() function can be created in your js application or directly in Python and added to the graph as some of the examples do.
In general, you should take some time and skim through through the docs. The ability to position nodes via x and y is quite basic and is one of the first pages in the docs.
If you don't understand the description in the docs and the examples I provided, please edit your question and add your current code as a Minimal, Reproducible Example, where you can show your efforts to implement the positioning.
Edit:
As #maxkfranz pointed out, the preset layout plays a big role here. The documentation states this in the Initialisation Chapter:
If you want to specify your node positions yourself in your elements JSON, you can use the preset layout — by default it does not set any positions, leaving your nodes in their current positions (i.e. specified in options.elements at initialisation time).`
I am new to using Cytoscape so things that are "easy" are not so easy for me. I often don't even know the right way to ask a question. Everyone has things that are hard and things that are easy, and step by step we expand our knowledge so what is hard today may be easy tomorrow. Anyway, here is something that may be a part of the solution you are looking for: In the Cytoscape desktop application, you can create a "Style" that maps a node attribute to "X Location" and another node attribute to "Y Location".
Highcharts format
I am trying to work-out the format for Highcharts.
In one of the demos, there is the following call:
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) {code to build the chart
When the call is made, data similar to the following is returned:
callback([
/* 2009-01-01 */
[1230771600000, -5.8, 0.1],
[1230858000000, -4.1, 1.4],
[1230944400000, -0.5, 4.1],
[1231030800000, -8.9, -0.7],
[1231117200000, -9.7, -3.7],
[1231203600000, -3.4, 3.2],
[1231290000000, -3.9, -0.2],
[1231376400000, -2.4, 6.7],
[1231462800000, 3.8, 6.9],
[1231549200000, 3.1, 6.8]
]);
The problem I am having is that I want to deliver the data through my own AJAX call that will have a result that will contain the graph data as well as some other things. However, I cannot seem to get the format correct so HC can read it. I read their pages about the formats, but with no luck.
I think the problem is the 'callback([]);' container needs to be removed, but when I do that, the data is not displayed in the chart.
lee
i ran into the same problem once. your json has to be parsed before giving it into highcharts series
high charts series accepts an array in this format
[[float,float],[float,float]]
whereas your unparsed json would try to give
[[String,String],[String,String]]
after removing your 'callback([]);' container , you need to parse the individual '[x,y]' points before supplying it to the series object
one way of doing it(in js):
String[] jsonComponents= jsonWithoutContainer.split(",");
Iterate each of the jsonComponents array.
for each jsonComponent - String[] xyComps=jsonComponent.split(",");
x=parseFloat(xyComp[0]); y1=parseFloat(xyComp[1]); y2= parseFloat(xyXomp[2]);
put these in an array, using array1.push(x,y1) and the supply it to the chart.series(array1)
This callback is used for JSONP. You can simply use standard JSON to achieve that: [[1230771600000, -5.8, 0.1], [1230858000000, -4.1, 1.4], [1230944400000, -0.5, 4.1] ... ] Without any comments, function etc. If data would look this way, it should work.
Ok, I figured this out. When jQuery loads all the data, it converts it into a string. Before it can be used by Highcharts, it needs to be converted back to an object using $.parseJSON(data). Thanks Pawel and Austin for trying to help.