## Website with interactive table (and charts)

Hi,
I am totally new web developing but I hope I can find some advise here where to look further.

I've got an idea I am very eager to realize.
Basically, the idea is that I want to compile certain mutual funds into a table (listing fees, past performance, Morningstar-rating etc) and then make the user sorts/filter by criteria of their choice and multi-select funds, to build their portfolio. Based on their selection, I want charts to be created (e.g. showing the distribution of e.g….

Website with interactive table (and charts)

## Data visualisation: Pie charts with really small values

How do you solve the problem of pie charts always having the possibility of really low values (like 0.1% or 1%) and thus really small slices. It becomes especially problematic when you want to show % labels on top of the slice.

## Django extends tag makes JS charts not load

I am using a base.html file to create a navigation bar to all the child templates.

The problem i’m facing is that this interferes with my JS charts (google charts) by not loading them anymore. Could anyone shine some light as to why this happens, and maybe a possible fix?

base.html:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> </head> <body>         {% block tab_menu %}  <div class="topnav">   <a href="/index">Home</a>   <a href="/index/devops">Devops</a>   <a href="/index/qa">QA</a>   <a href="/index/frontend">Frontend</a>      <a href="/index/middleware">Middleware</a>      <a href="/index/portal">Portal</a>   < </div> {% endblock tab_menu %}   </body> </html> 

child.html:

<!DOCTYPE html> <html lang="en"> <head>      {% extends "KPI/base.html" %}      <meta charset="UTF-8">     <title>Title</title>     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>     <script type="text/javascript">              google.charts.load("current", {packages:["corechart"]});              google.charts.setOnLoadCallback(VelocityChart);              function VelocityChart() {                var data = google.visualization.arrayToDataTable([                  ['Status', 'Number of Tasks'],                  ['Completed', {{completed_velocity}}],                  ['Incompleted',  {{incomplete_velocity}}],                 ]);                  var options = {                    title: '',                    is3D: true,                  };                 var chart = new google.visualization.PieChart(document.getElementById('velocity_chart'));         chart.draw(data, options);       }      </script> </head> <body>  {% block tab_menu %}    {{ block.super }}  <h2> QA Dashboard</h2>   <div id="leakage_div"></div> <br> <div id="severity_div"></div> <br> <div id ="validated_div"></div>  {% endblock tab_menu %} </body> </html> 

The code in the base.html file works fine on the other templates, but won’t load the charts in the child templates.

## Aggregate results by week and month for charts

Is there a way to convert daily values into weekly averages for charting?

Sample source sheet

--------------------------------------------------- | Data 1 | 1/1/2018 | 1/2/2018 | 1/3/2018 | etc...365 days | --------------------------------------------------- | row 1  |    25    |   30     |    5     | etc...|  --------------------------------------------------- | row 2  |    2     |          |    4     | etc...| --------------------------------------------------- | etc ... each row has a different cadence. 

Except for, each row may not have values daily, but rather weekly or monthly, depending on the cadence. So I would like to use the query function to aggregate some rows as weeks, and some rows as the month.

Expected results for a weekly aggregate (if there is more than 1 value I just want the avg for the week, IE: if in a week there are values: 2,3,3, simply show: 2)

--------------------------------------------------- | Data 1 | Week 1 | Week 2 | Week 3 | etc...52 weeks | --------------------------------------------------- | row 1  |    25  |   30   |    5   | etc...|  --------------------------------------------------- | row 2  |    2   |   0    |    4   | etc...| --------------------------------------------------- | etc ...  

for a monthly aggregate (if there is more than 1 value I just want the avg for the month, IE; if in a month there are values: 25,50,100, simply show: 58)

--------------------------------------------------- | Data 1 | Jan | Feb | Mar | etc...12 months | --------------------------------------------------- | row 1  | 50  | 30  |  55 | etc...|  --------------------------------------------------- | row 2  | 2   |  0  | 4   | etc...| --------------------------------------------------- | etc ... 

This way, I can create graphs showing the correct unit of measure (week, month, etc). How could I convert?

## Can I precisely position charts in Google Sheets?

I am using Google Sheets to create a “Monthly Report” spreadsheet for a product, and am attempting to make an attractive, compelling experience for the consumers of the report.

In this spreadsheet, I have several charts across the top of a tab. Due to the controls for grabbing and resizing a chart, it seems to be impossible to make the charts a uniform size and impossible to place them in a position that lines up with the block of cells the chart describes.

Is there a way precisely to control the size and position of a chart in Google Sheets?

## a.getTime is not a function – Google Charts

Boa noite

Gostaria de saber se alguém já pegou esse erro ao criar os gráficos pelo Google Charts

a.getTime is not a function

Retorno do Json

<html>   <head>   <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>   </head>   <body>     <div id="teste" style="width: 900px; height: 500px"></div>          <script>        google.charts.load('current', {'packages':['bar']});       google.charts.setOnLoadCallback(drawChart);        function drawChart() {         var jsonData = $.ajax({ url: "control/getTeste.php", dataType: "json", async: false, }).responseText; var data = new google.visualization.DataTable(jsonData); var chart = new google.charts.Bar(document.getElementById('teste')); chart.draw(data, null); } </script> </body> </html> ## Como fazer style num texto de um gráfico do Google Charts Bom dia! Tenho uma dúvida na utilização do Google Charts. Gostava de saber como faço para colocar style no texto. Sei que dá para fazer no título utilizando titleTextStyle, mas não sei como fazer para o texto em geral! Também sei que de certa forma dá para fazer com o annotations, mas continuou sem dar. A parte do código do annotations está aqui (penso que seja aqui que esteja o erro): annotations: { textStyle: { fontSize: 10, color: 'red' } }  O meu código (em script) é o seguinte: <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'mes'); data.addColumn('number', 'tickets'); <?php if ($  numReg_tickets_grafico = mysqli_num_rows($consulta_tickets_grafico) > 0) { while($  result_tickets_grafico = mysqli_fetch_assoc($consulta_tickets_grafico)) { ?> data.addRows([ ['<?=$  result_tickets_grafico['data_mes'] ?>', <?= \$  result_tickets_grafico['id'] ?>]                 ]);                 <?php                         }                     }                 ?>                  var options = {                     'title':'Gráfico das Estatísticas',                     'width':600,                     'height':700,                     hAxis: {                         title: 'Mês'                     },                     vAxis: {                         title: 'Tickets Fechados'                     },                     annotations: {                         textStyle: {                             fontSize: 10,                             color: 'red'                         }                     }                  };                  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));                 chart.draw(data, options);             }         </script> 

De seguida segue uma imagem a mostrar o estado atual do gráfico:

]1

