Column chart - Bar color

[Nagendra Singh]

Hi all, 

How can we apply color to a bar as red whenever it is high?

Like a bar which has the highest value should be always red, and medium value should have yellow and at last lowest value as green..

Please suggest a way as soon as possible....

[Andrew Gallant]

Use a "style" role column to color your bars:

var data = google.visualization.arrayToDataTable([

    ['Name', 'Value', {role: 'style', type: 'string'}],

    ['High', 50, '#d51711'],

    ['Medium', 25, '#f9f107'],

    ['Low', 10, '#11d517']

]);

[Nagendra Singh]

I meant color based on value... I do not need to hard code it.. My values changes dynamically.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/UMGeagSZ8eo/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

[Andrew Gallant]

You can use a DataView to make this dynamic:

// get min/max from column 1

var range = data.getColumnRange(1);
var view = new google.visualization.DataView(data);

view.setColumns([0, 1, {

    type: 'string',

    role: 'style',

    calc: function (dt, row) {

         var val = dt.getValue(row, 1);

         if (val == range.max) {

              return '#d51711'; // max

         }

         else if (val == range.min) {

              return '#11d517'; // min

         }

         else {

              return '#f9f107'; // all others

         }

    }

}]);

You need to recalculate range whenever your data changes.  Use view in place of data when drawing the chart.

On Friday, June 27, 2014 1:08:29 PM UTC-4, Nagendra Singh wrote:

I meant color based on value... I do not need to hard code it.. My values changes dynamically.

On Fri, Jun 27, 2014 at 10:14 PM, Andrew Gallant <asgall...@gmail.com> wrote:

Use a "style" role column to color your bars:

var data = google.visualization.arrayToDataTable([

    ['Name', 'Value', {role: 'style', type: 'string'}],

    ['High', 50, '#d51711'],

    ['Medium', 25, '#f9f107'],

    ['Low', 10, '#11d517']

]);

On Friday, June 27, 2014 3:02:01 AM UTC-4, Nagendra Singh wrote:

Hi all, 

How can we apply color to a bar as red whenever it is high?

Like a bar which has the highest value should be always red, and medium value should have yellow and at last lowest value as green..

Please suggest a way as soon as possible....

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/UMGeagSZ8eo/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

[Nagendra Singh]

//THIS IS MY JS PAGE

google.load('visualization', '1.1', {packages: ['corechart','controls','table']});

google.setOnLoadCallback(drawChart);

function drawChart() {

        var jsonData = $.ajax({

            url: "/RestartSpringRestService/rest/allIndicator",

            dataType: "json",

            async: false

        }).responseText;

        

       

        var jsonObj = JSON.parse(jsonData);

        // Create our data table out of JSON data loaded from server.

        var size = 0;

        for(var sizeCount in jsonObj){

            size++;

        }

        var dataArray = new Array(size+1);

        dataArray[0] = new Array(4);

        dataArray[0][0] = 'Date';

        dataArray[0][1] = 'Buffer';

        dataArray[0][2] = 'Cpu';

        dataArray[0][3] = 'Memory';

        

        

        //dataArray[0][2] = {type:'string', role:'tooltip'};

        var i = 1;

    while(i < size+1){

            dataArray[i] = new Array();

            //dataArray[i][1] = (jsonObj[i].siteIndicatorColor);

            dataArray[i][0] =new Date(jsonObj[i].dateOfOccurence);

            dataArray[i][1] = (jsonObj[i].bufferCount);

            dataArray[i][2] = (jsonObj[i].cpu);

            dataArray[i][3] = (jsonObj[i].memory);

            

            i++;

            

        }

    

    var data = new google.visualization.arrayToDataTable(dataArray);

    

    var options = {

   

    is3d: true,

    //colors: ['green','red','yellow'],

    bar: { groupWidth: '3%' },

        title: 'Date vs. CriticalParameters comparison', titleTextStyle: {color: '#DF0101', bold: true},

        width: 1000, height: 450,

        vAxis: {minValue: 0},

        hAxis: {title: 'Date', titleTextStyle: {color: '#08088A', bold: true}},

        legend: { position: 'top', maxLines: 4 }

    };

    var chart = new google.visualization.ColumnChart(document.getElementById('ColumnChart'));

    var table = new google.visualization.Table(document.getElementById('TableChart'));

    var formatter1 = new google.visualization.ColorFormat();

    formatter1.addRange(200, null, 'white', 'red');

    formatter1.addRange(50, 200, 'black', 'yellow');

    formatter1.addRange(0, 50, 'white', 'green');

    formatter1.format(data, 1);

    var formatter2 = new google.visualization.ColorFormat();

    formatter2.addRange(85, 100, 'white', 'red');

    formatter2.addRange(70, 85, 'white', 'orange');

    formatter2.addRange(0, 70, 'white', 'green');

    formatter2.format(data, 2);

    formatter2.format(data, 3);

    table.draw(data, {allowHtml: true, showRowNumber: true});

    chart.draw(data, options);

}

------------------------------------------------------------------------------

I am using formatter now, but I have hardcoded the value for high, low and medium. I need to read high, low and medium values from the properties file inside the project. Or as an alternative, if out of the three params (bufferCount, cpu and memory) any one is high it should show red , orange for medium and green for low..

If you have a solution, you can make my day.. Please help...

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Andrew Gallant]

Ok, that is a bit different from what I thought you were doing.  The ColorFormatter should work for the Table, but it won't do anything for the ColumnChart.

You can modify the DataView to accommodate your ranges and additional columns:

var view = new google.visualization.DataView(data);

view.setColumns([0, 1, {

    type: 'string',

    role: 'style',

    calc: function (dt, row) {

         // buffer colors

         var val = dt.getValue(row, 1);

         if (val > 200) {

              return '#d51711'; // max

         }

         else if (> 50) {

              return '#11d517'; // min

         }

         else {

              return '#f9f107'; // all others

         }

    }

}, 2, {

    type: 'string',

    role: 'style',

    calc: function (dt, row) {

         // cpu colors

         var val = dt.getValue(row, 1);

         if (val > 85) {

              return '#d51711'; // max

         }

         else if (> 70) {

              return '#11d517'; // min

         }

         else {

              return '#f9f107'; // all others

         }

    }

}, 3, {

    type: 'string',

    role: 'style',

    calc: function (dt, row) {

         // memory colors

         var val = dt.getValue(row, 1);

         if (val > 85) {

              return '#d51711'; // max

         }

         else if (> 70) {

              return '#11d517'; // min

         }

         else {

              return '#f9f107'; // all others

         }

    }

}]);

Use this view to draw the ColumnChart only.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

[Nagendra Singh]

Please see the attachment. The column chart is coming like this.. Please help..

