Ingo

Hello, I'm using FusionCharts to display candlestick charts like so: I would like to draw to horizontal lines into the chart (one representing a stop-loss level, and the other one a target level). I read about this here: https://www.fusioncharts.com/dev/chart-guide/chart-configurations/div-lines-and-grids and assume that this might point me in the right direction. However, when I implement that into my JS code, the chart does not display any changes to the grid and does not show those minimum and maximum lines. What am I doing wrong? Here is the code: var fusionTable = new FusionCharts.DataStore().createDataTable(data, schema); chart = new FusionCharts({ type: 'timeseries', renderAt: 'chart-container', width: "100%", height: 600, dataSource: { data: fusionTable, chart: { "theme": "fusion", "adjustDiv": "0", "yAxisMaxvalue": "0.7", "yAxisMinValue": "0.3", "numDivLines": "10", "divLineColor": "#6699cc", "divLineAlpha": "60", "divLineDashed": "0" }, caption: { "text": "RatioChart" }, yAxis: [{ "plot": { "value": { "open": "Open", "high": "High", "low": "Low", "close": "Close" }, "type": "candlestick" }, "format": { "prefix": "" }, "title": "Ratio long/short", "orientation": "right" }], } }).render(); Many thanks, Ingo

Hi Srishti, that works perfectly, thank you! Cheers Ingo

Hi Srishti, thank you for sending me the reviewed code; I have hence switched from the PHP wrapper to JS as you were helping me with how to implement that successfully. Cheers Ingo

Hi everyone, I'm new to FusionCharts and use it with the PHP Wrapper under Laravel 6. I'm handing over the following weekly data to a candlestick chart (format of the numbers following the data is open, high, low, close, volume): "[["2020-09-09",0.54,0.56,0.54,0.56,14903209],["2020-09-04",0.51,0.51,0.49,0.49,20382984],["2020-08-28",0.51,0.51,0.5,0.51,16792110],["2020-08-21",0.53,0.53,0.5,0.5,15691199],["2020-08-14",0.51,0.52,0.51,0.52,21492713],["2020-08-07",0.47,0.52,0.47,0.51,19886343],["2020-07-31",0.48,0.48,0.48,0.46,17485574],["2020-07-24",0.48,0.48,0.48,0.48,16540650],["2020-07-17",0.48,0.48,0.47,0.48,17398400],["2020-07-10",0.43,0.48,0.43,0.48,16841800],["2020-07-02",0.39,0.43,0.39,0.43,21377289],["2020-06-26",0.41,0.41,0.39,0.39,27275096],["2020-06-19",0.41,0.41,0.4,0.41,38344749],["2020-06-12",0.43,0.45,0.41,0.41,26191767],["2020-06-05",0.41,0.43,0.4,0.43,34855408],["2020-05-29",0.42,0.42,0.4,0.41,26206314],["2020-05-22",0.39,0.41,0.39,0.41,26546951],["2020-05-15",0.39,0.39,0.37,0.39,28338140],["2020-05-08",0.43,0.43,0.4,0.4,25853658], This will draw me a chart like so, but upon zooming in to the max you can see that Fusioncharts seems to aggregate data on a two-weekly-basis rather than showing individual weeks (such as 2020-09-09, 2020-09-04, 2020-08-28 etc.): Is there a way in chart configuration to prevent this behaviour? Here is my config in my Laravel view blade: <!-- Include fusioncharts core library --> <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script> <!-- Include gammel theme --> <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.gammel.js"></script> @php $data = $fusionchart_json; $schema = '[{ "name": "Date", "type": "date", "format": "%Y-%m-%d" }, { "name": "Open", "type": "number" }, { "name": "High", "type": "number" }, { "name": "Low", "type": "number" }, { "name": "Close", "type": "number" }, { "name": "Volume", "type": "number" }]'; $fusionTable = new FusionTable($schema, $data); $timeSeries = new TimeSeries($fusionTable); $timeSeries->AddAttribute('chart', '{"theme":"fusion"}'); $timeSeries->AddAttribute('caption', '{"text":"RatioChart"}'); $timeSeries->AddAttribute('subcaption', '{"text":""}'); $timeSeries->AddAttribute('yaxis', '[{"plot":{"value":{"open":"Open","high":"High","low":"Low","close":"Close"},"type":"candlestick"},"format":{"prefix":""},"title":"Ratio long/short", "orientation":"right"}]'); // chart object $Chart = new FusionCharts( "timeseries", "RatioChart" , "1200", "768", "chart-container", "json", $timeSeries ); // Render the chart $Chart->render(); @endphp <div id="chart-container"></div> <p><a href="/" class="btn btn-secondary" role="button">Back</a></p> </div> Many thanks in advance!

Hello all, I'm trying to get FusionCharts running under Laravel 6 inside a blade view. Using the code for candlesticks provided under https://www.fusioncharts.com/fusiontime/examples/interactive-candlestick-chart?framework=javascript, I have: <!-- Include fusioncharts core library --> <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script> <!-- Include gammel theme --> <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script> <script type="text/javascript"> Promise.all([ loadData( "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/candlestick-chart-data.json" ), loadData( "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/candlestick-chart-schema.json" ) ]).then(function(res) { const data = res[0]; const schema = res[1]; const dataStore = new FusionCharts.DataStore(); const dataSource = { chart: {}, caption: { text: "Apple Inc. Stock Price" }, subcaption: { text: "Stock prices from January 1980 - November 2011" }, yaxis: [ { plot: { value: { open: "Open", high: "High", low: "Low", close: "Close" }, type: "candlestick" }, format: { prefix: "$" }, title: "Stock Value" } ] }; dataSource.data = dataStore.createDataTable(data, schema); new FusionCharts({ type: "timeseries", renderAt: "chart-container", width: "100%", height: "500", dataSource: dataSource }).render(); }); </script> <div id="chart-container"></div> Upon retrieving the view, no chart is displayed and I get the following error in Chrome dev tools: Uncaught ReferenceError: loadData is not defined How can I resolve that error? Many thanks!

Hi Srishti, thank you, this is now working fine. Since my data and schema are not stored in files but in arrays that get passed from the Laravel controller to the view, how would I correctly reference the array variables? I've tried something like this (also deleting the fetch() altogether, but to no avail: var chart; Promise.all([ fetch( {{ $data }} ), fetch( "[{ "name": "Date", "type": "date", "format": "%Y-%m-%d" }, { "name": "Open", "type": "number" }, { "name": "High", "type": "number" }, { "name": "Low", "type": "number" }, { "name": "Close", "type": "number" }, { "name": "Volume", "type": "number" }]" ) ]).then(function(res) { Promise.all([ res[0].json(), res[1].json() ]).then(function(res) { Many thanks again, Ingo

Hi Srishti, thank you for pointing me in the right direction. Since I'm using the PHP Wrapper, I'm not sure how to set the parameters based on your Javascript fiddle. I have added: $timeSeries->AddAttribute('xaxis', '{"binning":{ "year": "[]", "month": "[]", "day": "[1]", "hour": "[]", "minute": "[]", "second": "[]", "millisecond": "[]" }}'); but, unfortunately, that does not seem to work as the chart looks like before, also when zooming in to the max. Could you please let me know what the correct syntax for the PHP wrapper would be? Many thanks, Ingo