Develop Reference

Draw pie chart using spring boot, thymeleaf, js, highchart but can't

I'm new with js and spring, now i want to create a html dashboard and this page will have a small div with pie chart. But i can't create pie chart.
I try some tutorial in youtube but now i want to pass value to ajax or something like that to get the pie chart.
Here is my Code:
admin_homepage.html:
<div class="col-xl-4 col-lg-5">
<div class="card shadow mb-4">
<!-- Thay chart vào thẻ div này -->
<div class="card-body">
<div class="chart-pie pt-4 pb-2">
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$.ajax({
/* for pie chart */
url: "admin_home",
success: function(result){
/* pie chart starts here */
var series = [];
var data = [];
for(var i = 0; i < result.length; i++){
var object = {};
object.name = result[i].catName.toUpperCase();
object.y = result[i].catCount;
data.push(object);
}
var seriesObject = {
name: 'Course By Category',
colorByPoint: true,
data: data
};
series.push(seriesObject);
drawPieChart(series);
/* pie chart ends here */
}
});
/* for pie chart */
function drawPieChart(series){
Highcharts.chart('chartContainer', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
formatter: function() {
return '<strong>'+this.key+': </strong>'+ this.y;
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y}'
}
}
},
series: series
});
}
</script>
My Controller
#GetMapping("/admin_home")
public String viewHomePage(){
// Get list of course and count
List<CountCourse> pieChart = dashBoardRepository.countCourseByCategory();
model.addAttribute("pieChart",pieChart);
return "Admin_Homepage";
}
All i want is pass value of catName, catCount to pie chart but i can't
Any one help me. Many thanks.

Because you are using a Thymeleaf template, you are not required to use $.ajax({...}) to retrieve the pie chart data. Instead you can provide the data directly to the Thymeleaf template.
(Alternatively, you can continue to use an Ajax call - in which case, The Thymeleaf template will be rendered to HTML - and then as a separate step, the Ajax call will fetch the pie chart data.)
The following assumes the first approach (no Ajax needed):
No Ajax Needed
I took your Thymeleaf template in the question and made some changes to the script:
I removed the Ajax call.
I added a Thymeleaf variable to hold the chart data.
Here is the updated script:
<script th:inline="javascript">
// this simply wraps the code in a function
// that waits for the DOM to be ready:
(function () {
// this is populated by Thymeleaf:
var pieChartData = /*[[${pieChartData}]]*/ [];
var series = [];
var data = [];
for (var i = 0; i < pieChartData.length; i++) {
var object = {};
object.name = pieChartData[i].catName.toUpperCase();
object.y = pieChartData[i].catCount;
data.push(object);
}
var seriesObject = {
name: 'Course By Category',
colorByPoint: true,
data: data
};
series.push(seriesObject);
drawPieChart(series);
// draw the pie chart:
function drawPieChart(series) {
Highcharts.chart('chartContainer', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Your Heading Goes Here'
},
tooltip: {
formatter: function () {
return '<strong>' + this.key + ': </strong>' + this.y;
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y}'
}
}
},
// use the series data defined earlier:
series: series
});
}
})();
</script>
The key points about this script are:
The script tag looks like this:
<script th:inline="javascript">
This tells Thymeleaf that the script will contain one or more Thymeleaf expressions.
In our case we have one expression - here it is:
var pieChartData = /*[[${pieChartData}]]*/ [];
This syntax will cause Thymeleaf to replace the pieChartData variable with the data structure provided by the Java controller.
Here is that piece from the controller:
List<CountCourse> pieChartData = dashBoardRepository.countCourseByCategory();
model.addAttribute("pieChartData", pieChartData);
return "admin_homepage";
This assumes you have a CountCourse object which contains String catName and int catCount.
Thymeleaf will take the List<CountCourse> pieChartData data and generate the following JavaScript for you (using my test data):
var pieChartData = [
{"catName":"Humanities","catCount":123},
{"catName":"Sciences","catCount":145},
{"catName":"Other","catCount":67}
];
After that, I use the same logic as you have in your Ajax success function to convert this raw data into HightCharts pie chart data.
The end result is the following HTML page:
With Ajax
If you want to use your Ajax approach instead of this, then you need to build a separate end point which will return the pie chart data directly to the Ajax handler in your JavaScript code.
When you take this approach, you no longer need to use the Thymeleaf attribute:
var pieChartData = /*[[${pieChartData}]]*/ []; // NO LONGER NEEDED
And you no longer need to pass this data to your model in the controller:
model.addAttribute("pieChartData", pieChartData); // NO LONGER NEEDED
Instead, you need to continue using your $.ajax code and you need to build a separate end-point which returns the pieChartData as JSON for that Ajax call:
$.ajax({
/* for pie chart */
url: "piechart_data_json", // some new URL for your JSON pie chart data
...
});
Given you are using Thymeleaf already, I think there is no need for this approach.
Update
Just to explain the following syntax a bit more:
var pieChartData = /*[[${pieChartData}]]*/ [];
It looks like an empty JavaScript array []. But in fact, there is more to it.
The Thymeleaf variable ${pieChartData} receives the data from the controller.
Because the variable is in a <script> tag, it's not sufficient just to use the standard Thymeleaf ${pieChartData} expression. You also have to surround that expression with [[ and ]]. This is because ${pieChartData} is actually valid JavaScript - for example, as used in string interpolation.
That gives us this:
var pieChartData = [[${pieChartData}]];
This is all you need. This will work.
The problem here is, it's not valid JavaScript, so your IDE may highlight it as having a syntax error.
To work around this, you can take one extra step. You can "hide" the expression in a JavaScript comment - and then provide a valid value (the empty array). This keeps the JavaScript syntax checker happy in your IDE.
Thymeleaf will locate the variable inside that comment and remove it - and also remove the placeholder [] value.
That is how Thymeleaf pushes the Java model data into the template in this case.

