Dynamically change view column names in Google Charts - javascript

My data is as below
var data = google.visualization.arrayToDataTable([
['Date', 'A|36~Batman', 'A|37~Superman', 'A|38~Aquaman'],
['01/08/2018', 950, 654, 123],
['02/08/2018', 760, 786, 423],
['03/08/2018', 1121, 856, 632],
['04/08/2018', 842, 475, 257],
['05/08/2018', 948, 658, 324]
]);
While plotting this chart in the graph, I want to show the label values split after the '~' sign i.e. (Batman, Superman, Aquaman). I need the values before the tilde during the OnClick event of my chart so I need those values in the data as my onclick code is as below
var col = chart.getSelection()[0]['column'];
var Id = data.getColumnLabel(col).substr(0, data.getColumnLabel(col).indexOf("~"));
So to fetch data, I need the Id values as well. I was able to loop the columns and modify the column label values, but I don't know the code to set the column label as new values. My code to loop is as below
var view = new google.visualization.DataView(data);
for (var i = 0; i < view.getNumberOfColumns(); i++) {
var ColumnName = view.getColumnLabel(i);
var NewColumnName = ColumnName.substring(ColumnName.lastIndexOf('~'), ColumnName.length)
// set new column name in the view
}
How to replace the old column name with the new column name?

use method --> setColumnLabel
however, this method does not exist on the view,
so you'll have to change the column label on the data table
since the view is based on the data table,
the view pick up the new label as well...
var view = new google.visualization.DataView(data);
for (var i = 0; i < view.getNumberOfColumns(); i++) {
var ColumnName = view.getColumnLabel(i);
var NewColumnName = ColumnName.substring(ColumnName.lastIndexOf('~'), ColumnName.length)
data.setColumnLabel(i, NewColumnName);
}
EDIT
instead of using the label to store two values,
take advantage of the properties available on the column.
var data = google.visualization.arrayToDataTable([
['Date', {id: 'A|36', label: 'Batman'}, {id: 'A|37', label: 'Superman'}, {id: 'A|38', label: 'Aquaman'}],
['01/08/2018', 950, 654, 123],
['02/08/2018', 760, 786, 423],
['03/08/2018', 1121, 856, 632],
['04/08/2018', 842, 475, 257],
['05/08/2018', 948, 658, 324]
]);
then you can use methods --> getColumnId() & getColumnLabel()
if that isn't enough, you can provide your own custom properties...
var data = google.visualization.arrayToDataTable([
['Date', {id: '36', label: 'Batman', p: {category: 'A'}}, {id: '37', label: 'Superman', p: {category: 'A'}}, {id: '38', label: 'Aquaman', p: {category: 'A'}}],
['01/08/2018', 950, 654, 123],
['02/08/2018', 760, 786, 423],
['03/08/2018', 1121, 856, 632],
['04/08/2018', 842, 475, 257],
['05/08/2018', 948, 658, 324]
]);
then use method --> getColumnProperty(1, 'category')

Related

How to push data which is not hard coded into variable?

I am trying to push data into a variable Data[] but all I have is an example of how to do this hard coded:
var data = [{
id: "1",
name: "Development Life Cycle",
actualStart: Date.UTC(2018, 01, 02),
actualEnd: Date.UTC(2018, 06, 15),
children: [{
id: "1_1",
name: "Planning",
actualStart: Date.UTC(2018, 01, 02),
actualEnd: Date.UTC(2018, 01, 22),
connectTo: "1_2",
connectorType: "finish-start",
progressValue: "75%"
},
// more data goes here
]
}];
I tried with following code but it doesn't seem to work:
ganttdata = [];
// DUMMY DATA
id = 10;
RFInum = 'asfd';
start= 1;
LTIOV = 2;
progressValue = 10;
ganttdata.push("{id:"+id, "parent: null", "name:"+RFInum, "actualStart: Date.UTC("+start+")", "actualEnd: Date.UTC("+LTIOV+")", "progressValue:"+progressValue+"%}");
console.log(ganttdata);
Anyone know how to write this?
You are currently inserting your data as a string and not as an object.
I recreated your approach and inserted your data as an object into the ganttdata array.
Date documentation
var ganttdata = [];
// DUMMY DATA
var id = 10;
var RFInum = 'asfd';
var start = Date.UTC(2021, 12, 31);
var LTIOV = Date.UTC(2021, 12, 31);
var progressValue = 10;
ganttdata.push({
id,
parent: null,
name: RFInum,
actualStart: start,
actualEnd: LTIOV,
progressValue: `${progressValue}%`,
});
console.log(ganttdata);
Or if you want to append some data to an existing object at a specific index:
var data = [{
id: 1,
name: 'test'
}];
console.log('before:', data);
data[0].extend = 'hello World';
data[0].foo = 'bar';
console.log('after:', data);

