Candlestick chart keeps showing aggregated data even on max zoom

[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!

 

[Srishti Jaiswal]

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

[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

[Srishti Jaiswal]

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 September 16, 2020 by Srishti Jaiswal

[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

[Srishti Jaiswal]

Hi Ingo,

Glad to know that the provided solution worked for you as per your requirement.

Thanks,

Srishti Jaiswal