Jump to content
JChartFX Community

Raj Patel

Members
  • Content count

    5
  • Joined

  • Last visited

Everything posted by Raj Patel

  1. Tooltip for Candle Chart

    At the moment it does not display any popup window. What I would I like to have as it appears in the picture below. Change as hover over a chart.
  2. Tooltip for Candle Chart

    Could you guide me on how to configure and display the tooltip on the top? At the moment chart is not able to display any tooltip. <script type="text/javascript"> //$(document).ready(function($){ loadChart(); }) var chart1; var annLT; annLT = new cfx.annotation.Annotations();var annListLT = annLT.getList(); var annMT; annMT = new cfx.annotation.Annotations();var annListMT = annMT.getList(); var annLTBB; annLTBB = new cfx.annotation.Annotations();var annListLTBB = annLTBB.getList(); var annMTBB; annMTBB = new cfx.annotation.Annotations();var annListMTBB = annMTBB.getList(); var annDiv; annDiv = new cfx.annotation.Annotations();var annListDiv = annDiv.getList(); var annEPS; annEPS = new cfx.annotation.Annotations();var annListEPS = annEPS.getList(); var annVol; annVol = new cfx.annotation.Annotations();var annListVol = annVol.getList(); function loadChart() { chart1 = new cfx.Chart(); chart1.getData().clear(); PassData2(); // AddBEC(); AddDiv(); AddEPS(); chart1.setGallery(cfx.Gallery.OpenHighLowClose); //chart1.setGallery(cfx.Gallery.Candlestick); chart1.getAxisY().setPosition(cfx.AxisPosition.Far); chart1.getAxisY().setForceZero(false); // chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Currency); chart1.getSeries().getItem(0).setColor("#99FF99"); // chart1.getSeries().getItem(1).setColor("#99FF99"); // chart1.getSeries().getItem(2).setColor("#FF9999"); chart1.getSeries().getItem(3).setColor("#9c9c9c"); chart1.getAxisX().setStep(60); chart1.getAxisY().getDataFormat().setDecimals(2); chart1.getAxisY().getLabelsFormat().setDecimals(2); chart1.getLegendBox().setVisible(false); //SB var series5 = chart1.getSeries().getItem(5); series5.setGallery(cfx.Gallery.Step); series5.setMarkerShape(cfx.MarkerShape.None); series5.setColor("#32CD32"); //LimeGreen series5.setVisible(document.getElementById("LTSwitch").checked); //SR var series6 = chart1.getSeries().getItem(6); series6.setGallery(cfx.Gallery.Step); series6.setMarkerShape(cfx.MarkerShape.None); series6.setColor("#ff0000"); // Opaque Red series6.setVisible(document.getElementById("LTSwitch").checked); //UB var series7 = chart1.getSeries().getItem(7); series7.setGallery(cfx.Gallery.Step); series7.setMarkerShape(cfx.MarkerShape.None); series7.setColor("#32CCDD"); //LimeGreen series7.setVisible(document.getElementById("MTSwitch").checked); //UR var series8 = chart1.getSeries().getItem(8); series8.setGallery(cfx.Gallery.Step); series8.setMarkerShape(cfx.MarkerShape.None); series8.setColor("#4FFF0000"); //pink series8.setVisible(document.getElementById("MTSwitch").checked); //UB0 - Downtrend resistance band var series9 = chart1.getSeries().getItem(9); series9 .setGallery(cfx.Gallery.Step); series9 .setMarkerShape(cfx.MarkerShape.None); series9 .setColor("#ff0000"); //red series9 .getLine().setWidth(2); //LB1 - Uptrend support band var series10 = chart1.getSeries().getItem(10); series10 .setGallery(cfx.Gallery.Step); series10 .setMarkerShape(cfx.MarkerShape.None); series10 .setColor("#0000ff"); //light blue series10 .getLine().setWidth(2); var volumePane = new cfx.Pane(); chart1.getPanes().add(volumePane); volumePane.getTitle().setText("Volume (in 100k)"); //volumePane.setProportion(1); chart1.getPanes().getItem(1).setProportion(.1); var volumeSeries = chart1.getSeries().getItem(4); volumeSeries.setPane(volumePane); volumeSeries.setGallery(cfx.Gallery.Bar); volumeSeries.setVolume(100); volumeSeries.conditionalVolume = true; volumeSeries.getAxisY().setScaleUnit(100000); volumeSeries.getAxisY().setPosition(cfx.AxisPosition.Far); volumeSeries.conditionalVolume = true; AddLT_Annotations(); AddMT_Annotations(); var ForecastLT = document.getElementById("LTForecast").checked; if(ForecastLT) {} else {chart1.getExtensions().remove(annLT);} var ForecastMT = document.getElementById("MTForecast").checked; if(ForecastMT) {} else {chart1.getExtensions().remove(annMT);} document.getElementById("LTSwitch").addEventListener("click", function() { var DisplayedLT = document.getElementById("LTSwitch").checked; if(DisplayedLT) {series5.setVisible(true);series6.setVisible(true);} else {series5.setVisible(false);series6.setVisible(false);} }); document.getElementById("MTSwitch").addEventListener("click", function() { var DisplayedMT = document.getElementById("MTSwitch").checked; if(DisplayedMT) {series7.setVisible(true);series8.setVisible(true);} else {series7.setVisible(false);series8.setVisible(false);} }); document.getElementById("STSwitch").addEventListener("click", function() { var DisplayedST = document.getElementById("STSwitch").checked; if(DisplayedST) { series9.setVisible(true); series10.setVisible(true); } else {series9.setVisible(false); series10.setVisible(false); } }); document.getElementById("LTForecast").addEventListener("click", function() { var ForecastLT = document.getElementById("LTForecast").checked; if(ForecastLT) {AddLT_Annotations();} else {chart1.getExtensions().remove(annLT);} }); document.getElementById("MTForecast").addEventListener("click", function() { var ForecastMT = document.getElementById("MTForecast").checked; if(ForecastMT) {AddMT_Annotations();} else {chart1.getExtensions().remove(annMT);} }); var divHolder = document.getElementById('ChartDiv'); chart1.create(divHolder); } function GetXAxisPosition(date, chart1) { var covertedAxisDate = cfx.Chart.dateToDouble(date); for (var i = 0; i < chart1.getData().getPoints() ; i++) { var datefromData = chart1.getData().getX().getItem(-1, i); if (datefromData == covertedAxisDate) { return i; } } } </script> OHLC_AAPL.js
  3. Comination Chart

    Is it possible to combine Candlestick chart, annotation chart including density chart? I have got chart working with Candlestick and annotation. I have made an attempt to draw one. However, I am struggling. Can you pls help. I have got an example of the chart on the jsfiddle. https://jsfiddle.net/lucidtrend/26b3xzks/9/
  4. Comination Chart

    Can this be achieved by combining with the bar chart?
  5. Comination Chart

    JuanC, Please have a look at the chart below, I am trying to achieve what my production system is producing. Is it possible to achieve it using any other method?
×