In our application we are creating lots of charts using google charts and we need to create image from those charts. For core charts we are able to generate the images using getImageUri, but for gauge charts it is not supported. How can we achieve this?
You can try using html2canvas library:
$('#load').click(function(){
html2canvas($('#chartdiv'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png")
window.open(img);
}
});
});
Related
I'm working with chart.js and I followed this to create a custom HTML legend.
The thing is, the hide/show functionality is not working. The first legend click hides the whole chart, while the others produce the error:
Uncaught TypeError: Cannot read property '_meta' of undefined
at t.getDatasetMeta (Chart.min.self-b26766dbef822c075056eb7012dc36ae75970dc990497732f927d46ef6070858.js:11)
at HTMLLIElement.legendClickCallback (plot.self-416475a747a420b91c7fab454c07846f1043f55cc28f6d810fafeab61c56cf01.js:317)
so it traces back to t.getDatasetMeta.
I gotta say it's working great with line/bar charts, so its only my doughnut chart which breaks.
Let me know if you need more info.
Oh and thanks :P
EDIT: fiddle
The problem is that you have only one dataset and your code use the index of legend item clicked to hide datasets[index].
On the contrary you need to hide single item data as below:
var meta = chart.getDatasetMeta(0);
var item = meta.data[index];
Check the fiddle updated: https://jsfiddle.net/beaver71/aa2n39s2/
I am using chartjs to draw a line chart. I am making these charts dynamically and there can be 2 to 10 charts depending on the different data types. Right now i want to update the chart when i click a button or a text. This update will change the min and max of the y-axes ticks. I have try to do it in the javascript console on one chart by doing this
myChart.options.scales.yAxes[0].ticks.min=some_value;
myChart.update();
but the problem is how would i change it when i click on a text or button. Is i have to make a legend?
this is my jsfiddle for a test run.
Any kind of help would be much appreciated.
You can use jQuery:
Add the jQuery library
Add a button, I added <button id="action">action</button>
Add a jQuery trigger that executes the 2 lines on click:
$('#action').off().on('click', function() {
myLineChart.options.scales.yAxes[0].ticks.min = -50;
myLineChart.update();
})
See: https://jsfiddle.net/gdqkLtc2/3/
I would like to use a Chart.js line chart to show "live" data. Using vanilla Chart.js, this can be done be calling the .addData() and .removeData() functions. Here's an example:
http://jsbin.com/yitep/5/edit?html,js,output
How can I accomplish this "live data" effect using angular-chart.js? If I update the bound data, the chart simply updates the existing data (it doesn't slide to the left to reveal new data). It is the same effect as manually updating a Chart.js dataset and calling the .update() function in vanilla Chart.js, like this:
http://jsbin.com/yitep/4/edit?html,js,output
angular-chart.js's documentation seems to only include examples of updating existing data points, not adding new data points.
I'm using Google Charts to print out some cool charts. It works great in all my browsers.
But the application that I'm building is a HbbTv app. In that enviroment Google Charts gives me an error when he tries to create a DataTable.
The google.visualization object exist, but arrayToTable doesn't exist...
When I try to use DataTable() (creating a new empty DataTable) I get an error dat new google.visualization.DataTable() isn't a constructor...
Somebody known how this could happen?
Some additional info:
The google.visualisation is loaded (but it only count 3 elements instead of 51)
The HbbTv enviroment is a Opera 9.8
Thanks!
Code:
//My code for creating a data table from an array
var dataTable = google.visualization.arrayToDataTable(data, false);
// My code for creating a DataTable with a new instance
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Hour');
dataTable.addColumn('number', 'Amount');
dataTable.addColumn('number', 'Average');
dataTable.addRows(data);
The problem is fixed in the Google Visualization 1.1 (release canidate).
So very soon it will be fixed in the production version.
I am creating a markers-based Geochart to display the location of schools. I have my data in a Google docs spreadsheet. I'm using 3 columns: lat, long and marker size. Currently, the tooltips display lat and long. Ideally, they would display information about each school instead but removing them would be fine, too. See what I have so far on jsfiddle.
Some of the other Google visualizations seem to allow a trigger:'none' option for tooltip (e.g., Pie Chart). Am I correct that there is no such thing for GeoChart?
It seems there's an experimental feature that allows assigning a tooltip role to a particular data column. I tried to use that to no avail.
I tried finding and hiding the tooltip div but I couldn't figure out how to access any elements in the iframe that contains the map. I'd be perfectly happy with this kind of solution if I could get it to work!
I realize this is not exactly what Geochart seems meant for but I'm using other Geochart region maps on the same page and would like to keep the same aesthetic.
I know this is an old question, but maybe it can still help.
Check out this example:
data.addColumn('number', 'Lat');
data.addColumn('number', 'Long');
data.addColumn('string','tooltip');
data.addColumn('number','Example');
data.addRows([[41.151636,-8.569336,'Portugal',{v:0,f:'test PT'}]]);
data.addRows([[ 39.059575,-98.789062,'USA',{v:1,f:'test US'}]]);
You can now also disable the tooltip adding, which was not previously available:
tooltip.trigger:'none';
Here is an example: http://jsfiddle.net/cmoreira/njB6m/