Giter VIP home page Giter VIP logo

Comments (4)

kevinkhill avatar kevinkhill commented on May 12, 2024

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.

from lavacharts.

oLMHo avatar oLMHo commented on May 12, 2024

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>

from lavacharts.

oLMHo avatar oLMHo commented on May 12, 2024

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.

image

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)

from lavacharts.

kevinkhill avatar kevinkhill commented on May 12, 2024

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.

from lavacharts.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.