Ingo

Candlestick chart keeps showing aggregated data even on max zoom

Recommended Posts

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.):

image.thumb.png.e80e18e22bd496d71897995a98b6471d.png

 

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!

 

Share this post


Link to post
Share on other sites

Hi Ingo,

In FusionTime you can change the data binning hierarchy as per your requirement. Based on your dataset, to view the individual data plots you need to configure the "binning" property of the "xAxis" and set the bin array for the "day" unit to [1].

Please refer to this fiddle for the implementation: http://jsfiddle.net/av5xmqnL/

Documentation link: https://www.fusioncharts.com/dev/fusiontime/getting-started/change-default-aggregation#change-data-binning

Hope this will help.

Thanks,

Srishti jaiswal

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Hi Ingo,

Data binning is a product feature and it is not specific to any tech stack. 

The code you provided has some syntax errors hence you are not able to implement data binning. Please refer to below code for correct syntax:

$timeSeries->AddAttribute("xAxis", "{
      binning: {
        year: [],
        month: [],
        day: [1],
        hour: [],
        minute: [],
        second: [],
        millisecond: []
      }
    }");

Please implement the above code and share your observation.

Hope this will help.

Thanks,
Srishti Jaiswal

Edited by Srishti Jaiswal

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now