How can I pass a 3 dimensional tensor into a dense layer (tensorflow.js)

I'm looking for a way to feed in a normalized graph into my tensorflow.js model. Right now, it is passing in a 2-dimensional tensor and that code works flawlessly. I found a new data point that I want to add into that 2-dimensional tensor, however, that data point is an array of points that when normalized, it ranges between 0-1. If there was a set number of points the array had, I would just each individual one as a data point; however, the size of the array varies between all my data. Here is my code and an example data set in javascript object form:
{
"rank": "27",
"fame": "4505",
"deaths": "1",
"accountAge": 199,
"characters": "7",
"skins": "0",
"verified": 1,
"oneDay": [ 3856, 4003, 4138, 4282, 4316, 4431, 4505, 4719],
"oneWeek": [ 1100, 1243, 1511, 1948, 2814, 3267, 3557],
"lifeTime": [231, 1711, 2257, 4104, 5366, 7610, 9142, 11123, 12831, 15003, 15154, 16600, 17438, 18466, 19777, 20626, 22230, 24180, 24970, 25918, 26728, 28325, 29318, 30187, 30645, 31068, 33142, 35088, 35582, 35984, 37162, 39567, 0, 41089, 42615, 43609, 44254, 46740, 47231, 48261, 50673, 51161, 52646, 53592, 55470, 56487, 57254, 58422, 58428, 62407, 65122, 0, 65122, 69784, 70703, 72511, 77764, 78240, 80642, 81143, 81204, 82929, 85771, 89594, 90746, 92073, 92265, 376, 425, 476, 702, 776, 777, 827, 828, 1089, 1091, 998, 1031, 1084, 1148, 1100 ]
}
The model setup
model = tf.sequential();
//input layer
model.add(tf.layers.dense({
units: 100,
inputShape: [9],
activation: 'sigmoid'
}))
//hidden layers
model.add(tf.layers.dense({
units: 50,
activation: 'sigmoid'
}))
//output layer
model.add(tf.layers.dense({
units: 1,
activation: 'sigmoid'
}))
The current data setup
var xs2D = [], ys2D = []
for (let i of data) {
//removed data normalization because it was very big
xs2D.push([rank, fame, deaths, age, char, skin, od, ow, lt])
ys2D.push([i.verified])
}
const xs = tf.tensor2d(xs2D)
const ys = tf.tensor2d(ys2D)
If xs is a 3d tensor of shape [a, b, c], then inputShape of the first layer should be [b, c].
Since ys is not a 3d tensor, then a flatten later should be pass before the last layer, for it to return a 2d tensor.
Here is a small example:
const model = tf.sequential({
layers: [tf.layers.dense({units: 1, inputShape: [1, 10]}),
tf.layers.flatten(),
tf.layers.dense({units: 1})]
});
model.compile({optimizer: 'sgd', loss: 'meanSquaredError'});
// the loss function and the optimizer are just for the sake of example
// in order to use compile, required before using fit
await model.fit(tf.ones([8, 1, 10]), tf.ones([8, 1]));
model.predict(tf.ones([8, 1, 10]))

How to convert array result of mysql query for use in chartist.js