How do I save a Ext.XTemplate into the DOM when using Rowexpander in EXT JS

I'm having a strange issue with the RowExpander plugin inside of my Ext.grid.Panel component. FYI this grid is backed by a Ext.data.BufferedStore component to handed the data via a REST Api
So I'm dynamically loading in values from an Ajax when the user clicks on the expand button, the row opens and makes an Ajax call using the expandbody event method.
That works great with no issues.
The problem is that when I scroll down the the page, the table rows that were open lose all thier data.
Here is my set up:
// Create Basic Ext Grid
var oDataGrid = Ext.create('Ext.grid.Panel', {
title: 'oData Entity Table',
store: oDataStore,
height: 450,
id: 'odataGrid',
loadMask: true,
plugins: [{
ptype: 'rowexpander',
enableCaching: false,
id: 'odataTableRowPlugin',
rowBodyTpl: new Ext.XTemplate('<div id="oData-Inner-Table-Row-{Id}" ><button class="btn btn-warning"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> Loading...</button></div>')
}],
viewConfig:{
listeners:{
expandbody: function(__rowNode, __record, __expandRow, __eOpts){
var _rowId = __record.get('Id');
var _targetId = 'oData-Inner-Table-Row-' + _rowId;
var _finalUrl = _that._URLROOT +'/odata/' + _that._ENTITYTYPE;
var _qb = new OData.QueryBuilder(_finalUrl);
var _type = OData.INT32;
var _operator = OData.EQUALS;
var _filter = 'Id';
_qb.addWhereFilter('id_'+_rowId, _type, _filter, _operator, _rowId);
var _query = _qb.generateQueryUrl();
// Include Expand NavProps
_query = _query + _that.createExpandedUrl();
_that.grabEntityObject(_query,_targetId);
}
}
},
renderTo: 'oData-grid'
});
So even though the row has been updated the information doesn't seem to be saved into the dom or something.
Any thoughts clues, suggestions, etc?

anychart not taking dynamically added data

I am using anychart to draw a chart in my page, My code is like this
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.anychart.com/js/7.12.0/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.12.0/anychart-ui.min.css" />
<input id="chart-charitytomoney" value="[["Charity 4",10.00],["Charity 2",20.00],["Charity Donate",100.00],["Donate Your Humanity",5920.00],["Gift your Work",3155.00],["Celebrate Baby Shower",770.00],["Refer Friends",110.00],["Gift Your Friends",200.00],["Celebrate B\u0027day With Us",220.00],["Celebrate Weekend",50.00],["Piggy Bank",4100.00],["Give a Single Gift",4050.00]]">
<div id="chart-container" style="height:550px!important"></div>
<script type="text/javascript">
$(document).ready(function(){
anychart.onDocumentReady(function () {
var data = $("#chart-charitytomoney").val();
// create column chart
chart = anychart.column();
// turn on chart animation
chart.animation(true);
// set chart title text settings
chart.title('Charities by donation');
// create area series with passed data
alert(data);
var series = chart.column(data);
// set series tooltip settings
series.tooltip().titleFormatter(function () {
return this.x
});
series.tooltip().textFormatter(function () {
return '$' + parseInt(this.value).toLocaleString()
});
series.tooltip().position('top').anchor('bottom').offsetX(0).offsetY(5);
// set scale minimum
chart.yScale().minimum(0);
// set yAxis labels formatter
chart.yAxis().labels().textFormatter("${%Value}");
// tooltips position and interactivity settings
chart.tooltip().positionMode('point');
chart.interactivity().hoverMode('byX');
// axes titles
chart.xAxis().title('Product');
chart.yAxis().title('Revenue');
// set container id for the chart
chart.container('chart-container');
// initiate chart drawing
chart.draw();
});
});
</script>
Everything looks okay to me, But chart is not working.
but if I changed this line
var data = $("#chart-charitytomoney").val();
to
var data = [["Charity 4", 10.00], ["Charity 2", 20.00], ["Charity Donate", 100.00], ["Donate Your Humanity", 5920.00], ["Gift your Work", 3155.00], ["Celebrate Baby Shower", 770.00], ["Refer Friends", 110.00], ["Gift Your Friends", 200.00], ["Celebrate B\u0027day With Us", 220.00], ["Celebrate Weekend", 50.00], ["Piggy Bank", 4100.00], ["Give a Single Gift", 4050.00]]
Everything works. Can anyone point out what I am doing wrong here? And How I can overcome it?