## Subdividing a Compact Bounded Curvature Manifold into Charts with Bounded Lipschitz Constant

Let $$M \subset \mathbb{R}^d$$ be a compact smooth $$k$$-dimensional manifold embedded in $$\mathbb{R}^d$$. Let $$\mathcal{N}(\epsilon)$$ denote the size of the minimum $$\epsilon$$ cover $$P$$ of $$M$$; that is for every point $$x \in M$$ there exists a $$p \in P$$ such that $$\| x – p\|_{2}$$. My goal is to show that $$\mathcal{N}(\epsilon) \in \Theta\left(\frac{1}{\epsilon^k}\right)$$. Note that the bound depends on the dimension $$k$$, not the embedding space $$d$$.

To this end, I’d like to construct an $$\epsilon$$-cover in each coordinate chart $$(U, \phi)$$ of $$M$$, where $$\phi: U \subset \mathbb{R}^k \rightarrow M$$. A cover in $$U$$ can be transformed under $$\phi$$ into a cover in $$M$$. If $$\phi$$ is $$L$$-Lipschitz, that is $$\|\phi(x) – \phi(y)\|_2 \leq L \|x – y\|_{2}$$, then I can create an $$\epsilon$$-cover over a subset $$\phi(U) \subset M$$, with slightly larger balls than those in $$U \subset \mathbb{R}^k$$ as determined by the Lipschitz constant $$L$$.

To have each coordinate chart $$(U, \phi)$$ be $$L$$-Lipschitz I’m willing to assume $$M$$ has bounded curvature. Can I subdivided $$M$$ into a set of coordinate charts which are $$L$$-Lipschitz and how many such charts do you need as a function of the curvature of $$M$$?

## Google Charts Group Count and Sharepoint 2013

I got the code to work that will graph the data from my list, the problem is I want a aggregate count based on one of the columns so I tried implementing Google’s group() method but can’t get it to work. My charts simply do not appear after adding it. Below is the code that works, along with the group() method I tried to implement and a link to Google’s reference guide.

What works:

<html>  <head>  <script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script> <script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js" type="text/javascript"></script> <script language="javascript"> var returnedItems = null;  function loadGoogleLibAndDraw(){  google.charts.load('current', {'packages':['bar','line']});  google.charts.setOnLoadCallback(visualizeData); } function visualizeData() {   var context = new SP.ClientContext();   var list = context.get_web().get_lists().getByTitle(document.getElementById('EERelationsRecords').value);   var caml = new SP.CamlQuery();   caml.set_viewXml("<View></View>");    returnedItems = list.getItems(caml);   context.load(returnedItems);   context.executeQueryAsync(onSucceededCallback, onFailedCallback);  }   function onSucceededCallback(sender, args) {   var data = new google.visualization.DataTable();  data.addColumn('string', 'Reason');  data.addColumn('number', 'ID');  var enumerator = returnedItems.getEnumerator();   var markup = '';   while (enumerator.moveNext()) {   var row = [];  var listItem = enumerator.get_current();   row.push(listItem.get_item('Reason'));  row.push(listItem.get_item('ID'));  data.addRow(row);  // This call will group the table by column 0 values. // It will also show column 1, which will be a count of // values in that column for that row group. var resultData = google.visualization.data.group(   data,   [0],   [{, 'aggregation': google.visualization.data.count, 'type': 'number', 'Count'}] );   }     var options = {  chart: {  title: 'Sales Trend',  },  bars: 'vertical'   };  var barChart = new google.charts.Bar(document.getElementById('BarChart'));  barChart.draw(data, options);   var lineChart = new google.charts.Line(document.getElementById('LineChart'));  lineChart.draw(data, options); }   function onFailedCallback(sender, args) {   var markup = '<p>The request failed: <br>';   markup += 'Message: ' + args.get_message() + '<br>';   displayDiv.innerHTML = markup;  } </script> </head>   <body onload="loadGoogleLibAndDraw()">   <form name="metricsform" id="metricsform">  <input id="EERelationsRecords" name="EERelationsRecords" value="EERelationsRecords" type="hidden"/>  </form>  <div>   <div id="displayDiv"></div>  <div id="BarChart" style="width: 300px; height: 200px;"></div>  <div id="LineChart" style="width: 300px; height: 200px;"></div>  </div>  </body>  </html> 

// This call will group the table by column 0 values. // It will also show column 1, which will be a count of // values in that column for that row group. var resultData = google.visualization.data.group(   data,   [0],   [{, 'aggregation': google.visualization.data.count, 'type': 'number', 'Count'}] );