Google Gauge - changing appearance... | ThingSpeak Plugins | Forum

Avatar

Please consider registering
Guest

sp_LogInOut Log In sp_Registration Register

Register | Lost password?
Advanced Search

— Forum Scope —






— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Feed sp_TopicIcon
Google Gauge - changing appearance...
No permission to create posts
May 22, 2014
8:17 pm
Avatar
notforyou23

Silver
Members
Forum Posts: 8
Member Since:
March 30, 2014
sp_UserOfflineSmall Offline

I dug through some of the code for the gauges, and was able to find some of the areas that you can tweak to change the default color layout of the gauges. Figured I'd share. Feel free to take the below and use with your plugins...

body { background-color: transparent; }
div.chart_div {position:center; width:200;}

var chart;
var charts;
var data;

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

function displayData(point) {

data.setValue(0, 0, 'OutTemp');
data.setValue(0, 1, point);
chart.draw(data, options);

}

function loadData() {

// variable for the data point
var p;

$.getJSON('https://api.thingspeak.com/channels/12446/feed/last.json?apikey=KJQBB95C9RX4NXCI&callback=?', function(data) {

// get the data point
p = data.field1;

if (p)
{
p = (p / 1023) * 1000;
p = parseFloat( p.toFixed(1) );
displayData(p);
}

});

}

function initChart() {

data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addRows(1);

chart = new google.visualization.Gauge(document.getElementById('chart_div'));
options = {width: 200, height: 200, min:10, max:110, redFrom: 85, redTo: 110, redColor: "#FF0033",greenFrom: 60, greenTo: 85, greenColor: "#00CC33", yellowFrom:32, yellowTo: 60, yellowColor:"#3366FF",minorTicks: 10, majorTicks:5};

loadData();

setInterval('loadData()', 15000);

// make changes to appearance below

google.visualization.events.addListener(chart, 'ready', function () {
$('#chart_div circle:nth-child(2)').attr('fill', 'black'); //background
$('#chart_div circle:nth-child(2)').attr('stroke', 'gray');
$('#chart_div circle:nth-child(2)').attr('stroke-width', '2');
$('#chart_div circle:nth-child(1)').attr('fill', 'black'); //outer-ring
$('#chart_div circle:nth-child(1)').attr('stroke-width', '1');
$('#chart_div circle:nth-child(1)').attr('stroke', 'gray');
$('#chart_div circle:nth-child(3)').attr('fill', '#666666'); //the circle pointer
$('#chart_div circle:nth-child(3)').attr('stroke', 'white');
$('#chart_div text').attr('fill', 'white');
$('#chart_div text:nth-child(1)').attr('fill', 'white');
$('#chart_div text:nth-child(1)').attr('font-size', '33');
$('#chart_div text').attr('left');
$('#chart_div path:nth-child(2)').attr('fill', '#FC6C05');
$('#chart_div path:nth-child(2)').attr('stroke', 'white');
$('#chart_div path:nth-child(2)').attr('fill-opacity', '2');
});

}

Forum Timezone: America/New_York

Most Users Ever Online: 114

Currently Online:
12 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

rw950431: 261

Vinod: 196

piajola: 85

turgo: 70

vespapierre: 63

Adarsh_Murthy: 62

Member Stats:

Guest Posters: 1

Members: 5703

Moderators: 0

Admins: 2

Forum Stats:

Groups: 4

Forums: 17

Topics: 1313

Posts: 4565

Newest Members:

harriettlf60, ShaToow, Aleftinfenny, DiaBentee, hugo11dom@gmail.com, Pisaruk530

Administrators: Hans: 387, lee: 457