chart resize on chrome browser resize

[srikommaParticipant]

‘use strict’;

var userID = “”;
var subsystem = “soc”;
var chartcpu_utilizationRangeMax = 1;
var chartcpu_utilizationRangeMin = 0;
var noOfUniqueProcesses = 0;
var uniqueProcessesArray = [];

var colorArray = [“#9067A7”, “#7293CB”, “#E1974C”, “#AB6857”, “#E10B4C”, “#906700”, “#729300”, “#E19700”, “#AB6800”, “#E10B00”, “#90007A7”, “#7200CB”,
“#E1004C”, “#AB0057”, “#E1004C”, “#0067A7”, “#0093CB”, “#00974C”, “#006857”, “#000B4C”,];
var jsonResponseAssessment = {};
var rewrittenAssessment = {};
var testjsonAssessmentdata = {
“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,
“soc-assessments”:[
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-31T00:00:00Z”,”process_name”:”MsMpEng.exe”,”cpu_utilization”:0.32012417157258116},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-31T00:00:00Z”,”process_name”:”System”,”cpu_utilization”:0.10726807665814841},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-31T00:00:00Z”,”process_name”:”dwm.exe”,”cpu_utilization”:0.09455806961795922},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-31T00:00:00Z”,”process_name”:”SettingSyncHost.exe”,”cpu_utilization”:0.06183345379034568},

{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-11T00:00:00Z”,”process_name”:”System”,”cpu_utilization”:0.40463217902936927},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-11T00:00:00Z”,”process_name”:”Microsoft.Photos.exe”,”cpu_utilization”:0.2410574683579221},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-11T00:00:00Z”,”process_name”:”dwm.exe”,”cpu_utilization”:0.14711595495373186},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-11T00:00:00Z”,”process_name”:”svchost.exe”,”cpu_utilization”:0.08079824552090828},

{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-07T00:00:00Z”,”process_name”:”DeviceCensus.exe”,”cpu_utilization”:0.0},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-07T00:00:00Z”,”process_name”:”CompatTelRunner.exe”,”cpu_utilization”:0.0},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-07T00:00:00Z”,”process_name”:”SpeechModelDownload.exe”,”cpu_utilization”:0.0},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-07T00:00:00Z”,”process_name”:”wscript.exe”,”cpu_utilization”:0.0},

{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-06T00:00:00Z”,”process_name”:”System”,”cpu_utilization”:0.3229595400419358},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-06T00:00:00Z”,”process_name”:”Microsoft.Photos.exe”,”cpu_utilization”:0.23290460841064387},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-06T00:00:00Z”,”process_name”:”dwm.exe”,”cpu_utilization”:0.17984913676683598},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-06T00:00:00Z”,”process_name”:”MsMpEng.exe”,”cpu_utilization”:0.061737663952209816},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-06T00:00:00Z”,”process_name”:”svchost.exe”,”cpu_utilization”:0.05764425796896928},

{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-05T00:00:00Z”,”process_name”:”System”,”cpu_utilization”:0.3488933805582961},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-05T00:00:00Z”,”process_name”:”javaw.exe”,”cpu_utilization”:0.3364751244952205},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-05T00:00:00Z”,”process_name”:”svchost.exe”,”cpu_utilization”:0.08614052987833999},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-05T00:00:00Z”,”process_name”:”MsMpEng.exe”,”cpu_utilization”:0.05061923183202051},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-05T00:00:00Z”,”process_name”:”dwm.exe”,”cpu_utilization”:0.04815695389770449},

{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-04T00:00:00Z”,”process_name”:”hon.exe”,”cpu_utilization”:0.5476404462295733},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-04T00:00:00Z”,”process_name”:”System”,”cpu_utilization”:0.3031776635386024},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-04T00:00:00Z”,”process_name”:”svchost.exe”,”cpu_utilization”:0.04051201981638953},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-04T00:00:00Z”,”process_name”:”dwm.exe”,”cpu_utilization”:0.028752051999209504},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-04T00:00:00Z”,”process_name”:”MsMpEng.exe”,”cpu_utilization”:0.020769653093119747},

