Customization of 'Chart With Multiple Series' | 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
Customization of 'Chart With Multiple Series'
No permission to create posts
June 6, 2018
10:39 am
Avatar
SenneHoekman

Silver
Members
Forum Posts: 10
Member Since:
June 6, 2018
sp_UserOfflineSmall Offline

Dear Users,

I have 5 individual charts who get data from a physical object I made using the 'Particle Photon Board'. It is a cube with 5 buttons. Each buttons sends out a '1' if it is pressed. Each button is unique and has its own webhook and channel.

Now I am trying to make 1 chart which contains all 5 charts and displays them over a 7 day period (1 week). But I still have some issues, for example, even tho all my 'yaxismin' are 0, the yaxis of my 'Chart With Multiple Series' is -0,5.

In this line I added the 'yaxismin=0' like you would in any individual chart. This works with 'days=7', 'round=0', ... BUT NOT WITH yaxismin???

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

On my website, you can see the individual channels which I want to combine into 1, maybe you know a better way to do this?

THE MAIN GOAL IS to make it easy to see WHEN, HOW MANY TIMES and WHAT was pressed (buttons on my object) in 1 simple graph...

https://thingspeak.com/apps/plugins/232782

Help?

MY JAVASCRIPT CODE:

// variables for the first series
var series_1_channel_id = 483067;
var series_1_field_number = 1;
var series_1_read_api_key = '';
var series_1_results = 60;
var series_1_color = '#d62020';

// variables for the second series
var series_2_channel_id = 483130;
var series_2_field_number = 1;
var series_2_read_api_key = '';
var series_2_results = 60;
var series_2_color = '#00aaff';

// variables for the second series
var series_3_channel_id = 483146;
var series_3_field_number = 1;
var series_3_read_api_key = '';
var series_3_results = 60;
var series_3_color = '#32a9d8';

// variables for the second series
var series_4_channel_id = 483147;
var series_4_field_number = 1;
var series_4_read_api_key = '';
var series_4_results = 60;
var series_4_color = '#63d832';

// variables for the second series
var series_5_channel_id = 487759;
var series_5_field_number = 1;
var series_5_read_api_key = '';
var series_5_results = 60;
var series_5_color = '#d832d8';

// chart title
var chart_title = 'Care-Cube';
// y axis title
var y_axis_title = 'Samenvatting';

// 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);
// add the second series
addSeries(series_2_channel_id, series_2_field_number, series_2_read_api_key, series_2_results, series_2_color);
// add the second series
addSeries(series_3_channel_id, series_3_field_number, series_3_read_api_key, series_3_results, series_3_color);
// add the second series
addSeries(series_4_channel_id, series_4_field_number, series_4_read_api_key, series_4_results, series_4_color);
// add the second series
addSeries(series_5_channel_id, series_5_field_number, series_5_read_api_key, series_5_results, series_5_color);
});

// 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: 'spline',
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: false },
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) {
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&min=0&round=0&yaxismin=0&days=7&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: data.channel[field_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);
}

June 10, 2018
5:08 pm
Avatar
cstapels
Moderator
Members


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

I would write a MATLAB visualization that plots the series on a single plot, and then you can embed the visualization wherever you like. (after you set the visualization as public.

See this tutorial for an example of several plots
https://www.mathworks.com/help/thingspeak/Compare-Temperature-Data-from-Three-Different-Days.html

Additionally see the regular MATLAB plot function help for examples on plotting multiple series.

Does this solution provide the type of visualization you would like to see?

Forum Timezone: America/New_York

Most Users Ever Online: 114

Currently Online:
25 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:

dollyip18, toddbt2, SatrapB, Ronalpsync, wandaim69, GregoryGof

Administrators: Hans: 387, lee: 457