Comments (4)
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.
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.
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)
from lavacharts.
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)
- Cannot read property isHtml of null, Unspecified chart type HOT 9
- lavacharts.com is down HOT 15
- Chart to wkhtmltopdf not working HOT 4
- Piecharts have stopped working HOT 1
- Google Charts version "current" is breaking things HOT 4
- Use of <script type="text/javascript"> not right according to validator.w3.org HOT 1
- Trendlines with ColumnChart doesn't work. HOT 3
- How to use addTimeOfDayColumn method? HOT 2
- Khill\Lavacharts\Exceptions\InvalidStringValue: Invalid argument, must be a non-empty string
- while installing on ide-helper:generate an error occurs HOT 1
- Refused to load the script 'https://www.gstatic.com/charts/loader.js' because it violates the following Content Security Policy HOT 1
- Adding data descriptions on the X axis HOT 1
- OrgChart is included but not enabled. Why? HOT 1
- Cannot read property 'style' of null× HOT 3
- Dashboard / ChartWrapper missing functionality HOT 1
- Call to undefined method Khill\Lavacharts\DataTables\DataTable::DataTabe()
- OrgChart.php references trait "PngOutputTrait" instead of "PngRenderableTrait"
- Event is not defined
- Undefined type "Lava" error
- is this chart package still compatible with Laravel version 10? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lavacharts.