{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-03T00:00:00Z”,”process_name”:”chrome.exe”,”cpu_utilization”:0.4264388811611011},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-03T00:00:00Z”,”process_name”:”svchost.exe”,”cpu_utilization”:0.41369800655748135},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-03T00:00:00Z”,”process_name”:”audiodg.exe”,”cpu_utilization”:0.14266803860773736},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-03T00:00:00Z”,”process_name”:”conhost.exe”,”cpu_utilization”:0.004768696757714158},

{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-02T00:00:00Z”,”process_name”:”Microsoft.Photos.exe”,”cpu_utilization”:0.2804505371563486},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-02T00:00:00Z”,”process_name”:”dwm.exe”,”cpu_utilization”:0.2618191302853243},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-02T00:00:00Z”,”process_name”:”System”,”cpu_utilization”:0.1771756384133706},
{“user-id”:”0623a8cb5f0d4f6599dc2e13d413befe”,”date”:”2018-05-02T00:00:00Z”,”process_name”:”hon.exe”,”cpu_utilization”:0.14915097109449743}
]
};

// Load the Visualization API and the piechart package.
//google.charts.load(‘current’, { ‘packages’: [‘corechart’, ‘table’] });

// Set a callback to run when the Google Visualization API is loaded.
//google.charts.setOnLoadCallback(drawPage);

$(document).ready(function () {
var tmp = window.location.search.split(“=”);
if( typeof tmp != ‘undefined’ && tmp){
userID = decodeURIComponent(tmp[1]);
} else {
if (window.console && window.console.log) {
console.log(“user id not found”);
}
}
cloudCall();
});

function drawPage() {
//sort according to time stamp
if(jsonResponseAssessment.hasOwnProperty(‘soc-assessments’)){

jsonResponseAssessment[“soc-assessments”].sort(function(a, b) {
var time1 = new Date(a.date).getTime();
var time2 = new Date(b.date).getTime();
return time1 < time2 ? -1 : time1 > time2 ? 1 : 0;
});

for (var i = 0; i < jsonResponseAssessment[“soc-assessments”].length; i++) {

if (jsonResponseAssessment[“soc-assessments”][i][“cpu_utilization”] > chartcpu_utilizationRangeMax) {
chartcpu_utilizationRangeMax = jsonResponseAssessment[“soc-assessments”][i][“cpu_utilization”];
}

if (jsonResponseAssessment[“soc-assessments”][i][“cpu_utilization”] < chartcpu_utilizationRangeMin) {
chartcpu_utilizationRangeMin = jsonResponseAssessment[“soc-assessments”][i][“cpu_utilization”];
}
}
getAllUniqueProcessNames();
}
drawChartUsingJQWidgets();
}