I have a query
$array1 = $wpdb->get_results( "SELECT timestamp,temp FROM $table_name ORDER BY id desc LIMIT 8", ARRAY_A );
$data1 = json_encode($array1);
echo $data1;
result echoed like this:
[
{"timestamp":"2020-07-26 09:50:25","temp":"26.31"},
{"timestamp":"2020-07-26 09:40:29","temp":"26.37"},
{"timestamp":"2020-07-26 09:30:33","temp":"26.31"},
{"timestamp":"2020-07-26 09:20:37","temp":"26.43"},
{"timestamp":"2020-07-26 09:19:56","temp":null},
{"timestamp":"2020-07-26 08:54:54","temp":"26.37"},
{"timestamp":"2020-07-26 08:44:58","temp":"26.18"},
{"timestamp":"2020-07-26 08:35:02","temp":"26.25"}
]
which I would like to use as input for a graph.
The template given for chartist.js (including also moments.js) is like so:
var chart = new Chartist.Line('.ct-chart', { series: [ {
name: 'series-1',
data: [
{x: new Date(143134652600), y: 53},
{x: new Date(143234652600), y: 40},
{x: new Date(143340052600), y: 45},
{x: new Date(143366652600), y: 40},
{x: new Date(143410652600), y: 20},
{x: new Date(143508652600), y: 32},
{x: new Date(143569652600), y: 18},
{x: new Date(143579652600), y: 11}
]
},
And so on. How to convert this array in php / replace timestamp by x / temp by y and use it (in a loop?) within javascript?
In the sql, use UNIX_TIMESTAMP to get the date in the correct format and alias the columns as x and y.
$array1 = $wpdb->get_results( "SELECT UNIX_TIMESTAMP(timestamp) as x,temp as y FROM $table_name ORDER BY id desc LIMIT 8", ARRAY_A );
$data1 = json_encode($array1);
JSON encode the data as you have done.
Depending on how you receive that JSON into JavaScript, loop through the array and convert the timestamp into a date and the value into a float. The following assumes the PHP is echo'd into the JavaScript
var data = JSON.parse('<?php echo $data1; ?>');
data.forEach(function(row){
row.x = new Date(parseInt(row.x));
row.y = parseFloat(row.y);
});
Then use the data in your chart
var chart = new Chartist.Line('.ct-chart', { series: [ {
name: 'series-1',
data: data
},
If you fetch the JSON string from PHP via AJAX then simply pass in the result string and parse it the same way.

Razor foreach loop inside Javascript

I'm creating a google chart and I have now made it look like I want it to with amounts of lines/bars and multiple axises and so on, now I want to have dynamic data inside of it.
function drawVisualization()
{
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Day', 'KG', 'Average', 'peak'],
['1', 22000, 70, 90],
['2', 21000, 80, 87],
['3', 19000, 75, 79],
['4', 25000, 60, 88],
['5', 24000, 90, 95]
]);
So as of right now this is how the data is sent to the chart, 1,2,3,4,5 for hAxis and the rest for vAxis.
However I thought I could use a foreach in here and do something like this to return data:
#foreach (var c in db.Query(getWorkout))
{
['1', #c.kg, #c.rep, #c.sett];
}
The foreach actually works while no code is inside it so I guess the errors are all due to ['1', #c.kg, #c.rep, #c.sett]; this.
Anyone got any ideas of what to do? Would be tremendously thankful!
try following
#foreach (var c in db.Query(getWorkout))
{
<text>['1', #c.kg, #c.rep, #c.sett],</text>
}
I think it should work
first create an array in JavaScript
var dbData = [['Day', 'KG', 'Average', 'peak']];
then use razor #foreach to append data
#foreach (var c in db.Query(getWorkout))
{
dbData.push(['1', #c.kg, #c.rep, #c.sett]);
}
then
var data = google.visualization.arrayToDataTable(dbData);

Angular Google Charts - Unable to change Pie Slice Colors

I am unable to change the Pie Chart colors. Currently it is only the default colors.
How do I define the colors? Below is my current chartObject. It works just fine when I change to BarChart or ColumnChart ie bar colors change. Just not for the PieChart. What I am doing wrong?
chartObject = {"type":"PieChart",
"data":{"cols":[{"id":"label","label":"Action Status","type":"string"},
{"id":"label","label":"Number of Actions","type":"number"},
{"role":"style","type":"string","p":{"role":"style"}}],
"rows":[{"c":[{"v":"Open"},{"v":2},{"v":"ORANGE"}]},
{"c":[{"v":"Close"},{"v":1},{"v":"GREEN"}]}]},
"options":{"title":"Legal Register Tracking"}}
Add slices in options data object and give color json object 'slices': [{color:'yellow'},{color:'red'}] for each slices
var app = angular.module('myApp', ['googlechart']);
app.controller('MyController', function ($scope)
{
$scope.chartObject = {};
$scope.chartObject.type = "PieChart";
$scope.chartObject.data = {"cols":
[
{id: "t", label: "Topping", type: "string"},
{id: "s", label: "Slices", type: "number"}
],
"rows":
[
{c:
[
{v: "Mushrooms"},
{v: 3},
{color: 'black'}
]
},
{c:
[
{v: "Pepperoni"},
{v: 2},
]
}
]};
$scope.chartObject.options = {
'title': 'How Much Pizza I Ate Last Night',
'slices': [{color:'yellow'},{color:'red'}]
};
});

Categories