Ravindu89

Members
  • Content Count

    22
  • Joined

  • Last visited

Everything posted by Ravindu89

  1. I have to make a chart that fills the area between two lines looks like in below. I have calculated and drawn two lines and connected each lines (See below image) And I have used 2 approaches to complete this task. drawPolygon Using color for beginFill and both time I have failed. (See in below) Please advice me.
  2. The chart that is built on PIXI had sharpness problems and those sharpness problems were solved after avoiding half-integers and linestyle alignment. But now chart has some dark spot when plotting a diversified data in a large number of a dataset and for a small dataset, can't see any dark spot on the chart. I am not sure changes that have done for solving sharpness is causing this problem. Kindly support me to solve this problem.
  3. Thank you all for supporting me, Chart blurry problem has been solved after, Added PIXI 4.8.1 lib All pixel point values were rounded to integers Setting 0 value to alignment property of PIXI.Graphics lineStyle
  4. Thank you all for supporting me, Chart blurry problem has been solved after, Added PIXI 4.8.1 lib All pixel point values were rounded to integers Setting 0 value to alignment property of PIXI.Graphics lineStyle
  5. Is there a way to on/off anti-aliasing of graphics objects manually? I am writing stock chart on top of PIXI.js and it has several shapes. If I set antialiasing property true when creating a renderer all chart shapes are antialiased (Straight shapes are also applied antialiased). Because of antialiased shapes, the chart becomes blurry. Therefore, if I have a way to on/off antialiasing each PIXI graphics objects manually I think chart will become sharp. Candle Chart - No need to be antialiased Line Chart - need to be antialiased Would like to hear any advice on the subject. Thanks in advance!
  6. @ivan.popelyshev or anyone, Kindly give me a support to get through this.
  7. You mean half odd integers should be rounded! or I think that is not an answer from me that you expected. 😊
  8. Thank you all for supporting me. As @jonforum and @ivan.popelyshev suggested, I did several changes on my project, Scale mode of PIXI is changed to NEAREST (Texts were become sharper) Used Pixi dev release Off antialiasing when creating renderer. After chart sharpness came to canvas chart level. But line chart needs antialiasing, So is there a way to on/off anti-aliasing of graphics object manually. Now chart is looking like below,
  9. I have two charts that one is used 2d canvas techniques and another one is based on WebGL (Ongoing development). Between these two charts, 2d canvas chart sharpness is far better than WebGL chart. I have done several workarounds to improve WebGL chart sharpness but still, I couldn't bring WebGL chart up to 2d canvas chart level. 2d Canvas Chart WebGL Chart Would like to hear any advice on the subject. Thanks in advance!
  10. @ivan.popelyshev Thanks for taking your valuable time to support me.
  11. I need to decorate my area chart look like below. I've tried jonforum suggestion. But it didn't work. @ivan.popelyshev Would you mind check my sample fiddle and give some suggestion to overcome this problem.
  12. Thank you, Ivan. I have done sample area chart on fiddle. Please support me. https://jsfiddle.net/ravindu89/vsvL9knj/6/
  13. Is there a way to apply PIXI.Filter on PIXI.Graphics Polygon.? When I applied a gradient filter on area chart (PIXI.Graphics Polygon), that filter was applied on some rectangular space, not on polygon shape. before applying gradient filter (Polygon is colored in blue color):- after applying gradient filter:- Would like to hear any advice on the subject. Thanks in advance!
  14. yes as you mentioned the previous post I have set this polygon as line graphics object hit area. But the bottom area of chart (outside of polygon area) is also listening to action.
  15. Thank you all for this lot of advice. I have used Ivan posted method and but still down part of the line chart is sensitive to mouse action. Attached figures are shown my implementation. (I have colored hit area polygon' outline to easy read) Hit Area polygon point array I need only outlined polygon area is sensitive to mouse action. Please support me.
  16. Thank you all for quick replies. Hi PsichiX, I have to achieve two goals, When clicking on a particular line, Double left click - open property window of that line (Need to pass some unique id with that action to identify that line) Single Right click - remove the added line (Need to pass some unique id with that action to identify that line) When hovering on a particular line, Value tooltip should be popped up. Examples how the chart looks on in that above status are shown in below.
  17. Is there a way to bind mouse action on PIXI.Graphics line?. I have used below codes to bind action on the line. But the action is bound on all chart area I think, hitArea is not correctly set. this.strategyGraphic.interactive = true; this.strategyGraphic.hitArea = this.strategyGraphic.getBounds(); this.strategyGraphic.click = function (data) { alert('hit rect'); } Would like to hear any advice on the subject. Thanks in advance!
  18. Thank you for your quick reply, I instantiate Graphics constructor like below, new PIXI.Graphics(true); Yes, I am working with half-integers. but I didn't get what you mean in above that 1-pixel line will be blurry. Could you explain more about this topic?
  19. I am building a stock chart on PIXI.js. To display different chart styles on chart, I am using PIXI.graphics' drawRect, drawPolygon, lineTo functions. Graphics, Edges, grid lines, text are not sharp in this chart. I would like to say that I've tried several workarounds from the web to make this chart sharp. But those didn't help me. Examples how the chart looks on in candle and area chart styles and renderer parameters are shown in below. const renderer = PIXI.autoDetectRenderer(canvas.width, canvas.height, {view: canvas, antialias: true, transparent: false, resolution: 1}); renderer.view.style.position = 'relative'; renderer.view.style.display = 'block'; renderer.autoResize = true; renderer.backgroundColor = 0xFFFFFF; Area Chart Style Candle Chart Style Would like to hear any advice on the subject. Thanks in advance!
  20. Thank you for a quick response. Its mean by enabling native line mode is working faster than Pixi line implementation(my first attempt) in a current situation.
  21. Thank you very much. after changing to native line mode it's working fine. And I have another question, I'm going to evolve this basic chart to advance speedy data-loading chart. That's why I've chosen WebGL based pixi.js to build my charting framework. Therefore could I know the charting performance can be impacted by this change as I am a newbie for this PIXI framework. It's great pleasure if you can give a descriptive answer.
  22. I'm building line chart using the pixi.js lineTo method. The problem is the lines are shrinking when a distance between points becomes smaller. For testing purpose, I'm trying to draw 200,000 points on that chart. Drawing function: var dataSet = ohlcStore[chartProperty.sym]; if (dataSet && dataSet.length > 0) { var plot = new PIXI.Graphics(); plot.setTransform(columnSize, (renderer.view.height - rowSize) + (Val_min * yScale), 1, -1 * yScale); plot.lineStyle(0.6, chartProperty.lineColor, 1); plot.moveTo(0, dataSet[0].close); for (i = 1; i < dataSet.length; i++) { try { plot.lineTo(i * xScale, dataSet[i].close); } catch (x) { console.error("Error - " + x); } } plot.endFill(); context.addChild(plot); } Result drawing is attached along with this. In this case, xScale is 0.006475032375161876 and Using the canvas render gives correct results. Trying to search for the problem, I've found that the Pixi.js may have an issue with non-integer values. Therefore I've rounded values to integer but the problem didn't solve. Please support to fix this problem.