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?
On Fri, Jul 11, 2014 at 7:12 PM, Andrew Gallant <[email protected]> wrote: > 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. > > > On Friday, July 11, 2014 1:48:08 AM UTC-4, Nagendra Singh wrote: > >> 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 >> <http://www.springframework.org/tags>" prefix="spring"%>* >> *<%@taglib uri="http://www.springframework.org/tags/form >> <http://www.springframework.org/tags/form>" prefix="sf"%>* >> *<%@taglib uri="http://java.sun.com/jsp/jstl/core >> <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 >> <http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css>">* >> * <script type="text/javascript" src="https://www.google.com/jsapi >> <https://www.google.com/jsapi>"></script>* >> * <script >> src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js >> <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 >> <http://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>* >> >> >> >> >> On Fri, Jul 11, 2014 at 9:06 AM, Nagendra Singh <[email protected]> >> wrote: >> >> Thanks Andrew. Its working fine. >> >> >> On Thu, Jul 10, 2014 at 7:31 PM, Andrew Gallant <[email protected]> >> wrote: >> >> 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; >> } >> >> On Thursday, July 10, 2014 6:38:19 AM UTC-4, Nagendra Singh wrote: >> >> 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]* >> * }* >> * }* >> * }* >> * });* >> >> >> On Thu, Jul 10, 2014 at 3:20 PM, Nagendra Singh <[email protected]> >> wrote: >> >> Thanks andrew I got that too. I just changed the control type as >> "DateRangeFilter" >> >> >> On Thu, Jul 10, 2014 at 3:01 PM, Nagendra Singh <[email protected]> >> wrote: >> >> All is ok . One Last query If i wanted to implement the DateRangeFilter >> then what should I do? >> >> >> On Thu, Jul 10, 2014 at 2:47 PM, Nagendra Singh <[email protected]> >> >> ... > > -- > 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 > [email protected]. > To post to this group, send email to > [email protected]. > Visit this group at > http://groups.google.com/group/google-visualization-api. > For more options, visit https://groups.google.com/d/optout. > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
