Thingspeak multiple series plugin - Name series | ThingSpeak Apps | 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
Thingspeak multiple series plugin - Name series
No permission to create posts
April 2, 2019
2:38 am
Avatar
User123

Silver
Members
Forum Posts: 5
Member Since:
March 11, 2019
sp_UserOfflineSmall Offline

Hi,

I am trying to name the series in my chart independently from the field names using the multiple series plugin, but i cant find out how to do so.

Thanks

April 3, 2019
10:24 am
Avatar
cstapels
Moderator
Members


Moderators
Forum Posts: 861
Member Since:
March 7, 2017
sp_UserOfflineSmall Offline

It may be easier for you to use a MATLAB visualization instead of a plugin.
You can use plot(x1,y1,x2,y2);
or for multi axis
plot(x1,y1);
hold
yyaxis right;
plot(x2,y2);
The use legend('label1' 'label2');
and even xlabel('xaxis');
ylabel('yaxis');

April 3, 2019
11:19 am
Avatar
User123

Silver
Members
Forum Posts: 5
Member Since:
March 11, 2019
sp_UserOfflineSmall Offline

Nevermind, i finally figured it out myself. Heres an the changed code for it if anyone finds this, is as inapt in using javascript as i am and wants to use it. I'll leave the original post up tho i removed the code in it for a better overview and edited some mistakes.

// variables for the first series
var series_1_channel_id = 9;
var series_1_field_number = 1;
var series_1_read_api_key = '';
var series_1_results = 10;
var series_1_color = '#d62020';
var series_1_name = 'Name1';

// variables for the second series
var series_2_channel_id = 9;
var series_2_field_number = 2;
var series_2_read_api_key = '';
var series_2_results = 10;
var series_2_color = '#00aaff';
var series_2_name = 'Name2';

// chart title
var chart_title = 'Light & Temperature';
// y axis title
var y_axis_title = 'Values';

// user's timezone offset
var my_offset = new Date().getTimezoneOffset();
// chart variable
var my_chart;

// when the document is ready
$(document).on('ready', function() {
// add a blank chart
addChart();
// add the first series
addSeries(series_1_channel_id, series_1_field_number, series_1_read_api_key, series_1_results, series_1_color, series_1_name);
// add the second series
addSeries(series_2_channel_id, series_2_field_number, series_2_read_api_key, series_2_results, series_2_color, series_2_name);
});

// add the base chart
function addChart() {
// variable for the local date in milliseconds
var localDate;

// specify the chart options
var chartOptions = {
chart: {
renderTo: 'chart-container',
defaultSeriesType: 'line',
backgroundColor: '#ffffff',
events: { }
},
title: { text: chart_title },
plotOptions: {
series: {
marker: { radius: 3 },
animation: true,
step: false,
borderWidth: 0,
turboThreshold: 0
}
},
tooltip: {
// reformat the tooltips so that local times are displayed
formatter: function() {
var d = new Date(this.x + (my_offset*60000));
var n = (this.point.name === undefined) ? '' : '
' + this.point.name;
return this.series.name + ':' + this.y + '' + n + '
' + d.toDateString() + '
' + d.toTimeString().replace(/\(.*\)/, "");
}
},
xAxis: {
type: 'datetime',
title: { text: 'Date' }
},
yAxis: { title: { text: y_axis_title } },
exporting: { enabled: false },
legend: { enabled: true },
credits: {
text: 'ThingSpeak.com',
href: 'https://thingspeak.com/',
style: { color: '#D62020' }
}
};

// draw the chart
my_chart = new Highcharts.Chart(chartOptions);
}

// add a series to the chart
function addSeries(channel_id, field_number, api_key, results, color, name) {
var field_name = 'field' + field_number;

// get the data with a webservice call
$.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/fields/' + field_number + '.json?offset=0&days=3&round=2&results=' + results + '&api_key=' + api_key, function(data) {

// blank array for holding chart data
var chart_data = [];

// iterate through each feed
$.each(data.feeds, function() {
var point = new Highcharts.Point();
// set the proper values
var value = this[field_name];
point.x = getChartDate(this.created_at);
point.y = parseFloat(value);
// add location if possible
if (this.location) { point.name = this.location; }
// if a numerical value exists add it
if (!isNaN(parseInt(value))) { chart_data.push(point); }
});

// add the chart data
my_chart.addSeries({ data: chart_data, name: name, color: color });
});
}

// converts date format from JSON
function getChartDate(d) {
// offset in minutes is converted to milliseconds and subtracted so that chart's x-axis is correct
return Date.parse(d) - (my_offset * 60000);
}

"Thanks , but i already tried it and i believe the plugin is far superior, as you can switch series on and off, it is way more visually appealling and you can see the exact current values if you hover over the graph.
The only problem i currently have with it, is that the names are automatically derived from the field names witch is inpractical in many situations e.g. when i need a different labelling on the series than on the yaxis in the single graph. I tried messing with the Javascript code already but i dont know javascript and mostly just broke it. I`ll post the Standard Code down below.

Thanks once again"

Forum Timezone: America/New_York

Most Users Ever Online: 166

Currently Online:
10 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

rw950431: 272

Vinod: 240

piajola: 95

turgo: 70

vespapierre: 63

Adarsh_Murthy: 62

Member Stats:

Guest Posters: 1

Members: 8665

Moderators: 1

Admins: 2

Forum Stats:

Groups: 3

Forums: 14

Topics: 1600

Posts: 5760

Newest Members:

briskpanda, Dejw0089, Yassine Ben Salah, anis, 43994554AKS, suda

Moderators: cstapels: 460

Administrators: Hans: 405, lee: 457