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

Avatar

Please consider registering
Guest

Search

— Forum Scope —






— Match —





— Forum Options —





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

Register Lost password?
sp_Feed sp_TopicIcon
Google Gauge - changing appearance...
Avatar
notforyou23

Silver
Forum Posts: 8
sp_UserOfflineSmall Offline
1
May 22, 2014 - 8:17 pm
sp_Permalink sp_Print sp_EditHistory

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: cstapels, jacktheripper125
19 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

rw950431: 252

Vinod: 164

cstapels: 96

piajola: 75

vespapierre: 63

Adarsh_Murthy: 59

Newest Members:

Nsneilotof

angieus2

goldiepw11

BinanceoSt

gnarender123@gmail.com

edenderest

Forum Stats:

Groups: 4

Forums: 17

Topics: 1313

Posts: 4565

 

Member Stats:

Guest Posters: 1

Members: 5703

Moderators: 0

Admins: 2

Administrators: Hans, lee