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;
}
On Friday, September 6, 2013 5:42:24 PM UTC-4, Maxim Van Damme wrote:
>
> 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 <[email protected] <javascript:>>
>
>> 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.
>>
>>
>> On Friday, September 6, 2013 4:02:29 PM UTC-4, Maxim Van Damme wrote:
>>>
>>> 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:
>>>
>>> <https://lh4.googleusercontent.com/-hrTK4EdiiGE/Uio0Roy3gpI/AAAAAAAAAI0/IS-wahlT8Us/s1600/wrong.PNG>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>> and this is how i would like the gauges to be layed out:
>>>
>>> <https://lh4.googleusercontent.com/-SJaVgVK4gv0/Uio0f-4-IsI/AAAAAAAAAI8/M4KWEf-MiXk/s1600/wrong2.PNG>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>> thanks in advance
>>>
>> --
>> 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
>> [email protected] <javascript:>.
>> To post to this group, send email to
>> [email protected]<javascript:>
>> .
>> Visit this group at
>> http://groups.google.com/group/google-visualization-api.
>> For more options, visit https://groups.google.com/groups/opt_out.
>>
>
>
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
