Multiple gauges with differen color options

[Maxim Van Damme]

I would like to have some gauges in a webpage and i would like the color options to be different but I cant get them layed out correctly

this is how i would like the colors: 

and this is how i would like the gauges to be layed out: 

thanks in advance

[asgallant]

Normally, Gauges draw side-by-side, until they have filled the width of the container div.  Post your code and I'll take a look to see why they aren't drawing side-by-side.

[Maxim Van Damme]

this is the javascript code (currently commented out). it alsa has the google jaspi line.

google.load('visualization', '1', {packages:['gauge']});

google.setOnLoadCallback(drawChartMemory);

google.setOnLoadCallback(drawChartCPU);

google.setOnLoadCallback(drawChartTemp);

function drawChartMemory() {

//Memory gauge

var dataMemory = google.visualization.arrayToDataTable([

['Label', 'Value'],

['Memory', <?php echo $percent_used; ?>]

]);

var optionsMemory = {

width: 266, height: 120,

redFrom: 90, redTo: 100,

yellowFrom:75, yellowTo: 90,

minorTicks: 5

};

var chartMemory = new google.visualization.Gauge(document.getElementById('chart_div_memory'));

chartMemory.draw(dataMemory, optionsMemory);

}

function drawChartCPU() {

var dataCPU = google.visualization.arrayToDataTable([

['Label', 'Value'],

['CPU', <?php echo $cpuload; ?>]

]);

var optionsCPU = {

width: 266, height: 120,

redFrom: 90, redTo: 100,

yellowFrom:80, yellowTo: 90,

minorTicks: 5

};

var chartCPU = new google.visualization.Gauge(document.getElementById('chart_div_cpu'));

chartCPU.draw(dataCPU, optionsCPU);

}

function drawChartTemp() {

var dataTemp = google.visualization.arrayToDataTable([

['Label', 'Value'],

['Temp', <?php echo $cpu_temperature; ?>]

]);

var optionsTemp = {

width: 133, height: 120,

redFrom: 75, redTo: 80,

yellowFrom:70, yellowTo: 75,

minorTicks: 5,

max: 80

};

var chartTemp = new google.visualization.Gauge(document.getElementById('chart_div_temp'));

chartTemp.draw(dataTemp, optionsTemp);

}

and here the html code.

<table class="w400">

<tr>

<td class="head center">Gauges</td>

</tr>

<tr>

<td>

<div id='chart_div_memory'></div>

<div id='chart_div_cpu'></div>

<div id='chart_div_temp'></div>

</td>

</tr>

2013/9/6 asgallant <drew_g...@abtassoc.com>

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/ec7_k9IQg9A/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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.

[asgallant]

Ahh, you are drawing the 3 gauges as separate charts, that's why they aren't lining up side-by-side.  No problem, just use some CSS to position the div's next to one another:

#chart_div_memory, #chart_div_cpu, #chart_div_temp {
    float: left;
}

2013/9/6 asgallant <drew_g...@abtassoc.com>

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

[Maxim Van Damme]

Thanks a bunch, such a simple solution how didn't I think of that.

Kind Regards
Maxim Van Damme

2013/9/7 asgallant <drew_g...@abtassoc.com>

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.