function getAllUniqueProcessNames() {

for (var i = 0; i < jsonResponseAssessment[“soc-assessments”].length; i++) {
var isfound = false;
var process_name = jsonResponseAssessment[“soc-assessments”][i][“process_name”];
for (var j = 0; j < uniqueProcessesArray.length; j++) {
if (process_name == uniqueProcessesArray[j]) {
isfound = true;
break;
}
}

if (isfound == false) {
uniqueProcessesArray.push(process_name);
noOfUniqueProcesses++;
}
}

uniqueProcessesArray.sort(function (a, b) {
return a < b ? -1 : a > b ? 1 : 0;
});
}
function rewriteJson() {

var rewrittenJson = [];
var prevTimeStamp = “”;
for (var i = 0; i < jsonResponseAssessment[“soc-assessments”].length; i++) {
if(prevTimeStamp.localeCompare(jsonResponseAssessment[“soc-assessments”][i][“date”]) == 0) {
//console.log(prevTimeStamp + ” date already added ” + jsonResponseAssessment[“soc-assessments”][i][“date”]);
continue;
}
prevTimeStamp = jsonResponseAssessment[“soc-assessments”][i][“date”];
//console.log(jsonResponseAssessment[“soc-assessments”][i][“date”]);
var jsonRow = {“date” : jsonResponseAssessment[“soc-assessments”][i][“date”], “processes”: []};
jsonRow[“processes”].push({“process_name” : jsonResponseAssessment[“soc-assessments”][i][“process_name”], “cpu_utilization” :jsonResponseAssessment[“soc-assessments”][i][“cpu_utilization”]});
for (var j = i + 1; j < jsonResponseAssessment[“soc-assessments”].length; j++) {
var a = jsonResponseAssessment[“soc-assessments”][j][“date”];
var b = jsonResponseAssessment[“soc-assessments”][i][“date”];
if(a.localeCompare(b) == 0) {
jsonRow[“processes”].push({“process_name” : jsonResponseAssessment[“soc-assessments”][j][“process_name”], “cpu_utilization” :jsonResponseAssessment[“soc-assessments”][j][“cpu_utilization”]});
} else {
//console.log(“not matching”);
//break;
}
}
rewrittenJson.push(jsonRow);
}

var item = 0;
for (var i = (rewrittenJson.length – 1); i >= 0; i–) {
if (item == 0) {
rewrittenJson[i].custdateString = “Today (T)”;
} else {
rewrittenJson[i].custdateString = “T – ” + item;
}
item++;
}

return rewrittenJson;
}

//IN 2018/10/25 OUT 10/25
function truncateDate(value) {
if (value) {
if(value.length >= 8) {
return value.substr(5,5);
}
}
return “”;
}

function getAssessmentURL() {
return “http://localhost:8888/TTCService/TTCWebHost/getAssessmentData/” + userID + “/” + subsystem;
}
function cloudCall() {
$.ajax({
type: “GET”,
timeout:5000,//5 sec
url: getAssessmentURL(),
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (jsondata) {
console.log(JSON.stringify(jsondata));
if(jsondata.hasOwnProperty(‘error’)){
console.log(jsondata);
var errorDescription = jsondata[“error”];
document.getElementById(“error”).innerText = errorDescription;
} else {
jsonResponseAssessment = jsondata;
drawPage();
}
},
error: function (error) {
console.log(error);
document.getElementById(“testdata”).innerText = “*Values from test data.”
jsonResponseAssessment = testjsonAssessmentdata;
drawPage();
}
});
}

function generateChartSeries() {
var chartSeries = [];

for (var i = 0; i < uniqueProcessesArray.length; i++) {
var row = {};
row.dataField = uniqueProcessesArray[i];
row.displayText = uniqueProcessesArray[i];
if(colorArray.length > i) {
row.color = colorArray[i];
} else {

var posibleDigits = ‘0123456789ABCDEF’;
var randomColor = ‘#’;
for (var k = 0; k < 6; k++) {
randomColor += posibleDigits[Math.floor(Math.random() * 16)];
}
row.color = randomColor;
}
chartSeries.push(row);
}

return chartSeries;
}

function generateChartDataFromRow(row) {

var rowArray = { date: row.custdateString };
for (var i = 0; i < uniqueProcessesArray.length; i++) {
var isFound = false;
for (var j = 0; j < row.processes.length; j++) {
//console.log(“Comparing strings ” + uniqueProcessesArray[i] + ” and ” + row.processes[j][“process_name”]);
if(uniqueProcessesArray[i] === row.processes[j][“process_name”]) {
isFound = true;
rowArray[uniqueProcessesArray[i]] = (row.processes[j][“cpu_utilization”]);
break;
}
}
if(isFound == false) {
rowArray[uniqueProcessesArray[i]] = 0;
}
}

//console.log(JSON.stringify( rowArray));
return(rowArray);
}