//  Modified Code

    var view = new google.visualization.DataView(data);

    view.setColumns([0, 1, {

        type: 'string',

        role: 'style',

        calc: function (dt, row) {

             // buffer colors

             var val = dt.getValue(row, 1);

             if (val > 200) {

                  return '#d51711'; // max

             }

             else if (val > 50) {

                  return '#11d517'; // min

             }

             else {

                  return '#f9f107'; // all others

             }

        }

    }, 2, {

        type: 'string',

        role: 'style',

        calc: function (dt, row) {

             // cpu colors

             var val = dt.getValue(row, 1);

             if (val > 85) {

                  return '#d51711'; // max

             }

             else if (val > 70) {

                  return '#11d517'; // min

             }

             else {

                  return '#f9f107'; // all others

             }

        }

    }, 3, {

        type: 'string',

        role: 'style',

        calc: function (dt, row) {

             // memory colors

             var val = dt.getValue(row, 1);

             if (val > 85) {

                  return '#d51711'; // max

             }

             else if (val > 70) {

                  return '#11d517'; // min

             }

             else {

                  return '#f9f107'; // all others

             }

        }

    }]);

    var options = {

   

    is3d: true,

    //colors: ['green','red','yellow'],

    bar: { groupWidth: '3%' },

        title: 'Date vs. CriticalParameters comparison', titleTextStyle: {color: '#DF0101', bold: true},

        width: 1000, height: 450,

        vAxis: {minValue: 0},

        hAxis: {title: 'Date', titleTextStyle: {color: '#08088A', bold: true}},

        legend: { position: 'top', maxLines: 4 }

    };

    var chart = new google.visualization.ColumnChart(document.getElementById('ColumnChart'));

    

    chart.draw(view, options);

}

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Andrew Gallant]

Sorry, my mistake, I forgot to change the column indices in the cpu and memory columns:

var view = new google.visualization.DataView(data);

view.setColumns([0, 1, {

    type: 'string',

    role: 'style',

    calc: function (dt, row) {

         // buffer colors

         var val = dt.getValue(row, 1);

         if (val > 200) {

              return '#d51711'; // max

         }

         else if (> 50) {

              return '#11d517'; // min

         }

         else {

              return '#f9f107'; // all others

         }

    }

}, 2, {

    type: 'string',

    role: 'style',

    calc: function (dt, row) {

         // cpu colors

         var val = dt.getValue(row, 2);

         if (val > 85) {

              return '#d51711'; // max

         }

         else if (> 70) {

              return '#11d517'; // min

         }

         else {

              return '#f9f107'; // all others

         }

    }

}, 3, {

    type: 'string',

    role: 'style',

    calc: function (dt, row) {

         // memory colors

         var val = dt.getValue(row, 3);

         if (val > 85) {

              return '#d51711'; // max

         }

         else if (> 70) {

              return '#11d517'; // min

         }

         else {

              return '#f9f107'; // all others

         }

    }

}]);

[Nagendra Singh]

Yup.. I noticed and corrected... By the way, thanks a lot... 

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Nagendra Singh]

Hi Andrew,

One more help...

Please look into this code...

google.load('visualization', '1.1', {packages: ['corechart','controls','table']});

google.setOnLoadCallback(drawChart);

function drawChart() {

        var jsonData = $.ajax({

            url: "/RestartSpringRestService/rest/allIndicator",

            dataType: "json",

            async: false

        }).responseText;

        

        var jsonData1 = $.ajax({

            url: "/RestartSpringRestService/rest/colorIndicator",

            dataType: "json",

            async: false

        }).responseText;

        

       

        var jsonObj = JSON.parse(jsonData);

        // Create our data table out of JSON data loaded from server.

        var size = 0;

        for(var sizeCount in jsonObj){

            size++;

        }

        

        var jsonObj1 = JSON.parse(jsonData1);

        // Create our data table out of JSON data loaded from server.

        var size = 0;

        for(var sizeCount in jsonObj1){

            size++;

        }

        

        var dataArray1 = new Array(size+1);

        dataArray1[0] = new Array(9);

        dataArray1[0][0] = 'bufferHigh';

        dataArray1[0][1] = 'bufferMedium';

        dataArray1[0][2] = 'bufferLow';

        dataArray1[0][3] = 'cpuHigh';

        dataArray1[0][4] = 'cpuMedium';

        dataArray1[0][5] = 'cpuLow';

        dataArray1[0][6] = 'memoryHigh';

        dataArray1[0][7] = 'memoryMedium';

        dataArray1[0][8] = 'memoryLow';

        

        

        var dataArray = new Array(size+1);

        dataArray[0] = new Array(4);

        dataArray[0][0] = 'Date';

        dataArray[0][1] = 'Buffer';

        dataArray[0][2] = 'Cpu';

        dataArray[0][3] = 'Memory';

        

        

        //dataArray[0][2] = {type:'string', role:'tooltip'};

        var i = 1;

        while(i < size+1){

            dataArray[i] = new Array();

            //dataArray[i][1] = (jsonObj[i].siteIndicatorColor);

            dataArray[i][0] =new Date(jsonObj[i].dateOfOccurence);

            dataArray[i][1] = (jsonObj[i].bufferCount);

            dataArray[i][2] = (jsonObj[i].cpu);

            dataArray[i][3] = (jsonObj[i].memory);

            i++;

        }

        while(i < size+1){

            dataArray1[i] = new Array();

            //dataArray[i][1] = (jsonObj[i].siteIndicatorColor);

            dataArray1[i][0] = (jsonObj[i].bufferHigh);

            dataArray1[i][1] = (jsonObj[i].bufferMedium);

            dataArray1[i][2] = (jsonObj[i].bufferLow);

            dataArray1[i][3] = (jsonObj[i].cpuHigh);

            dataArray1[i][4] = (jsonObj[i].cpuMedium);

            dataArray1[i][5] = (jsonObj[i].cpuLow);

            dataArray1[i][6] = (jsonObj[i].memoryHigh);

            dataArray1[i][7] = (jsonObj[i].memoryMedium);

            dataArray1[i][8] = (jsonObj[i].memoryLow);

            i++;

        }

    

    var data = new google.visualization.arrayToDataTable(dataArray);

    var view = new google.visualization.DataView(data);

    

    view.setColumns([0, 1, {

        type: 'string',

        role: 'style',

        calc: function (dt, row) {

             // buffer colors

             var val = dt.getValue(row, 1);

             if (val >= 200) {

                  return '#d51711'; // max

             }

             else if (val >= 50) {

                  return '#f9f107'; // medium

             }

             else {

                  return '#07D819'; // min

             }

        }

    }, 2, {

        type: 'string',

        role: 'style',

        calc: function (dt, row) {

             // cpu colors

             var val = dt.getValue(row, 2);

             if (val >= 85) {

                  return '#d51711'; // max

             }

             else if (val >= 70) {

                  return '#f9f107'; // medium

             }

             else {

                  return '#07D819'; // min

             }

        }

    }, 3, {

        type: 'string',

        role: 'style',

        calc: function (dt, row) {

             // memory colors

             var val = dt.getValue(row, 3);

             if (val >= 85) {

                  return '#d51711'; // max

             }

             else if (val >= 70) {

                  return '#f9f107'; // medium

             }

             else {

                  return '#07D819'; // min

             }

        }

    }]);

    var options = {

   

    is3d: true,

    //colors: ['green','red','yellow'],

    bar: { groupWidth: '3%' },

        title: 'Date vs. CriticalParameters comparison', titleTextStyle: {color: '#DF0101', bold: true},

        width: 1000, height: 450,

        vAxis: {minValue: 0},

        hAxis: {title: 'Date', titleTextStyle: {color: '#08088A', bold: true}},

        legend: {position: 'none'},

        

    };

    var chart = new google.visualization.ColumnChart(document.getElementById('ColumnChart'));

    

    

    chart.draw(view, options);

}

NOTE: Now what I need is---

To replace that 200 value with my bufferHigh object, 50 with bufferMedium and 0 with bufferLow...

Please suggest a way... Thanks in advance... 

[Nagendra Singh]

Continued from previous mail..

When hitting the url: "/RestartSpringRestService/rest/colorIndicator",

