Jump to content
JChartFX Community

Raj Patel

Members
  • Content count

    5
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Raj Patel

  • Rank
    Newbie
  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

    Can this be achieved by combining with the bar chart?
  4. 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?
  5. 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/
×