Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.
Solved
Adding Chart to Web Page
Posted on 2012-12-29
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
The fields in the table are called exercise_id, exercise_time and exercise_timestamp.
Thanks for the help,
D
[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
4-
4
- +2
11 Comments
I've used JPGraph with very good success. http://jpgraph.net/
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
http://phpchart.net/
http://www.rgraph.net/ (HTML5)
http://www.maani.us/charts/index.php (FLASH)
https://developers.google.com/chart/?hl=pt-PT
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:
I pull data from SQL server, populate into an array and send the array to a Google API to produce this chart:
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
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
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
exercise_id (ai)
exercise_duration (int in minutes)
exercise_timestamp
user_id
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.
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>
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.
Featured Post
A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Originally, this post was published on Monitis Blog, you can check it
here
.
Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
- Web Development
- Web Applications
- HTML
- Magento
- Web Development Software
- Monitis, Networking, *Hosting, *Monitoring tool, *Monitoring Software
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5.
Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5.
As we learned in our last micr…
Suggested Courses
Course of the Month7 days, 13 hours left to enroll
715 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.