this is what I am getting..

{"1":{"bufferHigh":200,"bufferMedium":50,"bufferLow":0,"cpuHigh":85.0,"cpuMedium":70.0,"cpuLow":0.0,"memoryHigh":85.0,"memoryMedium":70.0,"memoryLow":0.0}}

[Andrew Gallant]

Do you mean replace these values in the view?

if (val >= 200) {

    return '#d51711'; // max

}

else if (val >= 50) {

    return '#f9f107'; // medium

}

else {

    return '#07D819'; // min

}

...

[Nagendra Singh]

Yes.. replace 200 with "bufferHigh" and 50 with "bufferMedium" and 0 with "bufferLow"

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Nagendra Singh]

Thanks andrew.. I managed to do that....

Now one more problem.. I need to click the buffer bar and open a page. I know I have to use listener. I have used it... But its working form only buffer bar as I have to hardcode it.. Is there a way by which when you click buffer a different page opens , same goes for cpu and memory bar..?? Please help...

[Andrew Gallant]

When you use the "select" handler, the selection object will identify the row and column of the selected bar, which you can use to identify the page to navigate to:

google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getSelection();
    if (selection.length) {
        // selection[0].row is the row index in the view
        // selection[0].column is the column index in the view
        // if column is null, then the user clicked on the legend
    }
});

To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/UMGeagSZ8eo/unsubscribe.<br

...

[Nagendra Singh]

When I use ---

google.visualization.events.addListener(chart, 'select', function() {

    var selection = chart.getSelection();

   if (selection.length) {

       //var val1= selection[0].row;

       var val2= selection[0].column;

       //alert('Cloumn :'+val1+ ' was clicked');

       alert('Cloumn :'+val2+ ' was clicked');

    }});

It is showing as column 1 was clicked for 1st column,

but for 2nd and 3rd its showing as column 3 was clicked and column 5 was clicked...

Please help..

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Andrew Gallant]

Yes, because the style columns are 2, 4, and 6.  If you reference the data in the DataView instead of the DataTable, it will work fine.

<block

...

[Nagendra Singh]

Hi Andrew...

If I dont use the google api and the value which we are getting by hitting the url needs to be implemented into a circle drawn inside a javascript. Then what we need to do.. 

My circle is drawn with this code..

$('#buttons1').resize(function(height) {

    var fuente = $(this).height() / 2;

    var margen = (fuente / 2) - 5;

    $('.contenido').css('font-size', fuente + 'px');

    $('.contenido').css('margin-top', margen + 'px');

});

DIV ID--- <div id="buttons1"></div>

--

[Andrew Gallant]

I'm sorry, but I don't understand what it is you are trying to accomplish.

...

[Nagendra Singh]

I am trying to draw three circles, each for Buffer, Cpu, and Memory. Now I am trying to show red, yellow, green in these three circles like we did in the Column bar. I will paste the code. Please let me know if its right or any modifications are required...

CODE----

$(function() {

        var jsonData = $.ajax({

            url: "/RestartSpringRestService/rest/allIndicator",

            dataType: "json",

            async: false

        }).responseText;

        

       

        var jsonData1 = $.ajax({

            url: "/RestartSpringRestService/rest/colorIndicator",

            dataType: "json",

            async: false

        }).responseText;

        

        var jsonObj1 = JSON.parse(jsonData1);

        // Create our data table out of JSON data loaded from server.

        var size = 0;

        for(var sizeCount in jsonObj1){

            size++;

        }

        

        var dataArray1 = new Array(size+1);

        

        var jsonObj = JSON.parse(jsonData);

        // Create our data table out of JSON data loaded from server.

        var size = 0;

        for(var sizeCount in jsonObj){

            size++;

        }

        var dataArray = new Array(size+1);

        dataArray[0] = new Array(4);

        dataArray[0][0] = 'Date';

        dataArray[0][1] = 'Buffer';

        dataArray[0][2] = 'Cpu';

        dataArray[0][3] = 'Memory';

        

        //dataArray[0][2] = {type:'string', role:'tooltip'};

        var i = 1;

        var i = 1;

        while(i < size+1){

            dataArray[i] = new Array();

            //dataArray[i][1] = (jsonObj[i].siteIndicatorColor);

            dataArray[i][0] =new Date(jsonObj[i].dateOfOccurence);

            dataArray[i][1] = (jsonObj[i].bufferCount);

            dataArray[i][2] = (jsonObj[i].cpu);

            dataArray[i][3] = (jsonObj[i].memory);

            i++;

        }

        

        var Buffer = jsonObj[1].bufferCount;

        var Cpu = jsonObj[1].cpu;

        var Memory = jsonObj[1].memory;

        

    while(i < size+1){

        dataArray1[i] = new Array();

        //dataArray[i][1] = (jsonObj[i].siteIndicatorColor);

        dataArray1[i][0] = (jsonObj1[i].bufferHigh);

        dataArray1[i][1] = (jsonObj1[i].bufferMedium);

        dataArray1[i][2] = (jsonObj1[i].bufferLow);

        dataArray1[i][3] = (jsonObj1[i].cpuHigh);

        dataArray1[i][4] = (jsonObj1[i].cpuMedium);

        dataArray1[i][5] = (jsonObj1[i].cpuLow);

        dataArray1[i][6] = (jsonObj1[i].memoryHigh);

        dataArray1[i][7] = (jsonObj1[i].memoryMedium);

        dataArray1[i][8] = (jsonObj1[i].memoryLow);

        i++;

    }

    var valBufferHigh = jsonObj1[1].bufferHigh;

    var valBufferMedium = jsonObj1[1].bufferMedium;

    var valBufferLow = jsonObj1[1].bufferLow;

    var valCpuHigh = jsonObj1[1].cpuHigh;

    var valCpuMedium = jsonObj1[1].cpuMedium;

    var valCpuLow = jsonObj1[1].cpuLow;

    var valMemoryHigh = jsonObj1[1].memoryHigh;

    var valMemoryMedium = jsonObj1[1].memoryMedium;

    var valMemoryLow = jsonObj1[1].memoryLow;

    

  

    if(Buffer >= valBufferHigh){

    //Create jsGraphics object

        var gr = new jsGraphics(document.getElementById("canvas"));

        //Create jsColor object

        var col = new jsColor("red");

        //Draw a Line between 2 points

        var pt1 = new jsPoint(200,130);

        

        //Draw filled circle with pt1 as center point and radius 30. 

        gr.fillCircle(col,pt1,40);

       }

    else if(Buffer >= valBufferMedium){

    //Create jsGraphics object

        var gr = new jsGraphics(document.getElementById("canvas"));

        //Create jsColor object

        var col = new jsColor("yellow");

        //Draw a Line between 2 points

        var pt1 = new jsPoint(200,130);

        

        //Draw filled circle with pt1 as center point and radius 30. 

        gr.fillCircle(col,pt1,40);

       }

    else {

    //Create jsGraphics object

        var gr = new jsGraphics(document.getElementById("canvas"));

        //Create jsColor object

        var col = new jsColor("green");

        //Draw a Line between 2 points

        var pt1 = new jsPoint(200,130);

        

        //Draw filled circle with pt1 as center point and radius 30. 

        gr.fillCircle(col,pt1,40);

}

    

    }

);

DIV ID=

<div id="canvas"></div>

--

[Nagendra Singh]

Or is there a better way to do this... Please let me know...

[Nagendra Singh]

