jQuery UI Widgets Forums Chart chart resize on chrome browser resize

This topic contains 5 replies, has 2 voices, and was last updated by  srikomma 1 week, 1 day ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • chart resize on chrome browser resize #103011

    srikomma
    Participant

    ‘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]);

    }

    chart resize on chrome browser resize #103012

    srikomma
    Participant

    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>

    chart resize on chrome browser resize #103013

    srikomma
    Participant

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

    chart resize on chrome browser resize #103018

    Martin
    Participant

    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/

    chart resize on chrome browser resize #103041

    srikomma
    Participant

    <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.

    chart resize on chrome browser resize #103043

    srikomma
    Participant

    <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>

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.