I see two potential issues here:
1) you are populating a <select> element with options and then immediately
firing the "change" event handler, which expects there to be a selected
<option>, but you don't set a default selected option, so this will return
null (or undefined, or error out, depending on how picky the browser is).
2) you are creating a new div with the id "ComboChart" and appending it to
a div with the id "ComboChart". If "ComboChart" already exists, you are
breaking the HTML rules that require elements to have unique IDs (which
could cause this problem); if ComboChart doesn't already exist, then you
are failing to append the new div to your DOM, and thus the chart has
nowhere to draw.
On Tuesday, August 6, 2013 11:28:56 AM UTC-4, Alireza MOUSSAEI wrote:
>
> hello
>
> this is my code :
>
> !function($) {
>
> //google.load('visualization', '1.0', {'packages':['table']});
> google.load('visualization', '1', {packages: ['corechart']});
> google.load('visualization', '1.1', {packages: ['controls']});
> google.setOnLoadCallback(initialize);
>
>
> function populateSelectWithOptions(target, data)
> {
> console.log(data, typeof(data));
> var $select =$("#"+target);
> $select.empty();
> for(var i=0; i <data.length;i++){
> $select.append($("<option>").attr("value", data[i]).text(data[i]));
> }
>
> $select.prop('disabled', false);
> $select.change(function (){
> var e = document.getElementById("groupe");
> var strUser = e.options[e.selectedIndex].value;
> //alert(strUser);
> sendQuery(strUser)
>
> });
>
> // baraie inke vaghti bara avalin bar safe lod mishavad dar
> chekbox chizi vojod dashte bashad
> $select.trigger('change');
> //console.log(populateSelectWithOptions(target, data));
> };
>
>
> function sendQuery(cityName) {
> // You can manipulate the variable response
> // Success!
> var query = new google.visualization.Query('
> http://api.batisense.com/batisense/datasource?table='+cityName);
>
> query.setQuery("select (cost_reportings_timestamp), sum
> (cost_reportings_cost) group by (cost_reportings_timestamp) pivot
> ecoadmin_zone_name");
> //Send the query with a callback function.
> query.send(drawChart);
> //console.log(response);
> }
>
>
> function drawChart(response) {
> if (response.isError()) {
> alert('Error in query: ' + response.getMessage() + ' ' +
> response.getDetailedMessage());
> return;
> }
> var data = response.getDataTable();
> console.log(data);
>
> var control = new google.visualization.ControlWrapper({
> controlType: 'ChartRangeFilter',
> containerId: 'control',
> options: {
> // Filter by the date axis.
> filterColumnLabel: 'cost_reportings_timestamp',
> ui: {
> chartType: 'LineChart',
> chartOptions: {
> chartArea: {
> width: '90%'
> },
> hAxis: {
> baselineColor: 'none'
> }
> },
> // Display a single series that shows the
> closing value of the stock.
> // Thus, this view has two columns: the date
> (axis) and the stock value (line series).
> chartView: {
> columns: [0,1]
> }
> }
> },
> //Initial range: 2010 to 2021
> state: {
> range: {
> start: new Date(2012),
> end: new Date(2019)
> }
> }
> })
>
> // Define a bar chart
> var ComboChart = new google.visualization.ChartWrapper({
> chartType: 'ComboChart',
> containerId: 'ComboChart',
> options: {
> width: 400,
> height: 300,
> seriesType: 'bars',
> isStacked:'True',
> hAxis: {
> minValue: 0,
> maxValue: 60
> },
> chartArea: {
> top: 0,
> right: 0,
> bottom: 0
> },
> },
> view: {columns: [0, 1, 2, 3]}
> });
>
> // Create the dashboard.
> var dashboard = new
> google.visualization.Dashboard(document.getElementById('dashboard')).
> // Configure the slider to affect the bar chart
> bind([control], [ComboChart]).
> // Draw the dashboard
> draw(data);
>
>
>
>
> }
> function initialize() {
> var $newDiv = $('<div>').attr('id','ComboChart');
> $('#ComboChart').append($newDiv);
>
> $($newDiv).hide(); //hide the div here
>
> // Replace the data source URL on next line with your data
> source URL.
> // Specify that we want to use the XmlHttpRequest object to
> make the query.
> getTable();
> }
> // baraie inke vaghti ro elemenha click mikonim piecharto
> ieshon bede
> $("#groupe").change( function () {
> $('#ComboChart').toggle(); //If it is visible hide it or vice
> versa
> //..
> });
>
> function getTable() {
> $.getJSON('call/json/mytables', {}, function (response){
> console.log(response);
> populateSelectWithOptions("groupe", response);
> })
> }
>
> }(jQuery);
>
> and i have this error
>
>
> One or more participants failed to draw()×
> janv. 2013janv. 2013févr. 2013févr. 2013mars 2013mars 2013avr. 2013avr.
> 2013mai 2013mai 2013juin 2013juin 2013juil. 2013juil. 2013août 2013août 2013
>
>
> i can't see my ComboChart, could you help me???
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