And one more thing Andrew.. It's regarding Google Geo chart api. I need to blend the map in the page. Like the ocean should look like a whole page. Whatever the screen size is the map should blend in the page. Please suggest..

[Andrew Gallant]

I'm not familiar with the jsGraphics API, so I'm not the right person to ask for help with that.  Try StackOverflow; you will likely have more luck there.

If you want the GeoChart to be a background for your page, you will need to make it's container's dimensions equal to the window's dimensions, set "position: fixed" in it's CSS, and set it's z-index to a value lower than everything else on the page.

...

[Nagendra Singh]

Thanks Andrew...

--

[Nagendra Singh]

Hi.

In scatter chart...

vAxis: {minValue: 0, maxValue: 100},

vAxis: {title: 'CPU', minValue:0, maxValue: 100, titleTextStyle: {color: '#08088A', bold: true}},

If i write the first line, its working fine, but without the title...

And when I write the second line the title is coming, min value is displaying, but the max value is not working....

Please suggest...

Here the whole js code...

google.load('visualization', '1.1', {packages: ['corechart','controls','table']});

google.setOnLoadCallback(drawChart);

function drawChart() {

        var jsonData = $.ajax({

            url: "/RestartSpringRestService/rest/cpuIndicator",

            dataType: "json",

            async: false

        }).responseText;

        var jsonData1 = $.ajax({

            url: "/RestartSpringRestService/rest/colorIndicator",

            dataType: "json",

            async: false

        }).responseText;

        

        var jsonObj1 = JSON.parse(jsonData1);

        // Create our data table out of JSON data loaded from server.

        var size = 0;

        for(var sizeCount in jsonObj1){

            size++;

        }

        

        var dataArray1 = new Array(size+1);

        

        var jsonObj = JSON.parse(jsonData);

        // Create our data table out of JSON data loaded from server.

        var size = 0;

        for(var sizeCount in jsonObj){

            size++;

        }

        var dataArray = new Array(size+1);

        dataArray[0] = new Array(2);

        dataArray[0][0] = 'Date';

        dataArray[0][1] = 'CPU';

        //dataArray[0][2] = {type:'string', role:'tooltip'};

        var i = 1;

    while(i < size+1){

            dataArray[i] = new Array();

            dataArray[i][0] =new Date(jsonObj[i].dateOfOccurence);

            dataArray[i][1] = (jsonObj[i].cpu);

            

            //dataArray[i][2] = (jsonObj[i].bufferCount);

            i++;

        }

    while(i < size+1){

        dataArray1[i] = new Array();

        //dataArray[i][1] = (jsonObj[i].siteIndicatorColor);

        dataArray1[i][0] = (jsonObj1[i].bufferHigh);

        dataArray1[i][1] = (jsonObj1[i].bufferMedium);

        dataArray1[i][2] = (jsonObj1[i].bufferLow);

        dataArray1[i][3] = (jsonObj1[i].cpuHigh);

        dataArray1[i][4] = (jsonObj1[i].cpuMedium);

        dataArray1[i][5] = (jsonObj1[i].cpuLow);

        dataArray1[i][6] = (jsonObj1[i].memoryHigh);

        dataArray1[i][7] = (jsonObj1[i].memoryMedium);

        dataArray1[i][8] = (jsonObj1[i].memoryLow);

        i++;

    }

    var valCpuHigh = jsonObj1[1].cpuHigh;

    var valCpuMedium = jsonObj1[1].cpuMedium;

    var valCpuLow = jsonObj1[1].cpuLow;

    

    var data = new google.visualization.arrayToDataTable(dataArray);

    var view = new google.visualization.DataView(data);

    view.setColumns([0, 1, {

        type: 'string',

        role: 'style',

        calc: function (dt, row) {

             // cpu colors

             var val = dt.getValue(row, 1);

             if (val > valCpuHigh) {

                  return '#d51711'; // max

             }

             else if (val > valCpuMedium) {

                  return '#F9A113'; // medium

             }

             else {

                  return '#07D819'; // min

             }

        }

    }]);

    var options = {

    //colors: ['#FF0000'],

        title: 'Date vs. CPU Usage comparison', titleTextStyle: {color: '#DF0101', bold: true},

        width: 1000, height: 450,

        vAxis: {minValue: 0, maxValue: 100},

        //vAxis: {title: 'CPU', minValue:0, maxValue: 100, titleTextStyle: {color: '#08088A', bold: true}},

        hAxis: {title: 'Date', titleTextStyle: {color: '#08088A', bold: true}},

        legend: 'none'

    };

    var chart = new google.visualization.ScatterChart(document.getElementById('scatterChart2'));

    chart.draw(view, options);

}

[Andrew Gallant]

What do you mean by "maxValue is not working"?  Is the axis maximum less than 100, more than 100, or is the problem something else?

...

[Nagendra Singh]

When I apply maxValue 100, then its showing 120 in the axis. Whereas max value is 100 as I am displaying CPU usage.. 

--

[Andrew Gallant]

Set the viewWindow.min and viewWindow.max options instead of minValue and maxValue:

vAxis: {title: 'CPU', viewWindow: {min:0, max: 100}, titleTextStyle: {color: '#08088A', bold: true}},

The minValue/maxValue options specify a min/max for the chart to assume for the data, which only peripherally affects the axis values.  The viewWindow.min/max options specify the absolute range of the axis, regardless of the data.

...

[Nagendra Singh]

Hi. I have a problem using listener with google geo chart.

When a fresh page opens the geochart doesn't appear. But after I populate my database. The geo chart appears and works correctly.

Here is my code...

google.load('visualization', '1', {'packages': ['geochart']});

google.setOnLoadCallback(initialize);

function drawVisualization() {var data = new google.visualization.DataTable();

    var jsonData = $.ajax({

        url: "/RestartSpringRestService/rest/siteIndicator",

        dataType: "json",

        async: false,

    }).responseText;

    

    

    var jsonObj = JSON.parse(jsonData);

    // Create our data table out of JSON data loaded from server.

    var size = 0;

    for(var sizeCount in jsonObj){

        size++;

    }

    

        

    data.addColumn('number', 'Lat', 'Lat');

    data.addColumn('number', 'Long', 'Long');

    data.addColumn('number', 'Value', 'Value');

    data.addColumn({type:'string', role:'tooltip'});

    for (var i = 1; i < size+1; i++) {

        data.addRows([[jsonObj[i].latit,jsonObj[i].longi,jsonObj[i].siteIndicatorColor,jsonObj[i].siteNameRegion]]);

    }

    return data;

}

    var options = {

        colorAxis: { minValue : 1, maxValue : 3, colors: ['#00CC00','#DBA901', '#FF3300']}, // green to red

        legend: {textStyle: {color: 'black', fontSize: 10}},

        backgroundColor: {fill:'#94DBFF',stroke:'#000000' ,strokeWidth:1 },

        datalessRegionColor: '#f5f5f5',

        displayMode: 'markers',

        enableRegionInteractivity: 'true',

        resolution: 'countries',

        sizeAxis: {minSize:5,  maxSize: 5},

        region:'world',

        keepAspectRatio: true,

        width:1200,

        height:500,

        tooltip: {textStyle: {color: '#444444'}}

    };

    

   

    

    

    

    

/*

    chart.draw(data, options);

    fetchlastupdate();

*/  

    

//setInterval(drawVisualization, 5000);

var chart;

