I'm using Billboard.js (https://naver.github.io/billboard.js/) to display my data in a line graph.
In my html, I'm declaring my graph before a table and I want it to appear before said table, but it's is loading beneath the table.
How would I force the chart to appear above the table?
<head>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="~/Scripts/billboard.js"></script>
<link rel="stylesheet" href="~/Content/billboard.css">
<link rel="stylesheet" href="~/Content/insight.css">
<script type="text/javascript">
var chart = bb.generate({
data: {
x: "x",
xFormat: "%Y-%m-%d %H:%M",
columns: [
["x"#Html.Raw(Model.FirstOrDefault().List_GraphTime)],
["#Html.Raw(Model.FirstOrDefault().Name_Temp_5m)"#Model.FirstOrDefault().List_Variable_5m]
]
},
axis: {
x: {
type: "timeseries",
tick: {
format: "%Y-%m-%d %H:%M"
}
}
},
legend: {
position: "right"
},
zoom: {
enabled: {
type: "drag"
}
},
size: {
height: 600
},
padding: {
right: 260,
left: 260
},
bindto: "#chart"
});
</script>
</head>
<div id="chart"></div>
<table class="table wb-tables table-striped table-bordered">
<thead>
<tr>
<th>Update Date</th>
<th>Water Temp 5m (°C)</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#Html.DisplayFor(modelItem => item.LastUpdateTime)</td>
<td>#Html.DisplayFor(modelItem => item.Variable_5m)</td>
</tr>
}
</tbody>
</table>
Is because you're generating chart before the bind element is rendered.
Try move your generation code to happen after the bind element is rendered as follows.
<head>
...
<!-- (1) Move the generation code from -->
<script type="text/javascript">
var chart = bb.generate({ ... });
</script>
</head>
<body>
<div id="chart"></div>
<table class="table wb-tables table-striped table-bordered"></table>
<!-- (2) to this point, where after the '<div id="chart">' is rendered -->
<script type="text/javascript">
var chart = bb.generate({ ... });
</script>
</body>
Related
The code below highlights a row in a table when the mouse cursor is over a map marker.
This works, but not for all map markers, although there are values in the log.
I've tried using the trim() function on marker.on, but that's clearly not the problem. What could be the problem?
now the selection is like this
AAA no
BBB Yes
CCC no
DDD Yes
FFF-no
Mapscript
<script>
function createmaprker(dataArray) {
var map = L.map('viewmap').setView([51.56, -0.12], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
for (var i = 0; i < dataArray.length; i++) {
var marker = L.marker([dataArray[i][5], dataArray[i][6]]).addTo(map);
marker.bindPopup("Book: " + dataArray[i][2] + "<br>" + "Pages: " + dataArray[i][3]);
marker.on("mouseover", function(e) {
var popup = e.target.getPopup();
var content = popup.getContent();
var tr = $("#data-table").find("td").filter(function() {
return $(this).text() == content.split("<br>")[0].split(": ")[1];
}).closest("tr");
tr.addClass("highlight");
});
marker.on("mouseout", function(e) {
var popup = e.target.getPopup();
var content = popup.getContent();
var tr = $("#data-table").find("td").filter(function() {
return $(this).text() == content.split("<br>")[0].split(": ")[1];
}).closest("tr");
tr.removeClass("highlight");
});
}
}
</script>
code.gs
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate();
}
function getData() {
var values=[['111', '1111', 'AAA', '752', 'Hardcover', '51.55', '-0.11'], ['222', '5555', 'BBB',' 1040', 'Hardcover', '51.55', '-0.10'], ['333', '777','CCC', '846', 'Hardcover', '51.565', '-0.11'], ['444', '888', 'DDD','258','Paperback', '51.56', '-0.12'], ['555', '555',' FFF',' 789','Hardcover', '51.55', '-0.13']]
return values;
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
Scriptdata
<script>
google.script.run.withSuccessHandler(showData).getData();
function showData(dataArray){
console.log(dataArray);
createmaprker(dataArray);
$(document).ready(function(){
$('#data-table').DataTable({
data: dataArray,
columns: [
{"title":"Rating"},
{"title":"Reviews"},
{"title":"Book"},
{"title":"Pages"},
{"title":"Type"},
{"title":"Longitude"},
{"title":"Latitude"},
]
});
});
}
</script>
index
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
<?!= include('Scriptdata'); ?>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<style>
body {
margin: 0;
padding: 0;
}
#viewmap {
width: 60%;
height: 60vh;
left: 0%;
margin: auto;
}
#text {
font-family: Georgia, 'Times New Roman', Times, serif;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<br>
<div class="row">
<table id="data-table" class="table table-striped table-sm table-hover table-bordered">
</table>
</div>
</div>
<div id="viewmap"></div>
<?!= include('Mapscript'); ?>
</body>
</html>
The problem is that the DataTables zebra-striping style is interfering with your attempts to highlight the rows with dark grey stripes.
One fix for this is to remove table-striped from your HTML table definition.
If you want to keep your zebra striping, you will need to add !important to your highlighting style:
.highlight {
background-color: yellow !important;
}
You can see an example of this in the official DataTables documentation: Highlighting rows and columns.
Click on the "CSS" tab on that page to see the style example they are using.
There is also a small typo in the data set here: ' FFF' - note that extra space before the first F.
I am working on chart pie to input the data and I want to make the correct order for the chart pie color, I want to make the green pie to go on the left and the blue pie to go on the right.
var showalert = 'opened';
var opened_today = 2;
var clicked_today = 1;
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
type: 'pie',
legend:{
position: 'right'
},
data: {
labels: ["Opened", "Clicked"],
datasets: [{
data: [
opened_today,
clicked_today
],
backgroundColor: [
"#28a745",
"#007bff"
],
}],
},
});
.chartjs-render-monitor {
animation: chartjs-render-animation 1ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment-with-locales.min.js" integrity="sha256-2upzq+m3oG9Q4Xye6pGvLrXgrzOKtTgR1D2GCLUzL2o=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
<script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/chart.js/Chart.min.js"></script>
<!-- Custom fonts for this template-->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="https://startbootstrap.github.io/startbootstrap-sb-admin-2/css/sb-admin-2.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Card Body -->
<div class="card-body" style="height: 401px;">
<div class="chart-pie pt-4 pb-2">
<canvas id="myPieChart" width="272" height="245" class="chartjs-render-monitor" style="display: block; width: 272px; height: 245px; text-align: right;"></canvas>
</div>
</div>
Here is what my chart pie show:
When I try this:
var myPieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Opened", "Clicked"],
datasets: [{
data: [
clicked_today,
opened_today
],
backgroundColor: [
"#007bff",
"#28a745"
],
}],
},
});
I am getting this:
Here is what I want to achieve:
Can you please show me an example how I can make the green pie to go on the left and the blue pie to go on the right?
Thank you.
Ok, you have to choose your data/color following clockwise, first clicked/blue then opened/green.
All settings for legend have to be inside key options
For legend, reverse does the job
var showalert = 'opened';
var opened_today = 2;
var clicked_today = 1;
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
type: 'pie',
options: {
legend: {
reverse:true,
position: 'top',
labels: {
fontColor: 'gray'
}
}
},
data: {
labels: ["Clicked","Opened"],
datasets: [{
data: [
clicked_today,
opened_today,
],
backgroundColor: [
"#007bff", //blue
"#28a745", //green,
],
}],
},
});
.chartjs-render-monitor {
animation: chartjs-render-animation 1ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment-with-locales.min.js" integrity="sha256-2upzq+m3oG9Q4Xye6pGvLrXgrzOKtTgR1D2GCLUzL2o=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
<script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/chart.js/Chart.min.js"></script>
<!-- Custom fonts for this template-->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="https://startbootstrap.github.io/startbootstrap-sb-admin-2/css/sb-admin-2.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Card Body -->
<div class="card-body" style="height: 401px;">
<div class="chart-pie pt-4 pb-2">
<canvas id="myPieChart" width="272" height="245" class="chartjs-render-monitor" style="display: block; width: 272px; height: 245px; text-align: right;"></canvas>
</div>
</div>
Currently i am making this in which the graph plot is going down.
As i am entering the values they are added to the table but when i click the Add button as the data is added to the table the graph plot keeps going down.
As the number of entries in the table increases the graph plot keeps going down. How do i resolve this issue?
function myfunction(){
//INFRARED
var l=document.getElementById("no").value;
var a=7.81*Math.pow(10,11)*Math.exp(-48.8/l);
document.getElementById("show").innerHTML=a;
//ULTRAVIOLET
var x= 0.0175 ;
var b=((154.2*x)/((46.6*x)+60))*Math.pow(10,-2)*Math.exp(-4.43/l);
document.getElementById("demo").innerHTML=b;
//RAYLEIGH
var c=1.7*(0.085/l);
document.getElementById("rayleigh").innerHTML=c;
}
var list1=[];
var list2=[];
var list3=[];
var list4=[];
var n =1;
var x=0;
function AddRow(){
var AddRown= document.getElementById('abc');
var NewRow= AddRown.insertRow(AddRown.rows.length);
//var NewRow=AddRown.insertRow(1);
list1[x]=document.getElementById("no").value;
list2[x]=document.getElementById("show").innerHTML;
list3[x]=document.getElementById("demo").innerHTML;
list4[x]=document.getElementById("rayleigh").innerHTML;
var cel1=NewRow.insertCell(0);
var cel2=NewRow.insertCell(1);
var cel3=NewRow.insertCell(2);
var cel4=NewRow.insertCell(3);
cel1.innerHTML=list1[x];
cel2.innerHTML=list2[x];
cel3.innerHTML=list3[x];
cel4.innerHTML=list4[x];
n++;
x++;
}
// Char
Chart.defaults.global.defaultColor = 'rgba(30, 0,50, 0.1)';
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: list1,
datasets: [{
label: 'INFRARED',
//backgroundColor: 'blue',
borderColor: 'blue',
data: list2,
},{
label: 'ULTRAVIOLET',
//backgroundColor: 'green',
borderColor: 'green',
data: list3,
},
{
label: 'RAYLEIGH',
//backgroundColor: 'green',
borderColor: 'red',
data: list4,
},
]
},
// Configuration options go here
options: {}
});
function updateChart(){
chart.data.datasets[0].data=list2;
chart.data.datasets[1].data=list3;
chart.data.datasets[2].data=list4;
chart.update();
//document.getElementById("myChart").style.position = "fixed";
}
body{
background-color: bisque;
}
#show th, #show td{
padding:13px;
}
#btna td input{
width:100%;
}
.t1{
margin-top: 30px;
margin-left: 50px;
text-align:center;
background:rgb(122, 40, 40);
color:rgb(131, 248, 137);
}
.t2{
margin-left:20px;
text-align:center;
background:rgb(122, 40, 40);
color:rgb(131, 248, 137);
}
.card-body{
border: 1px solid;
width:500px;
height:400px;
margin-left: 800px;
margin-top:-300px;
background-color: aquamarine;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="sty.css">
<script src="main.js"></script>
<title>DYNAMIC CHART</title>
</head>
<body>
<table border="4" class="t1">
<thead>
<tr>
<th>WAVELENGTH</th>
<td><input type="text" name="no" id="no"></td>
</tr>
</thead>
<tbody>
<tr>
<th>INFRARED</th>
<td id="show" class="infra"></td>
</tr>
<tr>
<th>ULTRAVIOLET</th>
<td id="demo" class="ultra"></td>
</tr>
<tr>
<th>RAYLEIGH</th>
<td id="rayleigh" class="ray"></td>
</tr>
<tr id="btna">
<td colspan="2"><input type="button" name="button" id="btn"
value="Calculate" onclick="myfunction()"></td>
</tr>
<tr>
<td colspan="2"><input type="button" name="button" id="btn"
value="Add" onclick="AddRow()"></td>
</tr>
</tbody>
</table>
<table border="4" id="abc" class="t2" style="margin-top:70px">
<thead>
<tr>
<th>WAVELENGTH</th>
<th>INFRARED</th>
<th>ULTRAVIOLET</th>
<th>RAYLEIGH</th>
</tr>
</thead>
</table>
<div class="card-body">
<h1>DYNAMIC CHART<button class="btn btn-success"
onclick="updateChart()">Update</button></h1>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<script src="main.js">
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
I want my chart to be inline with other div and with the main div , but I am not able to fix the height of the piechart div , I want the extra padding to be removed . how do i achieve that ?
chart.html
<html>
<head>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="chart1.js"></script>
</head>
<body>
<div style="width:175px; height :200px">
<div >
<table style="width:100%;border:1px solid green">
<tr>
<td>Execution %</td>
<td style="text-align:right">70</td>
</tr>
<tr>
<td>Pass %</td>
<td style="text-align:right">90</td>
</tr>
</table>
</div>
<div id="chartdiv" style="min-width: 100px; max-width:100%;max-hright:100%;border:3px solid black ">
</div>
</div>
the js file for rendering this chart is :-
$(function() {
var chart = new Highcharts.Chart('chartdiv',{
chart: {
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
credits: {
enabled: false
},
title: {
text: null
},
plotOptions: {
pie: {
size:'100%',
slicedOffset: 0,
dataLabels: {
enabled: false
}
}
},
series: [{
type: 'pie',
name: 'Months',
data: [
['Jan', 45.0],
['Feb', 26.8],
['Mar', 8.5],
['June', 6.2],
['July', 21.0]
]}]
});
});
add style for chart div - "chartdiv"
width:100% !important;
height:100% !important;
I have used the google line chart, applied the line width as 5px but it is not working. I have used the following code,
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {
'packages': ['corechart']
});
var options, data, chart;
$(function () {
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
var tweets_table = $('#tweet-table');
function getData() {
// Create array to hold our values for data table
// Each key is an array which represents a "row" of data
var values = [];
// get our values
$('#tweet-table tr').each(function (i, v) {
// Create a new "row"
values[i] = [];
// Get either th or td and loop
$(this).children('th,td').each(function (ii, vv) {
if ($(this).is('td.tweet-count')) {
// if we're looking at a numeric column be sure
// to pass a integar to the Chart API
values[i][ii] = parseFloat($(this).html());
} else {
// otherwise just get the text string
values[i][ii] = $(this).html();
}
});
});
return values;
}
function drawChart() {
var values = getData();
// Create the data table.
data = google.visualization.arrayToDataTable(values);
// Set chart options
options = {
'width': '100%',
'height': 500,
fontSize: 16,
fontName: 'Arial',
tooltip: {isHtml: true},
titlePosition: 'none',
colors: ['#000'],
areaOpacity: 0.1,
pointSize: 15,
pointShape: "circle",
chartArea: { width: '90%' },
lineWidth: 5,
legend: {
position: 'none'
},
hAxis: {
textStyle: {
fontSize:'16',
color:'#555555',
fontName: 'Arial'
},
format: '0.00',
minValue: -1 ,
},
vAxis: {
textStyle: {
fontSize:'16',
color:'#555555',
fontName: 'Arial'
},
titleTextStyle: {color: "#000",bold: "true",italic: "false"},
title: "Total sales",
gridlines: {
color: '#ddd',
count: 6
},
baselineColor: '#522fa1',
},
};
var formatter = new google.visualization.NumberFormat({prefix: '', negativeColor: 'red', negativeParens: true});
formatter.format(data, 0); // Apply formatter to first column
var formatter2 = new google.visualization.NumberFormat({ fractionDigits: 5});
formatter2.format(data, 1);
// Instantiate and draw our chart, passing in some options.
chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
});
$(window).smartresize(function () {
chart.draw(data, options);
});
And this is the html code,
<html class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Charted Tweets</title>
<meta name="description" content="My Twitter RT's plotted on Google charts for netmag">
<!-- Google will often use this as its description of your page/site. Make it good. -->
<meta name="author" content="David Smith">
<link rel="stylesheet" href="_/css/normalize.css">
<link rel="stylesheet" href="_/css/grid.css">
<link rel="stylesheet" href="_/css/typo.css">
<link rel="stylesheet" href="_/css/bootstrap.min.css">
<link rel="stylesheet" href="_/css/site.css">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<body class="">
<div class="page">
<h1>Tweets by #get_dave by date</h1>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="position: relative; ">
</div>
<table class="table table-striped" id="tweet-table">
<caption>#get_dave's Tweets by date</caption>
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Tweets</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tweet-date">03/03/12</td>
<td class="tweet-count">2</td>
</tr>
<tr>
<td class="tweet-date">04/03/12</td>
<td class="tweet-count">1</td>
</tr>
<tr>
<td class="tweet-date">05/03/12</td>
<td class="tweet-count">1</td>
</tr>
<tr>
<td class="tweet-date">06/03/12</td>
<td class="tweet-count">8</td>
</tr>
<tr>
<td class="tweet-date">07/03/12</td>
<td class="tweet-count">4</td>
</tr>
<tr>
<td class="tweet-date">07/03/12</td>
<td class="tweet-count">0</td>
</tr><tr>
<td class="tweet-date">07/03/12</td>
<td class="tweet-count">0</td>
</tr>
<tr>
<td class="tweet-date">08/03/12</td>
<td class="tweet-count">3</td>
</tr>
</tbody>
</table>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="_/js/debounce.js"></script>
<script src="_/js/functions.js"></script>
</body></html>
and my output is
In output, the line width on the baseline is lighter than other linewidth. I need to equalize the line width at all places..
The issue is that the horizontal axis is interfering with your line. This is due to the minimum value of the vertical axis.
I played around with a jsfiddleto replicate the issue. Notice the minValue: -1 on the vAxis parameter. It looks like you put that on the hAxis.
var options = {
lineWidth: 5,
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity',
minValue: -1
}
};