ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  drop_down_list so select different metrics
Posted by slaniwani on Feb-10-2011 15:56
| Reply | Monitor
Hi Guys,

I want to extend the "Zooming and Scrolling Demonstration" Script, that I could select different metrics from a dropdown button and update the chart.

I connect to a mySQL Database and I know the querys but how can I implement this into the ChartDirector for Python?

Is that correct that I make a list and when I select one of these elements, the query is beeing changed and when I click, for example on a "show" or "update chart" button, the selected data will be shown on the Graph.

How can I do that easily?

  Re: drop_down_list to select different metrics
Posted by slaniwani on Feb-10-2011 16:02
| Reply | Monitor
I should note, that the different data needs different y-axis labels as well.

Do I have to write scripts for every different metrics/data?

# Step 2 - Add data to chart
# Step 3 - Set up x-axis scale
# Step 4 - Set up y-axis scale

these steps are always different

  Re: drop_down_list to select different metrics
Posted by Peter Kwan on Feb-11-2011 01:39
| Reply | Monitor
Hi salniwani,

In the original "Zooming and Scrolling Demonstration" sample code, there are 6 drop down list boxes. When you click the "Update" button, the selection in these 6 boxes will be sent to the server in an AJAX request. On the server side, the chart is drawn depending on the user selection.

If you need an additional drop down list box, you can freely add it to the web page, and include it in the list of controls that will be passed to the server in the AJAX request. (Search for the "controlsToSync" in the sample code.)

On the server side, you can draw the chart depends on the settings of the drop down list boxes. You can use the same script or use different scripts for your charts. For example, suppose the y-axis titles are different for the various charts, you may use (in "pseudo code"):

#set up your parameters
if first chart is selected:
   y_title = "aaa"
elif second chart is selected:
   y_title = "qqq"
else:
   y_title = "dsd"

...

#
#the same charting code for all the charts
#
c.yAxis().setTitle(y_title)


In my opinion, if the charts are only different by a few parameters, you may use the same charting code, and just change the parameters. On the other hand, if the charts are entirely different (different by hundreds of parameters), then it may be easier for you to write different subroutines for different charts.


Hope this can help.

Regards
Peter Kwan

  Re: drop_down_list to select different metrics
Posted by slaniwani on Feb-11-2011 16:21
| Reply | Monitor
thank you really much.

I came to a conclusion that its depending only on one mySQL query.
I added it this method : def drawChart(viewer) :

...and it looks like thats its only this query:

SQL_QUERY0=("Select ID from sbrppt.statistics_name WHERE name = 'name of statistic';")

    cursor = mySQLconnection.cursor()
    cursor.execute(SQL_QUERY0)
    for ID in cursor.fetchall():
      used_id = ID['ID']