function fetchlastupdate(){

chart.draw(drawVisualization(), options);

document.getElementById('timestamp').textContent ='Last Refreshed : '+ new Date().toDateString() +'      '+ new Date().toTimeString();

setTimeout(fetchlastupdate, 5000);

}

function initialize(){

var jsonData1 = $.ajax({

        url: "/RestartSpringRestService/rest/allIndicator",

        dataType: "json",

        async: false

    }).responseText;

var jsonObj1 = JSON.parse(jsonData1);

    // Create our data table out of JSON data loaded from server.

    var size = 0;

    for(var sizeCount in jsonObj1){

        size++;

    }

    

    var dataArray1 = new Array(size+1);

    

    

    var i = 1;

    while(i < size+1){

        dataArray1[i] = new Array();

        //dataArray[i][1] = (jsonObj[i].siteIndicatorColor);

        dataArray1[i][0] =new Date(jsonObj1[i].dateOfOccurence);

        dataArray1[i][1] = (jsonObj1[i].bufferCount);

        dataArray1[i][2] = (jsonObj1[i].cpu);

        dataArray1[i][3] = (jsonObj1[i].memory);

        i++;

    }

    

    var BufferCount = jsonObj1[1].bufferCount;

    var Cpu = jsonObj1[1].cpu;

    var Memory = jsonObj1[1].memory;

    

chart = new   google.visualization.GeoChart(document.getElementById('visualization'));

google.visualization.events.addListener(chart, 'select', function() {

   var selection = chart.getSelection();

   if (selection.length > 0) {

       var row = selection[0].row;

       if (row != null) {

           var siteName = drawVisualization().getValue(row, 3);

           //alert("You clicked ID " + data.getValue(row, 3));

           var domainName =  window.location.hostname;

           //window.open('http://'+domainName+':8080/RestartSpringRestService/siteCode?siteCode=' + siteName);

           window.open('http://'+domainName+':8080/RestartSpringRestService/siteDetails?siteCode=' + siteName + '&buffer1=' + BufferCount +  '&cpu1=' + Cpu +  '&memory1=' + Memory );

           

       }

   }

});

fetchlastupdate();

}

Basically I know the reason. At first the database is null. So when it hits the database with this  url: "/RestartSpringRestService/rest/allIndicator",

It returns null. So the map does not appear. Please provide a solution. I am stuck big time.

--

[Nagendra Singh]

I solved the above problem andrew... 

Now I have issue with legends...

The legend's color are appearing default, like blue. Its not changing its color as per the marker color..

Please suggest...

Below is the code..

google.load('visualization', '1.1', {packages: ['corechart','controls','table']});

google.setOnLoadCallback(drawChart);

function drawChart() {

        var jsonData = $.ajax({

            url: "/RestartSpringRestService/rest/bufferedIndicator",

            dataType: "json",

            async: false

        }).responseText;

        

       

        var jsonData1 = $.ajax({

            url: "/RestartSpringRestService/rest/colorIndicator",

            dataType: "json",

            async: false

        }).responseText;

        

        var jsonObj1 = JSON.parse(jsonData1);

        // Create our data table out of JSON data loaded from server.

        var size = 0;

        for(var sizeCount in jsonObj1){

            size++;

        }

        

        var dataArray1 = new Array(size+1);

        

        var jsonObj = JSON.parse(jsonData);

        // Create our data table out of JSON data loaded from server.

        var size = 0;

        for(var sizeCount in jsonObj){

            size++;

        }

        var dataArray = new Array(size+1);

        dataArray[0] = new Array(2);

        dataArray[0][0] = 'Date';

        dataArray[0][1] = 'Buffer';

        

        //dataArray[0][2] = {type:'string', role:'tooltip'};

        var i = 1;

    while(i < size+1){

            dataArray[i] = new Array();

            //dataArray[i][1] = (jsonObj[i].siteIndicatorColor);

            dataArray[i][0] =new Date(jsonObj[i].dateOfOccurence);

            dataArray[i][1] = (jsonObj[i].bufferCount);

            

            i++;

        }

    while(i < size+1){

        dataArray1[i] = new Array();

        //dataArray[i][1] = (jsonObj[i].siteIndicatorColor);

        dataArray1[i][0] = (jsonObj1[i].bufferHigh);

        dataArray1[i][1] = (jsonObj1[i].bufferMedium);

        dataArray1[i][2] = (jsonObj1[i].bufferLow);

        dataArray1[i][3] = (jsonObj1[i].cpuHigh);

        dataArray1[i][4] = (jsonObj1[i].cpuMedium);

        dataArray1[i][5] = (jsonObj1[i].cpuLow);

        dataArray1[i][6] = (jsonObj1[i].memoryHigh);

        dataArray1[i][7] = (jsonObj1[i].memoryMedium);

        dataArray1[i][8] = (jsonObj1[i].memoryLow);

        i++;

    }

    var valBufferHigh = jsonObj1[1].bufferHigh;

    var valBufferMedium = jsonObj1[1].bufferMedium;

    var valBufferLow = jsonObj1[1].bufferLow;

    

    var data = new google.visualization.arrayToDataTable(dataArray);

    var view = new google.visualization.DataView(data);

    view.setColumns([0, 1, {

        type: 'string',

        role: 'style',

        calc: function (dt, row) {

             // buffer colors

             var val = dt.getValue(row, 1);

             if (val >= valBufferHigh) {

                  return '#d51711'; // max

             }

             else if (val >= valBufferMedium) {

                  return '#F9A113'; // medium

             }

             else {

                  return '#07D819'; // min

             }

        }

    }]);

    

    var options = {

   

   

        title: 'Last 30 Days BufferCount', titleTextStyle: {color: '#DF0101', bold: true, fontSize: 18},

        width: 1000, height: 450,

        //vAxis: {minValue: 0, maxValue: 500},

        vAxis: {title: 'Buffer', minValue: 0, titleTextStyle: {color: '#08088A', bold: true, fontSize: 15}},

        hAxis: {title: 'Date/Time', titleTextStyle: {color: '#08088A', bold: true, fontSize: 15}},

        legend: {position: 'top'}

    };

    var chart = new google.visualization.ScatterChart(document.getElementById('scatterChart1'));

    chart.draw(view, options);

}

[Andrew Gallant]

The legend shows the data series color, not the point colors.  If you need the legend to match the point colors, you will have to split your data into multiple series (eg, "buffer" gets split into "buffer high", "buffer medium", and "buffer low").  You can do this with the DataView:

view.setColumns([0, {

    type: 'number',

    label: 'Buffer High',

    calc: function (dt, row) {

         var val = dt.getValue(row, 1);

         return (val >= valBufferHigh) ? val : null;

    }

}, {

    type: 'number',

    label: 'Buffer Medium',

    calc: function (dt, row) {

         var val = dt.getValue(row, 1);

         return (val < valBufferHigh && val >= valBufferMedium) ? val : null;

    }

}, {

    type: 'number',

    label: 'Buffer Low',

    calc: function (dt, row) {

         var val = dt.getValue(row, 1);

         return (val < valBufferMedium) ? val : null;

    }

}]);

and set the colors in the "colors" option for the chart:

var options = {

    colors: ['#d51711', '#F9A113', '#07D819'],

    title: 'Last 30 Days BufferCount', titleTextStyle: {color: '#DF0101', bold: true, fontSize: 18},

    width: 1000, height: 450,

    vAxis: {title: 'Buffer', minValue: 0, titleTextStyle: {color: '#08088A', bold: true, fontSize: 15}},

    hAxis: {title: 'Date/Time', titleTextStyle: {color: '#08088A', bold: true, fontSize: 15}},

    legend: {position: 'top'}

};