It is a peculiar way to pass data but you can do that, just:
Option 1
You should use quotes in the input field:
<input id="chart-charitytomoney" value="[['Charity 4',10.00],['Charity 2',20.00],['Charity Donate',100.00],['Donate Your Humanity',5920.00],['Gift your Work',3155.00],['Celebrate Baby Shower',770.00],['Refer Friends',110.00],['Gift Your Friends',200.00],['Celebrate B\u0027day With Us',220.00],['Celebrate Weekend',50.00],['Piggy Bank',4100.00],['Give a Single Gift',4050.00]]">
And you need to eval() the result:
var data = eval($("#chart-charitytomoney").val());
Here is a sample: http://jsfiddle.net/yr35w6nu/8/
However, eval is no quite secure, if you want to store data in a string in a field like this consider using code like this:
Option 2
var data = JSON.parse($("#chart-charitytomoney").val().replace(/\'/g,'\"'));
shown in this sample: http://jsfiddle.net/yr35w6nu/9/
The same may be applied to your code with &quote;:
var data = JSON.parse($("#chart-charitytomoney").val().replace(/\"/g,'\"'));
Sample parsing quotes: http://jsfiddle.net/yr35w6nu/10/
Option 3
There is also a way to store CSV formatted string:
<input id="chart-charitytomoney" value="Charity 4,10.00;Charity 2,20.00;Charity Donate,100.00;Donate Your Humanity,5920.00;Gift your Work,3155.00;Celebrate Baby Shower,770.00\nRefer Friends,110.00;Gift Your Friends,200.00;Celebrate B\u0027day With Us,220.00;Celebrate Weekend,50.00\nPiggy Bank,4100.00\nGive a Single Gift,4050.00">
and then use it:
var data = anychart.data.set($("#chart-charitytomoney").val(),{rowsSeparator: ';'});
http://jsfiddle.net/yr35w6nu/13/

format json data for flot graph array

I am pulling temperature sensor data from a MySQL db into a php file using the following php code:
<?php
$hostname = 'xxxxx';
$username = 'xxxxx';
$password = 'xxxxx';
$dbname="measurements";
$usertable="temperature";
try {
$dbh = new PDO("mysql:host=$hostname;dbname=measurements",
$username, $password);
/*** The SQL SELECT statement ***/
$sth = $dbh->prepare("
SELECT
ROUND(AVG(`temperature`),1) AS temperature,
TIMESTAMP(LEFT(`dtg`,16)) AS dtg
FROM `temperature`
GROUP BY LEFT(`dtg`,16)
ORDER BY `dtg` DESC
LIMIT 0,800
");
$sth->execute();
/* Fetch all of the remaining rows in the result set */
$result = $sth->fetchAll(PDO::FETCH_ASSOC);
/*** close the database connection ***/
$dbh = null;
}
catch(PDOException $e)
{
echo $e->getMessage();
}
function make_pair($date, $amount) {
return array($date, $amount);
}
$json_data = json_encode($result, JSON_NUMERIC_CHECK);
?>
I am then using javascript to plot this data in a flot graph:
<script type="text/javascript">
//put array into javascript variable
var dataset1 = <?php echo json_encode($result); ?>;
//plot
$(document).ready(function () {
$.plot($("#placeholder"), dataset1 );
});
</script>
When I open the php file in a browser and look at the javscript console I can see that the data is coming through ok and being held as the variable dataset1
It looks like this:
//put array into javascript variable
var dataset1 = [{"temperature":"19.6","dtg":"2016-07-28 12:53:00"},{"temperature":"19.5","dtg":"2016-07-28 12:52:00"},{"temperature":"19.5","dtg":"2016-07-28 12:51:00"},{"temperature":"19.6","dtg":"2016-07-28 12:50:00"},{"temperature":"19.6","dtg":"2016-07-28 12:49:00"},{"temperature":"19.6","dtg":"2016-07-28 12:48:00"},{"temperature":"19.6","dtg":"2016-07-28 12:47:00"},{"temperature":"19.6","dtg":"2016-07-28 12:46:00"},{"temperature":"19.6","dtg":"2016-07-28 12:45:00"},{"temperature":"19.6","dtg":"2016-07-28 12:44:00"},{"temperature":"19.7","dtg":"2016-07-28 12:43:00"},{"temperature":"19.7","dtg":"2016-07-28 12:42:00"},{"temperature":"19.7","dtg":"2016-07-28 12:41:00"},{"temperature":"19.7","dtg":"2016-07-28 12:40:00"},{"temperature":"19.7","dtg":"2016-07-28 12:39:00"},{"temperature":"19.7","dtg":"2016-07-28 12:38:00"},{"temperature":"19.8","dtg":"2016-07-28 12:37:00"},{"temperature":"19.8","dtg":"2016-07-28 12:36:00"},{"temperature":"19.8","dtg":"2016-07-28 12:35:00"},{"temperature":"19.8","dtg":"2016-07-28 12:34:00"},{"temperature":"19.8","dtg":"2016-07-28 12:33:00"},{"temperature":"19.8","dtg":"2016-07-28 12:32:00"},{"temperature":"19.8","dtg":"2016-07-28 12:31:00"},{"temperature":"19.8","dtg":"2016-07-28 12:30:00"},{"temperature":"19.9","dtg":"2016-07-28 12:29:00"},{"temperature":"19.9","dtg":"2016-07-28 12:28:00"},{"temperature":"19.9","dtg":"2016-07-28 12:27:00"},{"temperature":"19.9","dtg":"2016-07-28 12:26:00"},{"temperature":"19.9","dtg":"2016-07-28 12:25:00"},{"temperature":"19.9","dtg":"2016-07-28 12:24:00"},{"temperature":"20.0","dtg":"2016-07-28 12:23:00"},{"temperature":"20.0","dtg":"2016-07-28 12:22:00"},{"temperature":"20.1","dtg":"2016-07-28 12:21:00"},{"temperature":"20.1","dtg":"2016-07-28 12:20:00"},{"temperature":"20.1","dtg":"2016-07-28 12:19:00"},{"temperature":"20.0","dtg":"2016-07-28 12:18:00"},{"temperature":"20.0","dtg":"2016-07-28 12:17:00"},{"temperature":"20.0","dtg":"2016-07-28 12:16:00"},{"temperature":"20.0","dtg":"2016-07-28 12:15:00"},{"temperature":"20.0","dtg":"2016-07-28 12:14:00"},{"temperature":"20.0","dtg":"2016-07-28 12:13:00"},{"temperature":"20.0","dtg":"2016-07-28 12:12:00"},{"temperature":"20.0","dtg":"2016-07-28 12:11:00"},{"temperature":"19.9","dtg":"2016-07-28 12:10:00"},{"temperature":"20.0","dtg":"2016-07-28 12:09:00"},{"temperature":"20.0","dtg":"2016-07-28 12:08:00"},{"temperature":"20.0","dtg":"2016-07-28 12:07:00"},{"temperature":"20.0","dtg":"2016-07-28 12:06:00"},{"temperature":"19.9","dtg":"2016-07-28 12:05:00"},{"temperature":"19.9","dtg":"2016-07-28 12:04:00"},{"temperature":"19.9","dtg":"2016-07-28 12:03:00"},{"temperature":"19.9","dtg":"2016-07-28 12:02:00"},{"temperature":"19.9","dtg":"2016-07-28 12:01:00"},{"temperature":"19.9","dtg":"2016-07-28 12:00:00"},{"temperature":"19.9","dtg":"2016-07-28 11:59:00"},{"temperature":"19.9","dtg":"2016-07-28 11:58:00"},{"temperature":"19.8","dtg":"2016-07-28 11:57:00"},{"temperature":"19.8","dtg":"2016-07-28 11:56:00"},{"temperature":"19.8","dtg":"2016-07-28 11:55:00"},{"temperature":"19.8","dtg":"2016-07-28 11:54:00"},{"temperature":"19.8","dtg":"2016-07-28 11:53:00"},{"temperature":"19.7","dtg":"2016-07-28 11:52:00"},{"temperature":"19.7","dtg":"2016-07-28 11:51:00"},{"temperature":"19.7","dtg":"2016-07-28 11:50:00"},{"temperature":"19.7","dtg":"2016-07-28 11:49:00"},{"temperature":"19.7","dtg":"2016-07-28 11:48:00"},{"temperature":"19.7","dtg":"2016-07-28 11:47:00"},{"temperature":"19.6","dtg":"2016-07-28 11:46:00"},{"temperature":"19.7","dtg":"2016-07-28 11:45:00"},{"temperature":"19.6","dtg":"2016-07-28 11:44:00"},{"temperature":"19.6","dtg":"2016-07-28 11:43:00"},{"temperature":"19.6","dtg":"2016-07-28 11:42:00"},{"temperature":"19.6","dtg":"2016-07-28 11:41:00"},{"temperature":"19.6","dtg":"2016-07-28 11:40:00"},{"temperature":"19.6","dtg":"2016-07-28 11:39:00"},{"temperature":"19.6","dtg":"2016-07-28 11:38:00"},{"temperature":"19.6","dtg":"2016-07-28 11:37:00"},{"temperature":"19.6","dtg":"2016-07-28 11:36:00"},{"temperature":"19.6","dtg":"2016-07-28 11:35:00"},{"temperature":"19.6","dtg":"2016-07-28 11:34:00"},{"temperature":"19.5","dtg":"2016-07-28 11:33:00"},{"temperature":"19.5","dtg":"2016-07-28 11:32:00"},{"temperature":"19.5","dtg":"2016-07-28 11:31:00"},{"temperature":"19.5","dtg":"2016-07-28 11:30:00"},{"temperature":"19.5","dtg":"2016-07-28 11:29:00"},{"temperature":"19.5","dtg":"2016-07-28 11:28:00"},{"temperature":"19.5","dtg":"2016-07-28 11:27:00"},{"temperature":"19.5","dtg":"2016-07-28 11:26:00"},{"temperature":"19.5","dtg":"2016-07-28 11:25:00"},{"temperature":"19.5","dtg":"2016-07-28 11:24:00"},{"temperature":"19.4","dtg":"2016-07-28 11:23:00"},{"temperature":"19.4","dtg":"2016-07-28 11:22:00"},{"temperature":"19.4","dtg":"2016-07-28 11:21:00"},{"temperature":"19.4","dtg":"2016-07-28 11:20:00"},{"temperature":"19.4","dtg":"2016-07-28 11:19:00"},{"temperature":"19.4","dtg":"2016-07-28 11:18:00"},{"temperature":"19.4","dtg":"2016-07-28 11:17:00"},{"temperature":"19.4","dtg":"2016-07-28 11:16:00"},{"temperature":"19.4","dtg":"2016-07-28 11:15:00"},{"temperature":"19.4","dtg":"2016-07-28 11:14:00"},{"temperature":"19.3","dtg":"2016-07-28 11:13:00"},{"temperature":"19.3","dtg":"2016-07-28 11:12:00"},{"temperature":"19.3","dtg":"2016-07-28 11:11:00"},{"temperature":"19.3","dtg":"2016-07-28 11:10:00"},{"temperature":"19.3","dtg":"2016-07-28 11:09:00"},{"temperature":"19.3","dtg":"2016-07-28 11:08:00"},{"temperature":"19.3","dtg":"2016-07-28 11:07:00"},{"temperature":"19.3","dtg":"2016-07-28 11:06:00"},{"temperature":"19.3","dtg":"2016-07-28 11:05:00"},{"temperature":"19.3","dtg":"2016-07-28 11:04:00"},{"temperature":"19.2","dtg":"2016-07-28 11:03:00"},{"temperature":"19.2","dtg":"2016-07-28 11:02:00"},{"temperature":"19.2","dtg":"2016-07-28 11:01:00"},{"temperature":"19.2","dtg":"2016-07-28 11:00:00"},{"temperature":"19.2","dtg":"2016-07-28 10:59:00"},{"temperature":"19.2","dtg":"2016-07-28 10:58:00"},{"temperature":"19.2","dtg":"2016-07-28 10:57:00"},{"temperature":"19.2","dtg":"2016-07-28 10:56:00"},{"temperature":"19.1","dtg":"2016-07-28 10:55:00"},{"temperature":"19.1","dtg":"2016-07-28 10:54:00"},{"temperature":"19.1","dtg":"2016-07-28 10:53:00"},{"temperature":"19.1","dtg":"2016-07-28 10:52:00"},{"temperature":"19.1","dtg":"2016-07-28 10:51:00"},{"temperature":"19.1","dtg":"2016-07-28 10:50:00"},{"temperature":"19.1","dtg":"2016-07-28 10:49:00"},{"temperature":"19.1","dtg":"2016-07-28 10:48:00"},{"temperature":"19.1","dtg":"2016-07-28 10:47:00"},{"temperature":"19.1","dtg":"2016-07-28 10:46:00"},{"temperature":"19.1","dtg":"2016-07-28 10:45:00"},{"temperature":"19.0","dtg":"2016-07-28 10:44:00"},{"temperature":"19.0","dtg":"2016-07-28 10:43:00"},{"temperature":"19.0","dtg":"2016-07-28 10:42:00"},{"temperature":"19.0","dtg":"2016-07-28 10:41:00"}];
//plot
$(document).ready(function () {
$.plot($("#placeholder"), dataset1 );
});
A flot graph grid is displayed in my placeholder within the php page but no data is displayed.
If I hard code the data into the variable dataset1 using the following formatting then a graph appears.
[[1, 300], [2, 600], [3, 550], [4, 400], [5, 300]];
I believe the problem could be due to my formatting of the json data within the php section and therefore need to format it for flot graph plotting.
My apologies as I am new to flot graphs and have attempted many of the similar solutions within stackoverflow before I posted this question (my first here) but without success. Any help would be greatly appreciated!

Flot expects your dataset to be in a different format than the one you're passing in. I got it working by looping over your current dataset (your last example) to put it in the right format.
var dataset1 = [{"temperature":"19.6","dtg":"2016-07-28 12:53:00"},{"temperature":"19.5","dtg":"2016-07-28 12:52:00"},{"temperature":"19.5","dtg":"2016-07-28 12:51:00"},{"temperature":"19.6","dtg":"2016-07-28 12:50:00"},{"temperature":"19.6","dtg":"2016-07-28 12:49:00"},{"temperature":"19.6","dtg":"2016-07-28 12:48:00"},{"temperature":"19.6","dtg":"2016-07-28 12:47:00"},{"temperature":"19.6","dtg":"2016-07-28 12:46:00"},{"temperature":"19.6","dtg":"2016-07-28 12:45:00"},{"temperature":"19.6","dtg":"2016-07-28 12:44:00"},{"temperature":"19.7","dtg":"2016-07-28 12:43:00"},{"temperature":"19.7","dtg":"2016-07-28 12:42:00"},{"temperature":"19.7","dtg":"2016-07-28 12:41:00"},{"temperature":"19.7","dtg":"2016-07-28 12:40:00"},{"temperature":"19.7","dtg":"2016-07-28 12:39:00"},{"temperature":"19.7","dtg":"2016-07-28 12:38:00"},{"temperature":"19.8","dtg":"2016-07-28 12:37:00"},{"temperature":"19.8","dtg":"2016-07-28 12:36:00"},{"temperature":"19.8","dtg":"2016-07-28 12:35:00"},{"temperature":"19.8","dtg":"2016-07-28 12:34:00"},{"temperature":"19.8","dtg":"2016-07-28 12:33:00"},{"temperature":"19.8","dtg":"2016-07-28 12:32:00"},{"temperature":"19.8","dtg":"2016-07-28 12:31:00"},{"temperature":"19.8","dtg":"2016-07-28 12:30:00"},{"temperature":"19.9","dtg":"2016-07-28 12:29:00"},{"temperature":"19.9","dtg":"2016-07-28 12:28:00"},{"temperature":"19.9","dtg":"2016-07-28 12:27:00"},{"temperature":"19.9","dtg":"2016-07-28 12:26:00"},{"temperature":"19.9","dtg":"2016-07-28 12:25:00"},{"temperature":"19.9","dtg":"2016-07-28 12:24:00"},{"temperature":"20.0","dtg":"2016-07-28 12:23:00"},{"temperature":"20.0","dtg":"2016-07-28 12:22:00"},{"temperature":"20.1","dtg":"2016-07-28 12:21:00"},{"temperature":"20.1","dtg":"2016-07-28 12:20:00"},{"temperature":"20.1","dtg":"2016-07-28 12:19:00"},{"temperature":"20.0","dtg":"2016-07-28 12:18:00"},{"temperature":"20.0","dtg":"2016-07-28 12:17:00"},{"temperature":"20.0","dtg":"2016-07-28 12:16:00"},{"temperature":"20.0","dtg":"2016-07-28 12:15:00"},{"temperature":"20.0","dtg":"2016-07-28 12:14:00"},{"temperature":"20.0","dtg":"2016-07-28 12:13:00"},{"temperature":"20.0","dtg":"2016-07-28 12:12:00"},{"temperature":"20.0","dtg":"2016-07-28 12:11:00"},{"temperature":"19.9","dtg":"2016-07-28 12:10:00"},{"temperature":"20.0","dtg":"2016-07-28 12:09:00"},{"temperature":"20.0","dtg":"2016-07-28 12:08:00"},{"temperature":"20.0","dtg":"2016-07-28 12:07:00"},{"temperature":"20.0","dtg":"2016-07-28 12:06:00"},{"temperature":"19.9","dtg":"2016-07-28 12:05:00"},{"temperature":"19.9","dtg":"2016-07-28 12:04:00"},{"temperature":"19.9","dtg":"2016-07-28 12:03:00"},{"temperature":"19.9","dtg":"2016-07-28 12:02:00"},{"temperature":"19.9","dtg":"2016-07-28 12:01:00"},{"temperature":"19.9","dtg":"2016-07-28 12:00:00"},{"temperature":"19.9","dtg":"2016-07-28 11:59:00"},{"temperature":"19.9","dtg":"2016-07-28 11:58:00"},{"temperature":"19.8","dtg":"2016-07-28 11:57:00"},{"temperature":"19.8","dtg":"2016-07-28 11:56:00"},{"temperature":"19.8","dtg":"2016-07-28 11:55:00"},{"temperature":"19.8","dtg":"2016-07-28 11:54:00"},{"temperature":"19.8","dtg":"2016-07-28 11:53:00"},{"temperature":"19.7","dtg":"2016-07-28 11:52:00"},{"temperature":"19.7","dtg":"2016-07-28 11:51:00"},{"temperature":"19.7","dtg":"2016-07-28 11:50:00"},{"temperature":"19.7","dtg":"2016-07-28 11:49:00"},{"temperature":"19.7","dtg":"2016-07-28 11:48:00"},{"temperature":"19.7","dtg":"2016-07-28 11:47:00"},{"temperature":"19.6","dtg":"2016-07-28 11:46:00"},{"temperature":"19.7","dtg":"2016-07-28 11:45:00"},{"temperature":"19.6","dtg":"2016-07-28 11:44:00"},{"temperature":"19.6","dtg":"2016-07-28 11:43:00"},{"temperature":"19.6","dtg":"2016-07-28 11:42:00"},{"temperature":"19.6","dtg":"2016-07-28 11:41:00"},{"temperature":"19.6","dtg":"2016-07-28 11:40:00"},{"temperature":"19.6","dtg":"2016-07-28 11:39:00"},{"temperature":"19.6","dtg":"2016-07-28 11:38:00"},{"temperature":"19.6","dtg":"2016-07-28 11:37:00"},{"temperature":"19.6","dtg":"2016-07-28 11:36:00"},{"temperature":"19.6","dtg":"2016-07-28 11:35:00"},{"temperature":"19.6","dtg":"2016-07-28 11:34:00"},{"temperature":"19.5","dtg":"2016-07-28 11:33:00"},{"temperature":"19.5","dtg":"2016-07-28 11:32:00"},{"temperature":"19.5","dtg":"2016-07-28 11:31:00"},{"temperature":"19.5","dtg":"2016-07-28 11:30:00"},{"temperature":"19.5","dtg":"2016-07-28 11:29:00"},{"temperature":"19.5","dtg":"2016-07-28 11:28:00"},{"temperature":"19.5","dtg":"2016-07-28 11:27:00"},{"temperature":"19.5","dtg":"2016-07-28 11:26:00"},{"temperature":"19.5","dtg":"2016-07-28 11:25:00"},{"temperature":"19.5","dtg":"2016-07-28 11:24:00"},{"temperature":"19.4","dtg":"2016-07-28 11:23:00"},{"temperature":"19.4","dtg":"2016-07-28 11:22:00"},{"temperature":"19.4","dtg":"2016-07-28 11:21:00"},{"temperature":"19.4","dtg":"2016-07-28 11:20:00"},{"temperature":"19.4","dtg":"2016-07-28 11:19:00"},{"temperature":"19.4","dtg":"2016-07-28 11:18:00"},{"temperature":"19.4","dtg":"2016-07-28 11:17:00"},{"temperature":"19.4","dtg":"2016-07-28 11:16:00"},{"temperature":"19.4","dtg":"2016-07-28 11:15:00"},{"temperature":"19.4","dtg":"2016-07-28 11:14:00"},{"temperature":"19.3","dtg":"2016-07-28 11:13:00"},{"temperature":"19.3","dtg":"2016-07-28 11:12:00"},{"temperature":"19.3","dtg":"2016-07-28 11:11:00"},{"temperature":"19.3","dtg":"2016-07-28 11:10:00"},{"temperature":"19.3","dtg":"2016-07-28 11:09:00"},{"temperature":"19.3","dtg":"2016-07-28 11:08:00"},{"temperature":"19.3","dtg":"2016-07-28 11:07:00"},{"temperature":"19.3","dtg":"2016-07-28 11:06:00"},{"temperature":"19.3","dtg":"2016-07-28 11:05:00"},{"temperature":"19.3","dtg":"2016-07-28 11:04:00"},{"temperature":"19.2","dtg":"2016-07-28 11:03:00"},{"temperature":"19.2","dtg":"2016-07-28 11:02:00"},{"temperature":"19.2","dtg":"2016-07-28 11:01:00"},{"temperature":"19.2","dtg":"2016-07-28 11:00:00"},{"temperature":"19.2","dtg":"2016-07-28 10:59:00"},{"temperature":"19.2","dtg":"2016-07-28 10:58:00"},{"temperature":"19.2","dtg":"2016-07-28 10:57:00"},{"temperature":"19.2","dtg":"2016-07-28 10:56:00"},{"temperature":"19.1","dtg":"2016-07-28 10:55:00"},{"temperature":"19.1","dtg":"2016-07-28 10:54:00"},{"temperature":"19.1","dtg":"2016-07-28 10:53:00"},{"temperature":"19.1","dtg":"2016-07-28 10:52:00"},{"temperature":"19.1","dtg":"2016-07-28 10:51:00"},{"temperature":"19.1","dtg":"2016-07-28 10:50:00"},{"temperature":"19.1","dtg":"2016-07-28 10:49:00"},{"temperature":"19.1","dtg":"2016-07-28 10:48:00"},{"temperature":"19.1","dtg":"2016-07-28 10:47:00"},{"temperature":"19.1","dtg":"2016-07-28 10:46:00"},{"temperature":"19.1","dtg":"2016-07-28 10:45:00"},{"temperature":"19.0","dtg":"2016-07-28 10:44:00"},{"temperature":"19.0","dtg":"2016-07-28 10:43:00"},{"temperature":"19.0","dtg":"2016-07-28 10:42:00"},{"temperature":"19.0","dtg":"2016-07-28 10:41:00"}];
var dataset2 = [];
for (var i = 0; i < dataset1.length; i++) {
dataset2.push( [ Date.parse(dataset1[i].dtg),
parseFloat(dataset1[i].temperature) ] );
}
//plot
$(document).ready(function () {
$.plot( $("#placeholder"),
[dataset2], // wrap data series in a container
{ xaxis: { mode: "time" } }
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.7/jquery.flot.min.js"></script>
<div id="placeholder" style="width:600px; height:400px; float: left;"></div>
After var dataset2 = [];, the loop unpacks each element in your dataset and creates a [date, temp] data point to add to the array. I had to parse both the date and the float, since Flot expects numeric data, not strings.
That creates one data series. You can plot multiple data series in Flot, so note that I had to wrap that series in another container in the call to plot. (In other words, that container could have had [dataset2, dataset3, ..., datasetX].)
The last step that was needed was to set { mode: "time" } on the x-axis.

Show different suffix in Google Piechart

I have a piechart showing the result the total bandwidth of uplink/downlink.
Right now, they suffix is GB.
I struggling trying to display their suffix different.
Example,
Downlink in GB
Uplink in KB.
I have
<script>
google.setOnLoadCallback(drawChart);
function drawChart() {
console.log(color['downlink']);
var data = google.visualization.arrayToDataTable([
['Task', 'Bandwith'],
['Downlink', ({{$t_down_bytes}})],
['Uplink', ({{$t_up_bytes}})]
]);
var options = {
legend: 'buttom',
pieSliceText: 'value', // text | none
title: 'Total Bandwith Usage',
colors: [color['downlink'], color['uplink']],
width:'100%',
height: 400,
slices: {
1: {offset: 0.1}
},
};
var formatter = new google.visualization.NumberFormat({
fractionDigits:2,
suffix: ' GB'
});
formatter.format(data, 1);
var chart = new google.visualization.PieChart(document.getElementById('private'));
chart.draw(data, options);
}
</script>
I can someone can shed some light on this.
Any hints / suggestions on this will be much appreciated !

One way is just doing it yourself: (Correct way to convert size in bytes to KB, MB, GB in Javascript might help)
var data = google.visualization.arrayToDataTable([
['Task', 'Bandwith'],
['Downlink', {v:6.4672328, f:"6.46 GB"}],
['Uplink', {v:9.40213213, f:"9.40 KB"}]
]);
Note that v is the "real" value google uses to draw and f is the formatted value it will show
If you want to keep your google formatter, another way is to add this line after your formatter.format(data, 1);
data.setFormattedValue(1,1,data.getFormattedValue(1,1).replace("GB","KB"))
Which sets the formattedValue of row 1, column 1
Update taking into account you want to use a mix of both:
var data = google.visualization.arrayToDataTable([
['Task', 'Bandwith'],
['Downlink', $t_down_bytes],
['Uplink', $t_up_bytes],
]);
var formatter = new google.visualization.NumberFormat({
fractionDigits:2
});
formatter.format(data, 1);
data.setFormattedValue(0,1,data.getFormattedValue(0,1) + ' {{$t_down_bytes_suffix}}')
data.setFormattedValue(1,1,data.getFormattedValue(1,1) + ' {{$t_up_bytes_suffix}}')
For more info on setFormattedValue and getFormattedValue check
Google Datatable Documentation