Solved

Adding Chart to Web Page

Posted on 2012-12-29

1 solution

305 Views

Last Modified: 2013-01-22

We have a MYSQL/PHP database and want to add a chart to the web[age that shows the total amount of exercise per day over a period of time. Is there a nice chart plugin we could use for this?

The fields in the table are called exercise_id, exercise_time and exercise_timestamp.

Thanks for the help,

D

Comment

Question by:TLN_CANADA

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

11 Comments

LVL 29

Expert Comment

by:IrogSinta

ID: 387301792012-12-29

Check out these links:
http://www.maani.us/xml_charts/
http://naku.dohcrew.com/libchart/pages/introduction/
http://teethgrinder.co.uk/open-flash-chart-2/tutorial.php
http://pchart.sourceforge.net/index.php

LVL 110

Expert Comment

by:Ray Paseur

ID: 387307082012-12-30

I've used JPGraph with very good success. http://jpgraph.net/

LVL 9

Expert Comment

by:abolinhas

ID: 387311172012-12-30

Check out this plugins
http://phpchart.net/
http://www.rgraph.net/ (HTML5)
http://www.maani.us/charts/index.php (FLASH)
https://developers.google.com/chart/?hl=pt-PT

LVL 7

Expert Comment

by:dimmergeek

ID: 387560212013-01-08

Google charts is very easy to work with and produces customizable charts that blend seamlessly with your existing pages.
I pull data from SQL server, populate into an array and send the array to a Google API to produce this chart:

Author Comment

by:TLN_CANADA

ID: 387577952013-01-08

Thanks everyone,

I'm looking to make a simple chart that shows a person's exercise practice over time. User's can track their exercise times in minutes in the database. I would like to setup a simple line chart that shows on the vertical axis the minutes they exercised and on the horizontal axis the month of the year. If the chart could automatically resize to the amount of user data in the database that would be ideal. (E.g. if they have only exercised for one month it would show each day in details whereas if they have a year's worth of data it would show the data in months on the horizontal access). Could anyone provide a simple example of this? I have tried to do this myself using 3 of the programs suggest above (Float Chart, Google Charts and PHPChart) but as I'm not a seasoned PHP developer I'm finding it difficult to set it up.

Thanks for your help,

D

Author Comment

by:TLN_CANADA

ID: 387577982013-01-08

If it helps, our database table is called exercise_table and the fields are:

exercise_id (ai)
exercise_duration (int in minutes)
exercise_timestamp
user_id

Author Comment

by:TLN_CANADA

ID: 387578012013-01-08

I can get all the necessary information from the database, I just can't figure out how to link it with the charts and the best chart system to use so that the view is automatically adjusted based on the amount of content for that user.

LVL 7

Accepted Solution

by:dimmergeek

dimmergeek earned 500 total points

ID: 387743622013-01-14

Here is the classic ASP page I used to generate the line chart above with GOogle API. ALl you need to do is get the data from your database, populate your chart fields into an array and call the API.

<body>
    <%
        dim fso, rsCount, rsTally, i, arrSize, arrDate(), arrCount(), arrTally(), arrPercent(), chartData
        
        ' Create the ADO connection object
        set fso = CreateObject("ADODB.Connection")
        
        ' Create the recordsets
        set rsCount = Server.CreateObject("ADODB.Recordset")
        set rsTally = Server.CreateObject("ADODB.Recordset")
        
        ' Open the database
        fso.Open "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" & Server.MapPath("../../../../BR/LEAN/personalizationMetrics.mdb") & ";Persist Security Info=False;"
        
        mSQL = "SELECT entryDate, SUM([qty]) AS [SUM OF KEYPADS] FROM dataTable WHERE DateDiff('d', entryDate, Now()) <=30 AND (reqType = 0 OR reqType = 1) GROUP BY entryDate ORDER BY entryDate ASC;"
        rsCount.Open mSQL, fso, 1, 1
        arrSize = rsCount.RecordCount
        rsCount.MoveFirst
        ReDim arrDate(arrSize)
        ReDim arrCount(arrSize)
        ReDim arrTally(arrSize)
        ReDim arrPercent(arrSize)
        ctr=0
        Do While Not rsCount.eof
            If Not rsCount.eof Then
                arrDate(ctr) = rsCount("entryDate")
                arrCount(ctr) = rsCount("SUM OF KEYPADS")
                ctr = ctr+1
            End If
            rsCount.MoveNext
        Loop
        
        mSQL = "SELECT entryDate, SUM([qty]) AS [SUM OF KEYPADS] FROM dataTable WHERE DateDiff('d', entryDate, Now()) <=30 AND (reqType = 0 OR reqType = 1) AND velocity = 0 GROUP BY entryDate ORDER BY entryDate ASC;"
        rsTally.Open mSQL, fso, 1, 1
        arrSize = rsTally.RecordCount
        rsTally.MoveFirst
        ctr=0
        Do While Not rsTally.eof
            If Not rsTally.eof Then
                arrTally(ctr) = rsTally("SUM OF KEYPADS")
                'Response.Write(ctr & ") " & arrDate(ctr) & ", " & arrCount(ctr) & ", " & arrTally(ctr) & "<br />")
                ctr= ctr+1
            End If
            rsTally.MoveNext
        Loop
        
        'Response.Write("<br /><br /><br />")
        
        ctr=0
        Do While ctr < arrSize
            arrPercent(ctr) = FormatNumber(eval((arrTally(ctr)/arrCount(ctr))*100),0)
            'Response.Write(ctr & ") " & arrDate(ctr) & ", " & arrPercent(ctr) & "<br />")
            chartData = chartData & ",['"&arrDate(ctr)&"', 100, "&arrPercent(ctr)&"]"
            ctr= ctr+1
        Loop
    %>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] }); google.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = google.visualization.arrayToDataTable([
            ['Date', 'Goal', 'Actual']
            <%=chartData%>
            ]);
            var options = {colors: ['#A90000','#028837'], title: 'Percentage of Orders Entered within 24 Hours', curveType: 'function', titleTextStyle: {fontSize: 24}, backgroundColor: '#F0F0F0', legend: 'bottom', hAxis: {slantedTextAngle: 90}, vAxis: {viewWindowMode:'explicit', viewWindow:{ max:110, min:0}}};
            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data,options);
        }
    </script>
    
    <!--Div that will hold the chart-->    
    <center>
        <div id="chart_div" style="width: 1000px; height: 600px;"></div>
    </center>
</body>

Open in new window

Author Comment

by:TLN_CANADA

ID: 387996982013-01-20

Hi dimmergeek, we are using PHP/MYSQL. Will this work in the example you presented also?

LVL 7

Expert Comment

by:dimmergeek

ID: 388011742013-01-21

Yes, the data source does not matter. Once you have your data, you just build an array table with it and then call the API.

LVL 7

Expert Comment

by:dimmergeek

ID: 388055522013-01-22

Thanks for the points and good luck!

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PHP Error Handling: Never Say die() Again

Article by: Ray

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html). It addresses one of the most common problems that plague beginning PHP develop…

How to Become a Web Developer

Article by: Ryan

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?

Introduction to CSS (Part 1)

Video by: Jason

The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

Introduction to jQuery (Part 1)

Video by: Jason

The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)