Thanks Andrew...

<d

...

[Nagendra Singh]

But I am not using any CSS for geochart. 

--

[Andrew Gallant]

You don't need to use any CSS.

...

[Nagendra Singh]

I replied to this reply of yours.. Sorry not to mention it previously...

I'm not familiar with the jsGraphics API, so I'm not the right person to ask for help with that.  Try StackOverflow; you will likely have more luck there.

If you want the GeoChart to be a background for your page, you will need to make it's container's dimensions equal to the window's dimensions, set "position: fixed" in it's CSS, and set it's z-index to a value lower than everything else on the page.

I am not using any css for geochart...

--

[Andrew Gallant]

You need to use CSS to make it the background for your page; something like this:

#myGeoChartContainer {
    width: 100%;
    z-index: -1000;
    position: fixed;
    top: 0;
    left: 0;
}

</di

...

[Nagendra Singh]

This is my index.jsp..

<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>

<%@taglib uri="http://www.springframework.org/tags/form" prefix="sf"%>

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<link rel="stylesheet" type="text/css" media="all" href="<c:url value="/resources/css/styles/button.css" />">

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="<c:url value="/resources/js/googleMapChart.js" />" type="text/javascript"></script>

<html>

<body>

<h3 align="center">Sites Running MineStar</h3>

<div id="visualization" align="center" ></div>

<div id="timestamp" align="center"></div>

</body>

</html>

This is my css...

#visualization{

width: 100%;

z-index: -1000;

postion: fixed;

top: 0;

left: 0;

}

When I use css, the map does not work as it does earlier. The region interactivity is not working. As soon as i removed the css it worked again perfectly. Please Help...

--

[Andrew Gallant]

If you want the chart as the background, it will be layered below everything else on the page, which blocks the mouse events.  You can experiment by setting z-index values for your page elements to bring the chart to the right depth.  Likely you will want all elements to have a positive z-index, with all elements layered on top of the GeoChart having higher z-indices than the chart.

google.load('visualization', '1.1', {packages: ['corechart&#3

...

[Nagendra Singh]

hi..

In my scatter chart I am displaying 30 days CPU usage values. How do I implement a timer scale, which will be visible to the user, and the user will be able to scale the date according to his needs? Is their a way to do this ? If yes then please suggest.. Any help would be gratefull....

Here is my scatter chart code..

google.load('visualization', '1.1', {packages: ['corechart','controls','table']});

google.setOnLoadCallback(drawChart);

function drawChart() {

        var jsonData = $.ajax({

            url: "/RestartSpringRestService/rest/cpuIndicator",

            dataType: "json",

            async: false

        }).responseText;

        var jsonData1 = $.ajax({

            url: "/RestartSpringRestService/rest/colorIndicator",

            dataType: "json",

            async: false

        }).responseText;

        

        var jsonObj1 = JSON.parse(jsonData1);

        // Create our data table out of JSON data loaded from server.

        var size = 0;

        for(var sizeCount in jsonObj1){

            size++;

        }

        

        var dataArray1 = new Array(size+1);

        

        var jsonObj = JSON.parse(jsonData);

        // Create our data table out of JSON data loaded from server.

        var size = 0;

        for(var sizeCount in jsonObj){

            size++;

        }

        var dataArray = new Array(size+1);

        dataArray[0] = new Array(2);

        dataArray[0][0] = 'Date';

        dataArray[0][1] = 'CPU';

        //dataArray[0][2] = {type:'string', role:'tooltip'};

        var i = 1;

    while(i < size+1){

            dataArray[i] = new Array();

            dataArray[i][0] =new Date(jsonObj[i].dateOfOccurence);

            dataArray[i][1] = (jsonObj[i].cpu);

            

            //dataArray[i][2] = (jsonObj[i].bufferCount);

            i++;

        }

    while(i < size+1){

        dataArray1[i] = new Array();

        //dataArray[i][1] = (jsonObj[i].siteIndicatorColor);

        dataArray1[i][0] = (jsonObj1[i].bufferHigh);

        dataArray1[i][1] = (jsonObj1[i].bufferMedium);

        dataArray1[i][2] = (jsonObj1[i].bufferLow);

        dataArray1[i][3] = (jsonObj1[i].cpuHigh);

        dataArray1[i][4] = (jsonObj1[i].cpuMedium);

        dataArray1[i][5] = (jsonObj1[i].cpuLow);

        dataArray1[i][6] = (jsonObj1[i].memoryHigh);

        dataArray1[i][7] = (jsonObj1[i].memoryMedium);

        dataArray1[i][8] = (jsonObj1[i].memoryLow);

        i++;

    }

    var valCpuHigh = jsonObj1[1].cpuHigh;

    var valCpuMedium = jsonObj1[1].cpuMedium;

    var valCpuLow = jsonObj1[1].cpuLow;

    

    var data = new google.visualization.arrayToDataTable(dataArray);

    var view = new google.visualization.DataView(data);

    view.setColumns([0, 1, {

        type: 'string',

        role: 'style',

        calc: function (dt, row) {

             // cpu colors

             var val = dt.getValue(row, 1);

             if (val > valCpuHigh) {

                  return '#d51711'; // max

             }

             else if (val > valCpuMedium) {

                  return '#F9A113'; // medium

             }

             else {

                  return '#07D819'; // min

             }

        }

    }]);

    var options = {

     //colors: ['#FF0000'],

        title: 'Date vs. CPU Usage comparison', titleTextStyle: {color: '#DF0101', bold: true},

        width: 1000, height: 450,

        vAxis: {minValue: 0, maxValue: 100},

        //vAxis: {title: 'CPU', minValue:0, maxValue: 100, titleTextStyle: {color: '#08088A', bold: true}},

        hAxis: {title: 'Date', titleTextStyle: {color: '#08088A', bold: true}},

        legend: 'none'

    };

    var chart = new google.visualization.ScatterChart(document.getElementById('scatterChart2'));

    chart.draw(view, options);

}

--

[Andrew Gallant]

Would something like this work for you?  https://developers.google.com/chart/interactive/docs/gallery/controls#chartrangefilter

                  return '#f9f107'; // medium</d

...

[Nagendra Singh]

Yup this is great... But as I am using view for setting high and low values, how will I use view again as suggested in visualization playground.

--

[Andrew Gallant]

The example in the playground is needlessly complicated; don't follow it.  Your code probably should look something like this:

    var control = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'control_div',
        options: {
            filterColumnIndex: 0,
            ui: {
                chartOptions: {
                    height: 50,
                    width: 1000,
                    chartArea: {
                        width: '80%' // should be the same as the chart's chartArea.width option
                    }
                },
                chartView: {
                    columns: [0, 1]
                }
            }
        }
    });
   
    var chart = new google.visualization.ChartWrapper({
        chartType: 'ScatterChart',
        containerId: 'scatterChart2',
        options: {

            title: 'Date vs. CPU Usage comparison', titleTextStyle: {color: '#DF0101', bold: true},
            width: 1000, height: 450,
            vAxis: {minValue: 0, maxValue: 100},

            hAxis: {title: 'Date', titleTextStyle: {color: '#08088A', bold: true}},

            legend: 'none',
            chartArea: {
                width: '80%' // should be the same as the control's chartArea.width option
            }
        },
        view: {
            columns: [0, 1, {

                type: 'string',
                role: 'style',
                calc: function (dt, row) {
                    // cpu colors
                    var val = dt.getValue(row, 1);
                    if (val > valCpuHigh) {
                        return '#d51711'; // max
                    }
                    else if (val > valCpuMedium) {
                        return '#F9A113'; // medium
                    }
                    else {
                        return '#07D819'; // min
                    }
                }
            }]
        }
    });
   

    var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));
    dashboard.bind([control], [chart]);
    dashboard.draw(data);
}

            dataArray1[i][2] = (jsonObj[i].bufferLow);</div