I only have to change the name.
I parse this parameter to another query :


    SQL_QUERY1=("Select VALUE AS VALUE, unix_timestamp(collection_time) AS Coltime, collection_time AS strtime from sbrppt.stats_per_program, sbrppt.target_instance WHERE collection_time \\
    BETWEEN %s and %s \\
    AND statistics_name_id = %d AND \\
    sbrppt.stats_per_program.program_name = 'FOREGROUND' and target_instance_id = sbrppt.target_instance.id and sbrppt.target_instance.instance_name = 'SBRPPTAC' \\
    GROUP BY collection_time ORDER BY collection_time DESC;" % (startData, endData, used_id))

and draw the charts.

Maybe its possible to extend the first SQL_QUERY0 with storing the name of the used_id in another parameter as a string and parse this string to the yAxsis.label(___) ?

What do you think, is that a good solution?

  Re: drop_down_list to select different metrics
Posted by Peter Kwan on Feb-12-2011 06:45
| Reply | Monitor
Hi slaniwani,

Yes. You can store any variable things in variables and use the variables in your code. In this way, you do not have to write different code for the different cases.

Hope this can help.

Regards
Peter Kwan

  Re: drop_down_list to select different metrics
Posted by slaniwani on Feb-15-2011 16:21
| Reply | Monitor
Attachments:
Hi Peter, thanks for your help.

I have another question.

In the Image you see the boxes for month/day and the statistics boxes.
Now I have an additional problem with updating the chart.

def createstats_list(list, selectedValue):
    ret = []
    for i in range(0, len(selected_list)):
        ret.append(selected_list[i][1])
    for i in range(0, len(ret)):
        if i == selectedValue :
            ret[i] = "<option value='%s' selected>%s</option>" % (ret[i],ret[i])
        else :
            ret[i] = "<option value ='%s'>%s</option>" % (ret[i],ret[i])
    return string.join(ret, "")


This is my method to create the option tags but the selected on isnt showing up.
I call it like that :

statisticsSelectOptions = createstats_list(selected_list, viewer.getCustomAttr("selectstatistics"))

And for any reason, If I want to change the statistics or the  date range first, I get a Error 500 accessing server....but when I first zoom into the chart and change the range/statistics after that its working. What is the problem?

My first chart looks like that :

def createFirstChart(viewer) :

    global startDate, endDate, viewPortStartDate, viewPortEndDate

    # Initialize the Javascript ChartViewer
    viewer.setMouseUsage(MouseUsageScroll)

    # In this demo, we allow scrolling the chart for the last 5 years
    (y, m, d, H, M, unused, unused, unused, unused) = time.localtime(time.time())
    endDate = chartTime(y, m, d, H, M)

    # We roll back 1 month for the start date. Note that if the end date is Feb 29 (leap year only
    # date), we need to change it to Feb 28 in the start year
    if (m == 2) and (d == 29) :
        d = 28
    startDate = chartTime(y , m - 1, d)

    # The initial selected date range is last 1 year
    viewPortStartDate = chartTime(y, m - 1, d)
    viewPortEndDate = endDate


    #list = getstats(selected_list)

    # We store the scroll range as custom Javascript ChartViewer attributes, so the range can be
    # retrieved later in partial or full update requests
    viewer.setCustomAttr("startDate", startDate)
    viewer.setCustomAttr("endDate", endDate)
    viewer.setCustomAttr("selectstatistics", "user commits")
    # In this demo, we set the maximum zoom-in to 10 min
    viewer.setZoomInWidthLimit(10 * 60 / (endDate - startDate))

    # Draw the chart
    drawChart(viewer)


def processPartialUpdate(viewer) :

    global startDate, endDate, viewPortStartDate, viewPortEndDate, selected_list

    # Retrieve the overall date range from custom Javascript ChartViewer attributes.
    startDate = float(viewer.getCustomAttr("startDate"))
    endDate = float(viewer.getCustomAttr("endDate"))

    # Now we need to determine the visible date range selected by the user. There are two
    # possibilities. The user may use the zoom/scroll features of the Javascript ChartViewer to
    # select the range, or s/he may use the start date / end date select boxes to select the date
    # range.

    if viewer.isViewPortChangedEvent() :
        # Is a view port change event from the Javascript ChartViewer, so we should get the selected
        # date range from the ChartViewer view port settings.
        duration = endDate - startDate
        viewPortStartDate = startDate + int(0.5 + viewer.getViewPortLeft() * duration)
        viewPortEndDate = viewPortStartDate + int(0.5 + viewer.getViewPortWidth() * duration)
    else :
        # The user has changed the selected range by using the start date / end date select boxes.
        # We need to retrieve the selected dates from those boxes. For partial updates, the select
        # box values are sent in as Javascript ChartViewer custom attributes.
        startYear = int(viewer.getCustomAttr("StartYear"))
        startMonth = int(viewer.getCustomAttr("StartMonth"))
        startDay = int(viewer.getCustomAttr("StartDay"))
        endYear = int(viewer.getCustomAttr("EndYear"))
        endMonth = int(viewer.getCustomAttr("EndMonth"))
        endDay = int(viewer.getCustomAttr("EndDay"))
        selectstatistics = viewer.getCustomAttr("selectstatistics")
        # Note that for browsers that do not support Javascript, there is no validation on the
        # client side. So it is possible for the day to exceed the valid range for a month (eg. Nov
        # 31, but Nov only has 30 days). So we set the date by adding the days difference to the 1
        # day of a month. For example, Nov 31 will be treated as Nov 1 + 30 days = Dec 1.
        viewPortStartDate = chartTime(startYear, startMonth, 1) + (startDay - 1) * 86400
        viewPortEndDate = chartTime(endYear, endMonth, 1) + (endDay - 1) * 86400

    # Draw the chart
    drawChart(viewer)

    #
    # We need to communicate the new start date / end date back to the select boxes on the browser
    # side.
    #

    # The getChartYMD function retrives the date as an 8 digit decimal number yyyymmdd.
    startYMD = getChartYMD(viewPortStartDate)
    endYMD = getChartYMD(viewPortEndDate)
    # Send year, month, day components to the start date / end date select boxes through Javascript
    # ChartViewer custom attributes.
    viewer.setCustomAttr("StartYear", int(startYMD / 10000))
    viewer.setCustomAttr("StartMonth", int(startYMD / 100) % 100)
    viewer.setCustomAttr("StartDay", startYMD % 100)
    viewer.setCustomAttr("EndYear", int(endYMD / 10000))
    viewer.setCustomAttr("EndMonth", int(endYMD / 100) % 100)
    viewer.setCustomAttr("EndDay", endYMD % 100)
    viewer.setCustomAttr("selectstatistics", "user commits" )

def processFullUpdate(viewer) :
    # A full chart update is essentially the same as a partial chart update. The main difference is
    # that in a full chart update, the start date / end date select boxes are in Form Post
    # variables, while in partial chart update, they are in Javascript ChartViewer custom
    # attributes.
    #
    # So a simple implementation of the full chart update is to copy the Form Post values to the
    # Javascript ChartViewer custom attributes, and then call the partial chart update.

    # Controls to copy
    ctrls = ["StartYear", "StartMonth", "StartDay", "EndYear", "EndMonth", "EndDay", "selectstatistics"]

    # Copy control values to Javascript ChartViewer custom attributes
    for i in range(0, len(ctrls)) :
        viewer.setCustomAttr(ctrls[i], query[ctrls[i]].value)

    # Now can use partial chart update
    processPartialUpdate(viewer)

#
Screen_01 Daniel.Lammering.jpg

  Re: drop_down_list to select different metrics
Posted by Peter Kwan on Feb-16-2011 10:46
| Reply | Monitor
Hi slaniwani,

To solve the problem, you would need to debug your code. For example, in your createstats_list, the "selected" option only occur if "i == selectedValue". You can check why this condition is never true in your code.

In case you are not familiar with how to debug code, one simple method is to print the variables in your code in somewhere you can see. For example, in your createstats_list, you can use

ret[i] = "<option value ='%s'>%s %s %s</option>" % (ret[i], i, selectedValue, ret[i])

Now you can see "i" and "selectedValue" in the drop down list box, and you can see why they cannot be equal.

In case you encounter any error, please check what is the error message. The error message can be displayed on the browser, but they can also be logged to an error log file or event log or somewhere else. Please refer to your web server documentation for details.

You can also trace your code by opening a log file yourself, and printing a log message to the log file. In this way, you can trace where your code stops working.

For the Error 500 you have encountered, one logical guess is that your update code may rely on something that is not created until after zooming.

For example, your update code relies on:

        startYear = int(viewer.getCustomAttr("StartYear"))
        startMonth = int(viewer.getCustomAttr("StartMonth"))
        startDay = int(viewer.getCustomAttr("StartDay"))
        endYear = int(viewer.getCustomAttr("EndYear"))
        endMonth = int(viewer.getCustomAttr("EndMonth"))
        endDay = int(viewer.getCustomAttr("EndDay"))

Are all of the above attributes exist in your code. Are they valid integers (so they can be cast to "int")? (These above variables are created automatically during zooming, but it is not obvious if your code has created them before zooming.)

Regards
Peter Kwan

  Re: drop_down_list to select different metrics
Posted by slaniwani on Feb-16-2011 20:00
| Reply | Monitor
HI Peter, thanks for your advice.

I fixed the error 500. Its because I removed the Year Options and the Charts couldn't handle it.

But one small bug is still there. Its the "option %s selected" problem while creating the first chart.

I have to hardcode the selected statistics for drawing the first chart:

def createFirstChart(viewer) :

    global startDate, endDate, viewPortStartDate, viewPortEndDate

    # Initialize the Javascript ChartViewer
    viewer.setMouseUsage(MouseUsageScroll)

    # In this demo, we allow scrolling the chart for the last 5 years
    (y, m, d, H, M, unused, unused, unused, unused) = time.localtime(time.time())
    endDate = chartTime(y, m, d, H, M)

    # We roll back 1 month for the start date. Note that if the end date is Feb 29 (leap year only
    # date), we need to change it to Feb 28 in the start year
    if (m == 2) and (d == 29) :
        d = 28
    startDate = chartTime(y , m - 1, d)

    # The initial selected date range is last 1 year
    viewPortStartDate = chartTime(y, m - 1, d)
    viewPortEndDate = endDate


    #list = getstats(selected_list)

    # We store the scroll range as custom Javascript ChartViewer attributes, so the range can be
    # retrieved later in partial or full update requests
    viewer.setCustomAttr("startDate", startDate)
    viewer.setCustomAttr("endDate", endDate)

--->    viewer.setCustomAttr("selectstatistics", "user commits")

    # In this demo, we set the maximum zoom-in to 10 min
    viewer.setZoomInWidthLimit(10 * 60 / (endDate - startDate))

    # Draw the chart
    drawChart(viewer)



After changing the selected metrics, the option is always being selected in the dropdown box.
But for any reason its not working when I call the script for the first time.
It always gives me the first entry but not the "user commits" which are selected for calling the script the fist time.

statisticsSelectOptions = createstats_list(selected_list, viewer.getCustomAttr("selectstatistics"))

Is it the same problem your wrote in your post above?
I have no idea.

Thanks
slaniwani

  Re: drop_down_list to select different metrics
Posted by slaniwani on Feb-16-2011 20:09
| Reply | Monitor
I am sooo f.... stupid.

I only had to change:

if i == selectedValue :

into

if ret[i] == selectedValue :


because the print of it looks like :

<option value ='user commits'>80 user commits user commits</option>


80 = i and the
string "user commits" = ret[i]


Thanks Peter.