Calendar Chart cannot show multiple years records as in data set

[oLMHo]

I manually swapped the record using the demo code shown in here (http://lavacharts.com/#example-calendar). To be exact, I change

foreach (range(2, 5) as $month) {
    for ($a=0; $a < 20; $a++) {
        $day = rand(1, 30);
        $sales->addRow(array("2014-${month}-${day}", rand(0,100)));
    }
}

to

$sales->addRow(array("2015-1-1", 30));
$sales->addRow(array("2014-3-5", 40));

There should be two records, one from 2014, another from 2015. However, the resulting graph is like this:

Looks like the record of 2015 is totally missing, any ideas on how to resolve?

[kevinkhill]

My first thought might be you need to create two charts, one for each year, but I'm away from my pc at the moment, so I can't say for certain.

[oLMHo]

Hi, thanks for your reply. In https://google-developers.appspot.com/chart/interactive/docs/gallery/calendar, the Google Chart API seems can handle multiple year records pretty well.

In the case I mentioned in main thread, the 2014/2015 data both exist in the rendered client side code, I am not familiar with the Google Native API but I think there's something blocking the API to process the data of other years. For your reference, following is the rendered code:

<script type="text/javascript" src="//www.google.com/jsapi"></script><script type="text/javascript">window.lava = (function() {
  this.get              = null;
  this.event            = null;
  this.loadData         = null;
  this.register         = null;
  this.getLavachart     = null;
  this.charts           = {};
  this.registeredCharts = [];

  this.get = function (chartLabel, callback) {
    if (arguments.length < 2 || typeof chartLabel !== 'string' || typeof callback !== 'function') {
      throw new Error('[Lavacharts] The syntax for lava.get must be (str ChartLabel, fn Callback)');
    }

    lava.getLavachart(chartLabel, function (lavachart) {
      return callback(lavachart.chart);
    });
  };

  this.loadData = function (chartLabel, dataTableJson, callback) {
    lava.getLavachart(chartLabel, function (lavachart) {
      lavachart.data = new google.visualization.DataTable(dataTableJson, '0.6');

      lavachart.chart.draw(lavachart.data, lavachart.options);

      return callback(lavachart.chart);
    });
  };

  this.event = function (event, chart, callback) {
    return callback(event, chart);
  };

  this.register = function(type, label) {
    this.registeredCharts.push(type + ':' + label);
  };

  this.getLavachart = function (chartLabel, callback) {
    var chartTypes = Object.keys(lava.charts);
    var chart;

    var search = chartTypes.some(function (e) {
      if (typeof lava.charts[e][chartLabel] !== 'undefined') {
        chart = lava.charts[e][chartLabel];

        return true;
      } else {
        return false;
      }
    });

    if (search === false) {
      throw new Error('[Lavacharts] Chart "' + chartLabel + '" was not found');
    } else {
      callback(chart);
    }
  };

  this.redrawCharts = function() {
    var timer, delay = 300;

    clearTimeout(timer);

    timer = setTimeout(function() {
      for(var c = 0; c < lava.registeredCharts.length; c++) {
        var parts = lava.registeredCharts[c].split(':');

        lava.charts[parts[0]][parts[1]].chart.draw(
          lava.charts[parts[0]][parts[1]].data,
          lava.charts[parts[0]][parts[1]].options
        );
      }
    }, delay);
  };

  return this;
})();

window.addEventListener("resize", window.lava.redrawCharts);
</script><div id="sales_div"></div><script type="text/javascript">
if ( typeof lava.charts.CalendarChart == "undefined" ) { lava.charts.CalendarChart = {}; }

lava.charts.CalendarChart["Sales"] = {chart:null,draw:null,data:null,options:null,formats:[]};

if (!document.getElementById("sales_div")){console.error("[Lavacharts] No matching element was found with ID \"sales_div\"");}

lava.charts.CalendarChart["Sales"].draw = function() {
var $this = lava.charts.CalendarChart["Sales"];

$this.data = new google.visualization.DataTable({"cols":[{"type":"date","label":"Date"},{"type":"number","label":"Orders"}],"rows":[{"c":[{"v":"Date(2015,0,1,0,0,0)"},{"v":30}]},{"c":[{"v":"Date(2014,2,5,0,0,0)"},{"v":40}]}]}, 0.6);

$this.options = {"calendar":{"unusedMonthOutlineColor":{"stroke":"#ECECEC","strokeOpacity":0.75,"strokeWidth":1},"dayOfWeekLabel":{"color":"#4f5b0d","fontSize":16,"italic":true}},"title":"Cars Sold","noDataPattern":{"color":"#DDD","backgroundColor":"#11FFFF"},"colorAxis":{"values":[0,100],"colors":["black","green"]}};

$this.chart = new google.visualization.Calendar(document.getElementById("sales_div"));

$this.chart.draw($this.data, $this.options);
};

google.load('visualization', '1.1', {'packages':['calendar']});
google.setOnLoadCallback(lava.charts.CalendarChart["Sales"].draw);
lava.register("CalendarChart", "Sales");
</script>

[oLMHo]

Hi, I finally figured out what caused the problem. Seems it is an issue of graph sizing.

Originally I was using the demo rendering code to generate graph : Lava::render('CalendarChart', 'Sales', 'sales_div'), where the dimension array is not passed in.

When I change it to 'Lava::render('CalendarChart', 'Sales', 'sales_div', array("width" => 1000, "height" => 400)), the code generate the whole graph without any issue.

It is worth noting that the passed in dimension array doesn't resize the resulting graph, instead, it crops the graph, which is quite inconsistent to the effect of dimension array act on other graphs (say Piechart)

[kevinkhill]

I'm glad you figured it out! You could probably add the dimensions to the div in the page, or with css add get the same effect. I should look into having to div stretch to contain the whole chart, instead of cutting it off.