...

[Nagendra Singh]

Ok, Andrew. Will try this and get back to you. Thanks a ton.

--

[Nagendra Singh]

Hi Andrew.. 

Please look in the attachment below. I have not written any condition for date timeline. But why is it showing as time instead of days in the h axis. The plot is of three days values. 6th, 7th and 8th june. Can I modify it to get only days. Like 6th june and so on. Please suggest.. 

Here is the code---

[Nagendra Singh]

And andrew ..

I while running your code for CPU usage a blank page is displaying. The code breaks after i debug this line.. var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));

I have modified my html to : 

<div id="scatterChart2" style="width: 1000px; height: 450px;"  align="center" title="Date vs CPU"></div>

<div id="control_div" style="width: 1000px; height: 450px;"  align="center" title="Date Slider"></div>

[Nagendra Singh]

These are the tree exception I am getting..

1. Uncaught Error: Container is not defined format+en,default+en,ui+en,controls+en,table+en,corechart+en.I.js:126

1. Uncaught TypeError: Cannot read property 'nodeType' of null format+en,default+en,ui+en,controls+en,table+en,corechart+en.I.js:62

1. Uncaught Error: Container is not defined
2. format+en,default+en,ui+en,controls+en,table+en,corechart+en.I.js:126
   

[Nagendra Singh]

I followed some of your stackoverflow answers and resolved the issue thanks...

Now I just need to change the time into date format. please help....

[Nagendra Singh]

I found this in google visualisation api docs..

'hAxis': {format: "dd MMM"},

is this the correct way? Bcoz its working fine by this method. Thanks andrew.

[Nagendra Singh]

All is ok . One Last query If i wanted to implement the DateRangeFilter  

then what should I do?

[Nagendra Singh]

Thanks andrew I got that too. I just changed the control type as "DateRangeFilter"

[Nagendra Singh]

Hi Andrew..

How will i change ui.label text font to bold. I have checked everything, but could not find a way to do this. Please Help...

This is the code:

var control = new google.visualization.ControlWrapper({

        'controlType': 'DateRangeFilter',

        'containerId': 'control_div2',

        'options': {

            'filterColumnIndex': 0,

            'ui': {

            'label': 'Date Range',

            'labelSeparator': ':',

                'chartOptions': {

                    'height': 100,

                    'width': 1000,

                    'hAxis': {format: "dd MMM"},

                    'chartArea': {

                        'width': '80%' // should be the same as the chart's chartArea.width option

                    }

                },

                'chartView': {

                    'columns': [0, 1]

                }

            }

        }

    });

[Andrew Gallant]

Use the ui.cssClass option to assign a CSS class to the DateRangeFilter, you can then style it however you need.  Alternatively, you can add this to your CSS, if you want to keep the rest of the styling the same:

.google-visualization-controls-label {

    font-weight: bold;

...

[Nagendra Singh]

Thanks Andrew. Its working fine.

--

[Nagendra Singh]

Hi Andrew,

Every thing is working fine. But i need an advice. I have just added only one month log files. The first page is displaying very damn slowly. I will share the code below. There are three indicators, and the indicator which is red will show the graph below. And the rest will be shown onclick next page. 

Please suggest me, what should I do in order to keep the performance high. Because in future when the project will be up and running, there will be years of log files which the site has to collect and display it. Please help!!!!!!!

Here is the code for my page:

<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>

<%@taglib uri="http://www.springframework.org/tags/form" prefix="sf"%>

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ page session="false" %>

<%@page import="com.minestar.spring.utils.PropertiesReader" %>

<%

PropertiesReader propertiesReader = new PropertiesReader();

propertiesReader.load("siteIndicator.properties");

int bufferCountHigh =Integer.parseInt(propertiesReader.getPropertyValue("buffer.high"));

double cpuHigh =Double.parseDouble(propertiesReader.getPropertyValue("cpu.high"));

double memoryHigh =Double.parseDouble(propertiesReader.getPropertyValue("memory.high"));

int bufferCountSite = Integer.parseInt(request.getParameter("buffer1"));

double cpuHighSite=Double.parseDouble(request.getParameter("cpu1"));

double cpuMemorySite=Double.parseDouble(request.getParameter("memory1"));

boolean b= bufferCountSite>bufferCountHigh;

boolean c= cpuHighSite>cpuHigh;

boolean m= cpuMemorySite>memoryHigh;

boolean b1= bufferCountSite<bufferCountHigh;

boolean c1= cpuHighSite<cpuHigh;

boolean m1= cpuMemorySite<memoryHigh;

/* out.println(b);

out.println(c);

out.println(m);

out.println("-------");

out.println(b1);

out.println(c1);

out.println(m1); */

%>

<html>

<head>

<title>Scatter Graph</title>

    <link rel="stylesheet" type="text/css" media="all" href="<c:url value="/resources/css/styles/li-scroller.css" />">

    <link rel="stylesheet" type="text/css" media="all" href="<c:url value="/resources/css/styles/button.css" />">

    <link rel="stylesheet" type="text/css" media="all" href="<c:url value="/resources/css/styles/scatterFilter.css" />">

    <%-- <link rel="stylesheet" type="text/css" media="all" href="<c:url value="/resources/css/styles/buttons.css" />"> --%>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    

    <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

    <script src="<c:url value="/resources/js/jquery.li-scroller.1.0.js" />" type="text/javascript"></script>

    <script src="<c:url value="/resources/js/googleScatterChart1.js" />" type="text/javascript"></script>

    <script src="<c:url value="/resources/js/googleScatterChart2.js" />" type="text/javascript"></script>

    <script src="<c:url value="/resources/js/googleScatterChart3.js" />" type="text/javascript"></script>

    <script src="<c:url value="/resources/js/googleColumnChart.js" />" type="text/javascript"></script>

    <script src="<c:url value="/resources/js/buttons1.js" />" type="text/javascript"></script>

    <script src="<c:url value="/resources/js/buttons2.js" />" type="text/javascript"></script>

    <script src="<c:url value="/resources/js/buttons3.js" />" type="text/javascript"></script>

    <script src="<c:url value="/resources/js/jsDraw2D.js" />" type="text/javascript"></script>

    <script src="<c:url value="/resources/js/newWindow.js" />" type="text/javascript"></script>

    <script type="text/javascript">

        $(function(){

            $("ul#ticker01").liScroll();

        });

    </script>

  

  <script type="text/javascript">

  $(function(){

  $('#canvas1').mouseover(function(){

    $('#canvas1').css("background-color","lightgray");

  });

  $('#canvas1').mouseout(function(){

   $('#canvas1').css("background-color","white");

 });

  });

  </script>

  <script type="text/javascript">

  $(function(){

  $('#canvas2').mouseover(function(){

    $('#canvas2').css("background-color","lightgray");

  });

  $('#canvas2').mouseout(function(){

   $('#canvas2').css("background-color","white");

 });

  });

  </script>

  <script type="text/javascript">

  $(function(){

  $('#canvas3').mouseover(function(){

    $('#canvas3').css("background-color","lightgray");

  });

  $('#canvas3').mouseout(function(){

   $('#canvas3').css("background-color","white");

 });

  });

  </script>

 

</head>

<body>

<p style="text-align:center;"><span style="font-family:Times;font-size:22px;font-style:normal;font-weight:bold;text-transform:uppercase;color:FFFFFF;background-color:000000;">indicators for : ${siteCode}</span>

</p>

<!-- <div id="ColumnChart" style="width: 1000px; height: 450px;"  align="center"><h3>Column Chart for all Parameters</h3></div> -->

<!-- <div style="width: 500px; height: 400px;"> -->

<div class="button_con" style="width: 300px; height: 400px; text-align: center;">

<div id="canvas1" title="Buffer Indicator">Buffer Count :   ${buffer1}</div>

<div id="canvas2" title="CPU Indicator">Cpu Usage :     ${cpu1}%</div>

<div id="canvas3" title="Memory Indicator">Memory Usage: ${memory1}%</div>

</div>

<c:if test= "<%=b1 %>">

<script>

$(function() {

    $( '#canvas1' ).tooltip({

    content: "Click Indicator to see Scatter Plot",

    position: { my: "left+140 center", at: "right center" }

    });

  });

  

$( '#canvas1' ).click(function() {

var indicatorName= 'Buffer';

var domainName =  window.location.hostname;

window.open('http://'+domainName+':8080/RestartSpringRestService/indicator?indicatorName=' + indicatorName);

});

</script>

</c:if>

<c:if test= "<%=c1 %>">

<script>

$(function() {

    $( '#canvas2' ).tooltip({

    content: "Click Indicator to see Scatter Plot",

    position: { my: "left+140 center", at: "right center" },

   

    });

  });

$( '#canvas2' ).click(function() {

var indicatorName= 'CPU';

var domainName =  window.location.hostname;

window.open('http://'+domainName+':8080/RestartSpringRestService/indicator?indicatorName=' + indicatorName);

});

</script>

</c:if>

<c:if test= "<%=m1 %>">

<script>

$(function() {

    $( '#canvas3' ).tooltip({

    content: "Click Indicator to see Scatter Plot",

    position: { my: "left+120 center", at: "right center" }

    });

  });

$( '#canvas3' ).click(function() {

var indicatorName= 'Memory';

var domainName =  window.location.hostname;

window.open('http://'+domainName+':8080/RestartSpringRestService/indicator?indicatorName=' + indicatorName);

});

</script>

</c:if>

<!-- <div id="TableChart" style="width: 1000px; height: 150px;"  align="center"><h3>Table Chart</h3></div> -->

<c:if test= "<%=b %>">

<div id="dashboard1" align="center">

 <div id="control_div1" align="left"></div>

 <div id="control_category1" align="left"></div>

 <div id="scatterChart1" title="Date vs BufferCount"></div></div>

</c:if>

<c:if test="<%=c %>">

<div id="dashboard2" align="center">

 <div id="control_div2" align="left"></div>

 <div id="control_category2" align="left"></div>

 <div id="scatterChart2" title="Date vs CPU Usage"></div></div>

</c:if>

<c:if test="<%=m %>">

<div id="dashboard3" align="center">

 <div id="control_div3" align="left"></div>

 <div id="control_category3" align="left"></div>

 <div id="scatterChart3" title="Date vs Memory Usage"></div></div>

</c:if>

<ul id="ticker01">

        <li><span>All RED Indicators Graph are shown in this page</span></li>

        

    </ul>

</body>

</html>

[Andrew Gallant]

How much data is one month's worth?  Thousands of records, millions of records?

You could have any of three main sources of performance problems: 1) your server could be slow in querying your data, 2) sending data from server to client could be slow, and/or 3) drawing the charts could be slow.  Profile the performance of different aspects of your page to determine where the source of slowness is, and then you can begin looking for ways to address it.