function drawChartUsingJQWidgets() {

var data2Array = [];
var i = 0;
if (jsonResponseAssessment.hasOwnProperty(‘soc-assessments’)) {
var rewrittenJson = rewriteJson(jsonResponseAssessment);

for (var i = 0; i < rewrittenJson.length; i++) {
var row = rewrittenJson[i];
var j = 0;
data2Array.push(generateChartDataFromRow(row));
}
}

var chartTitle = “Top 5 Applications using CPU”;
var chartDesc = “Last ” + i + ” days”;
var settings = {
title: chartTitle,
description: chartDesc,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: data2Array,
categoryAxis:
{
dataField: ‘date’,
description: ‘Date’,
showGridLines: false,
},
colorScheme: ‘scheme05’,
seriesGroups:
[
{
type: ‘column’,
columnsGapPercent: 30,
seriesGapPercent: 0,
valueAxis:
{
minValue: (chartcpu_utilizationRangeMin),
maxValue: (chartcpu_utilizationRangeMax),
description: ‘CPU Utilization (Percentage)’,
},
series: generateChartSeries(),
}
]
};

//console.log(JSON.stringify(settings));
$(‘#chartContainer3’).jqxChart(settings);
}
function resizeChartBasedOnWindowsize(){
var response = new $.jqx.response();
var resizeFunction1 = drawChartUsingJQWidgets() {
$(“#chartContainer3”).html(“resizeFunction is called”);
}
var resizeFunction2 = function () {
console.log(“resizeFunction2 is called”);
}
response.resize([resizeFunction1, resizeFunction2]);

}

[srikommaParticipant]

HTML file for above JS:
<!DOCTYPE html>
<html lang=”en-US”>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<meta name=”keywords” content=”Intel device health” />
<meta name=”description” content=”Application to provide insights on Intel hardware.” />
<meta name=”language” content=”en” />
<meta name=”location” content=”us” />

<title>CPUUtilizationDetails</title>

<link rel=”stylesheet” href=”css/site.css” type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />

<script type=”text/javascript” src=”lib/jquery/dist/jquery.js”></script>
<script type=”text/javascript” src=”lib/jquery/dist/jquery.min.js”></script>
<script type=”text/javascript” src=”https://www.gstatic.com/charts/loader.js”></script>
<script type=”text/javascript” src=”js/CPUUtilizationPage.js”></script>

<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxchart.js”></script>
</head>
<body>
<!– <div class=”devicehealthTitle”><h2 align=”center”>CPU Utilization Status</h2></div> –>
<div id=”chartContainer3″ style=”width:600px; height:400px; margin:0 auto;”></div>
<div id=”testdata”> </div>
<div id=”error”> </div>
</body>
</html>

[srikommaParticipant]

I need help to resize the chart based on chrom browser size.Please advise.

[MartinParticipant]

Hello srikomma,

In order for the chart to resize depending on the browser’s size you need to set its width and height in percentages.
I see that you have given it static size: <div id="chartContainer3" style="width:600px; height:400px; margin:0 auto;"></div>

Please, see our Chart Fluid Size Demo.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[srikommaParticipant]

<body >
<!– <div class=”devicehealthTitle”><h2 align=”center”>CPU Utilization Status</h2></div> –>
<div id=”chartContainer3″ style=”width:100%; height:50%; margin:0 auto;”></div>
<div id=”testdata”> </div>
<div id=”error”> </div>
</body>
</html>
I tired this and still it is not working.

[srikommaParticipant]

<body >
<!– <div class=”devicehealthTitle”><h2 align=”center”>CPU Utilization Status</h2></div> –>
<div id=”chartContainer3″ class=”mobile-container” style=”width:100%; height:100%;”></div>
<div id=”testdata”> </div>
<div id=”error”> </div>
</body>

[Author]

Posts