Related
var array = [[10, 20, 30, 20, 50], [40, 50, 60, 20, 20], [70, 80, 90, 20, 20], [70, 80, 90, 20, 20]];
For example i want to delete elements == 50
I want this result -> array= [[10,30,20], [40,60,20], [70,90,20], [70,90,20]];
I try this solution but it is not working ->
for (var i = 0; i < array.length; i++) {
for (var j = 0; j < array[i].length; j++) {
if (array[i][j] == 50) {
array[i].splice(j, 1);
}
}
}
You need to collect unwanted indices first and then return.
const
data = [
[10, 20, 30, 20, 50],
[40, 50, 60, 20, 20],
[70, 80, 90, 20, 20],
[70, 80, 90, 20, 20]
],
// ^^ ^^ cols with 50
//
indices = data.reduce(
(r, a) => a.map((v, i) => v === 50 ? false : r[i] ?? true),
[]
),
result = data.map(a => a.filter((_, i) => indices[i]));
result.forEach(a => console.log(...a));
const array = [[10, 20, 30, 20, 50], [40, 50, 60, 20, 20], [70, 80, 90, 20, 20], [70, 80, 90, 20, 20]];
const filteredArr = array.map(item => [...new Set(item.filter(i => i !== 50))])
// filterdArr = [[10, 30, 20], [40, 60, 20], [70, 80, 90, 20], [70, 80, 90, 20]];
I am trying to create a simple line chart. As you can see data is formatted so that the first value in array is date (year - month), and then there is a value. I can change the format of date if necessary but data will generally always have a single value for each month in ascending order up to current month.
Is it possible to format chart so that bottom axis has labels for date (year + month)? Here is the Codepen of my working example and here is the original Highchart example if needed.
Highcharts.chart("container", {
series: [
{
data: [
["2018-10", 18],
["2018-11", 16],
["2018-12", 21],
["2019-01", 22],
["2019-02", 22],
["2019-03", 20],
["2019-04", 22],
["2019-05", 24],
["2019-06", 25],
["2019-07", 31],
["2019-08", 35],
["2019-09", 33],
["2019-10", 35],
["2019-11", 35],
["2019-12", 35]
]
}
]
});
This is what I am aiming for
If I can easier do this in a different library I am open to suggestions.
You can do it like this way, using type category will give the xaxis of series
xAxis: {
type: 'category',
labels: {
formatter: function () {
var str = this.value.split('-');
return str[1]+'<br>'+ str[0];
}
}
},
I managed to do it like this
Highcharts.chart("container", {
xAxis: {
type: 'datetime',
labels: {
formatter() {
// get data from series, "this.value" is a key for each array
var currentData = this.chart.userOptions.series[0].data[this.value];
// split "2018-10" into array and return each on new line
var currentData = currentData[0].split('-');
return currentData[1] + '<br>' + currentData[0];
}
}
},
series: [
{
data: [
["2018-10", 18],
["2018-11", 16],
["2018-12", 21],
["2019-01", 22],
["2019-02", 22],
["2019-03", 20],
["2019-04", 22],
["2019-05", 24],
["2019-06", 25],
["2019-07", 31],
["2019-08", 35],
["2019-09", 33],
["2019-10", 35],
["2019-11", 35],
["2019-12", 35]
]
}
]
});
I am using Gooble Material ScatterChart (since I need dual-Y chart). So I load it with:
google.load('visualization', '1.1', {packages: ['scatter']});
But now it seems that it is impossible to set lineWidth and PointSize options of such charts. Seems that it does not affect anything:
var options = {
width: 900,
height: 500,
}
What am I doing wrong? Documentation (https://google-developers.appspot.com/chart/interactive/docs/gallery/scatterchart#configuration-options) says there are these properties for ScatterChart. No refinement is given for Material chart. But I do not see any affect and no errors are thrown.
Here is the full code of JS function and a piece of HTML. I have commented out non-Material test portion of code, which is working fine.
1: https://github.com/leoKiddy/google_charts/blob/master/dual-Y_Scatter_PointSize.html "link to GitHub".
Indeed, it seems pointSize & lineWidth properties could not be applied to google.charts.Scatter object.
But you could consider the following approach for adjusting the chart.
As an alternative for pointSize property,the point size could be specified via CSS:
#chart_div circle {
r: 3;
}
Regarding lineWidth property, points could be connected using line element once the chart is generated as demonstrated below.
Complete example
google.load('visualization', '1.1', { packages: ['scatter'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Student ID');
data.addColumn('number', 'Hours Studied');
data.addColumn('number', 'Final');
data.addRows([
[0, 0, 67], [1, 1, 88], [2, 2, 77],
[3, 3, 93], [4, 4, 85], [5, 5, 91],
[6, 6, 71], [7, 7, 78], [8, 8, 93],
[9, 9, 80], [10, 10, 82], [11, 0, 75],
[12, 5, 80], [13, 3, 90], [14, 1, 72],
[15, 5, 75], [16, 6, 68], [17, 7, 98],
[18, 3, 82], [19, 9, 94], [20, 2, 79],
[21, 2, 95], [22, 2, 86], [23, 3, 67],
[24, 4, 60], [25, 2, 80], [26, 6, 92],
[27, 2, 81], [28, 8, 79], [29, 9, 83]
]);
var options = {
chart: {
title: 'Students\' Final Grades',
subtitle: 'based on hours studied'
},
width: 900,
height: 500,
axes: {
y: {
'hours studied': { label: 'Hours Studied' },
'final grade': { label: 'Final Exam Grade' }
}
},
series: {
0: { axis: 'hours studied' },
1: { axis: 'final grade' }
},
//pointSize: 10,
//lineWidth: 1
};
var chart = new google.charts.Scatter(document.getElementById('chart_div'));
chart.draw(data, google.charts.Scatter.convertOptions(options));
google.visualization.events.addListener(chart, 'ready', configureChart);
}
function configureChart()
{
var chartContainer = document.getElementById('chart_div');
var options = {
pointSize: 3,
lineWidth: 1
};
drawLines(chartContainer,options);
}
function drawLines(chartContainer,options)
{
var points = chartContainer.getElementsByTagName('circle');
var area = {};
for(var i = 0; i < points.length;i++){
if(i > 0){
area.start = {'x': points[i-1].getAttribute('cx'), 'y': points[i-1].getAttribute('cy')};
area.end = {'x': points[i].getAttribute('cx'), 'y': points[i].getAttribute('cy')};
if(points[i].getAttribute('fill') == points[i-1].getAttribute('fill'))
drawLine(chartContainer,area,points[i].getAttribute('fill'),'1');
}
}
}
function drawLine(chartContainer,area,color,width)
{
var line = document.createElementNS('http://www.w3.org/2000/svg','line');
line.setAttribute('x1',area.start.x);
line.setAttribute('y1',area.start.y);
line.setAttribute('x2',area.end.x);
line.setAttribute('y2',area.end.y);
line.setAttribute('stroke-width',width);
line.setAttribute('stroke',color);
var svg = chartContainer.getElementsByTagName('svg')[0];
svg.appendChild(line);
}
#chart_div circle {
r: 3;
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
I want to create a google chart which has 3 columns. Also I want to add 2 sets to data to it. Please refer to the JS code for understanding.
Also you can check https://jsfiddle.net/dt6syt2w/2/
I'm looking forward to getting some solution from user : asgallant
google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawTrendlines);
function drawTrendlines()
{
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'X');
data1.addColumn('number', 'Normal Value 1');
data1.addColumn('number', 'Peak Value 1');
data1.addRows([
[0, 0, 0], [1, 10, 15], [2, 23, 25], [3, 17, 26], [4, 18, 30], [5, 9, 20],
[6, 11, 25], [7, 27, 30]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'X');
data2.addColumn('number', 'Normal Value 2');
data2.addColumn('number', 'Peak Value 2');
data2.addRows([
[1, 1, 1], [2, 20, 25], [3, 25, 30], [4, 23, 35], [5, 28, 36], [6, 19, 40], [7, 80, 100]
]);
var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0, 0]], [1], [1], [1]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(joinedData, options);
}
Just have to fix up your join() call:
var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1, 2], [1, 2]);
The [[0, 0]] compares keys at column position 0 for each datatable passed in. The [1, 2] supplied to the next arguments join the columns at position 1 and 2 in each data table. Since the columns named Normal Value 1, Peak Value 1, Normal Value 2, and Peak Value 2 are at those positions, the data comes from there.
google.load('visualization', '1', {
packages: ['corechart', 'line']
});
google.setOnLoadCallback(drawTrendlines);
function drawTrendlines() {
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'X');
data1.addColumn('number', 'Normal Value 1');
data1.addColumn('number', 'Normal Value 2');
data1.addRows([
[0, 0, 0],
[1, 10, 15],
[2, 23, 25],
[3, 17, 26],
[4, 18, 30],
[5, 9, 20],
[6, 11, 25],
[7, 27, 30]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'X');
data2.addColumn('number', 'Peak Value 1');
data2.addColumn('number', 'Peak Value 2');
data2.addRows([
[1, 1, 1],
[2, 20, 25],
[3, 25, 30],
[4, 23, 35],
[5, 28, 36],
[6, 19, 40],
[7, 80, 100]
]);
var joinedData = google.visualization.data.join(data1, data2, 'full', [
[0, 0]
], [1, 2], [1, 2]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(joinedData, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div">
<div>
I'm trying to use Flot to make a line graph with multiple series, then smoothing the lines out using the CurvedLines plugin.
I can get my multiple series line chart using flot alone to get jagged lines. I can also use the CurvedLines plugin to make a single smooth line chart. But for some reason, I'm unable to make my multiple series line graph smooth.
Here is a link to the graph I'm working on: www.somanifamily.com/multiple/
I am positive that there is nothing wrong with my CSS or the external JS files.
Here is the (slightly abridged) Javascript from my page:
$(function() {
var datasets = {
"oak": {
label: "Oak (Querus)",
data: [[10, 30], [20, 0], [30, 23], [40, 54], [50, 45], [60, 2], [70, 0], [80, 0], [90, 0], [100, 0], [110, 0], [120, 0]]
},
"elm": {
label: "Elm (Ulmus)",
data: [[10, 0], [20, 0], [30, 0], [40, 45], [50, 23], [60, 0], [70, 0], [80, 0], [90, 0], [100, 0], [110, 0], [120, 0]]
},
"weeds": {
label: "Total Weeds",
data: [[10, 0], [20, 0], [30, 0], [40, 45], [50, 23], [60, 0], [70, 0], [80, 0], [90, 0], [100, 0], [110, 0], [120, 0]]
},
"grass": {
label: "Total Grass",
data: [[10, 0], [20, 0], [30, 0], [40, 45], [50, 23], [60, 0], [70, 0], [80, 0], [90, 0], [100, 0], [110, 0], [120, 0]]
}
};
// hard-code color indices to prevent them from shifting as
// pollens are turned on/off
var i = 0;
$.each(datasets, function(key, val) {
val.color = i;
++i;
});
// insert checkboxes
var choiceContainer = $("#choices");
$.each(datasets, function(key, val) {
var check = "checked='checked'";
if (key != "oak") check = "";
choiceContainer.append("<br/><input type='checkbox' name='" + key +
"' " + check + "id='id" + key + "'></input>" +
"<label for='id" + key + "'>"
+ val.label + "</label>");
})
choiceContainer.find("input").click(plotAccordingToChoices);
function plotAccordingToChoices() {
var d1 = [];
choiceContainer.find("input:checked").each(function () {
var key = $(this).attr("name");
if (key && datasets[key]) {
d1.push(datasets[key]);
}
});
if (d1.length > 0) {
// set options
var options = {
series: {
curvedLines: {
active: true
}
},
yaxis: {
min: 0
},
xaxis: {
tickDecimals: 0,
ticks: [[10,'Jan.'],[20,'Feb.'],[30,'March'],[40,'April'],[50,'May'],[60,'June'],
[70,'July'],[80,'Aug.'],[90,'Sep.'],[100,'Oct.'],[110,'Nov.'],[120,'Dec.']]
}
};
// plot
$.plot("#placeholder", [{data: d1, lines: { show: true }, curvedLines: {apply:true, fit: true, fitPointDist: 0.000001}}], options);
}
}
plotAccordingToChoices();
});
I'm suspecting that the error is with the line
$.plot("#placeholder", [{data: d1, lines: { show: true }, curvedLines: {apply:true, fit: true, fitPointDist: 0.000001}}], options);
How do I get the graph to plot the multiple series smoothly (and display the legend along with it)? Thanks in advance.
Your suspicion is correct. In that line, you are treating d1 as an individual series, when it is in fact an array of series. In your case, since you seem to want the same curvedLines parameters applied to all the series, you can just add them in the options (you already have active: true, you need to add the rest):
var options = {
series: {
curvedLines: {
active: true
apply: true,
fit: true,
fitPointDist: 0.000001
}
},
etc...
If you wanted different parameters for each series, you could add them there instead.
var datasets = {
"oak": {
label: "Oak (Querus)",
data: [[10, 30], [20, 0], [30, 23], [90, 0], [100, 0], [110, 0], [120, 0]]
curvedLines: {
apply: true,
fit: true,
fitPointDist: 0.000001
}
},
etc...
Then the plot line is just:
$.plot("#placeholder", d1, options);