...

[Nagendra Singh]

Hi,

I think drawing the chart is what taking time. Because when the page loads, the indicators and the sliders are generated quickly, but the scatter chart displays after 10-12 secs. 

What I was thinking, is there a way to minify my self written js pages. Will this help?

--

[Andrew Gallant]

If the problem is with the chart drawing, then no, minifying your scripts will not help.  Approximately how many data points are in your chart?

<blockquote style="margin:0 0 0 .8ex;border-left:1px #ccc solid;paddin

...

[Nagendra Kumar Singh]

Aproxx 14000 points for 1 month data.

---

From: Andrew Gallant
Sent: 12-07-2014 AM 10:38
To: google-visua...@googlegroups.com
Subject: Re: [visualization-api] Re: Column chart - Bar color

[The entire original message is not included.]

[Andrew Gallant]

With 14000 data points, the chart would probably draw quite slow.  I think the only way you can increase draw speed is to reduce the number of points drawn at one time.  Try setting default values for the min and max on your filter.

&nbs

...

[Nagendra Singh]

Hi Andrew, 

The problem is that we need to show our customers last one month data. So its important to show all the dots. I have implemented a range slider for both date and buffer values. But they also slide very slowly. Will a better server/ workstation increase the performance? Please suggest.

--

[Andrew Gallant]

Your server will not affect client-side performance.  Depending on how good the connection between your server and clients is, you may be able to set up a system that handles all of the data filtering server-side, keeping the quantity of data stored client-side to a minimum; there is nothing in the API that will help you do this, though, so you would have to develop a custom solution.

Do you have a public-facing page I can test this on?  If I can do some performance profiling, I may be able to figure out a way to cheat to improve performance without resorting to any server-side tricks.

</div

...

[Nagendra Singh]

Actually the project is still in basepilot position. So there is no public facing website. We have a page hosted as http://dgc001113207:8080/RestartSpringRestService/home

Please let me know if you are able to access it. 

--

[Andrew Gallant]

No, I cannot access that.

...

[Nagendra Singh]

I am sorry for that. So what do you suggest I should do? 

--

[Andrew Gallant]

I wish I had an easy answer for you, but I don't.  Finding precisely where the cause of the slowdown is and what you can do about it is a very tricky problem.  If the slowdown is really due to the amount of data you loaded in the page, the solution is likely to implement something where the bulk of your data stays on the server and only what you need to display at any given time is stored client-side.

...

[Nagendra Singh]

Hi, 

The marker which are displayed in the scatter chart are not having smooth edges when displayed in a big screen. Is this normal? 

--

[Nagendra Singh]

Sorry I didn't mention, the marker is referencing to the pointShape.

[Andrew Gallant]

I could not replicate this problem; do you have an example I could test?

The charts are drawn with vector graphics (SVG), so they should scale well with screen resolution.  Since your screen is comrpised of a grid of pixels, it is impossible to draw a truly smooth line that isn't perfectly aligned with the pixel grid, and you will get jagged edges - a phenomenon known as aliasing.  At a given resolution, the larger the screen is the more apparent the aliasing effect will be.  I don't know if the API implements any anti-aliasing techniques, or if that is up to the browser to handle, but if there is no anti-aliasing, the effect would be quite pronounced on large, low resolution screens.

...

[Nagendra Singh]

Hi,

I needed to know if the Google Visualization API will work with html5 too? There is nothing that I should change or should i change anything? 

--

[Andrew Gallant]

The Visualization API does not use HTML5 internally, but it should work fine in combination with other HTML5 elements.

...