Navigation
Charts from DataLog files directly used in webserver
Created by: lazik at: 11/30/2012 11:21 AM (9 Replies)
Rating 
Thanks 1
10 Entries
| 3/27/2013 10:00 PM | |
|
Posts: 51 Rating:
|
Hello, I am trying to do the same thing as you. Is it possible to get the sample project how you did this, Best regards |
| 4/29/2013 9:12 AM | |
|
Posts: 21 Rating:
|
Here WWW example that use AmCharts (its free with commercials):http://www.amcharts.com/javascript-charts/line-with-multiple-value-axes/ [code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Trendy</title> <link rel="stylesheet" href="style.css" type="text/css"> <script src="javascript/amcharts.jss" type="text/javascript"></script> <script type="text/javascript"> var chart; var dataProvider; window.onload = function() { createChart(); loadCSV("http://192.168.100.51/DataLog.html?FileName=W8501KM.csv"); } function loadCSV(file) { if (window.XMLHttpRequest) { var request = new XMLHttpRequest(); } else { var request = new ActiveXObject('Microsoft.XMLHTTP'); } request.open('GET', file, false); request.send(); parseCSV(request.responseText); } function parseDate(dateString) { var dateArray = dateString.split("/"); var date = new Date(Number(dateArray[0]), Number(dateArray[2])-1, Number(dateArray[1]), Number(dateArray[3]), Number(dateArray[4]), Number(dateArray[5])); return date; } function parseCSV(data){ data = data.replace (/\r\n/g, "\n"); data = data.replace (/\r/g, "\n"); var rows = data.split("\n"); dataProvider = []; for (var i = 1; i < rows.length; i++){ if (rows[i]) { var column = rows[i].split(","); var id = column[0]; var date = parseDate(column[1].split('/')[2]+"/"+column[1].split('/')[1]+"/"+column[1].split('/')[0]+"/"+column[2].split(':')[0]+"/"+column[2].split(':')[1]+"/"+column[2].split(':')[2]); var value3 = column[4]; var value4 = column[10]; var dataObject = {id:id, date:date, value3:value3, value4:value4}; dataProvider.push(dataObject); } } chart.dataProvider = dataProvider; chart.dataProvider.sort(function(a, b){ return a.id-b.id }) chart.validateData(); } function createChart(){ chart = new AmCharts.AmSerialChart(); chart.pathToImages = "images/"; chart.zoomOutButton = { backgroundColor: '#000000', backgroundAlpha: 0.15 }; chart.categoryField = "date"; chart.addListener("dataUpdated", zoomChart); // length of the animation chart.startDuration = 2; AmCharts.dayNames = ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Niedziela']; AmCharts.monthNames = ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień']; AmCharts.shortDayNames = ['Nie', 'Pon', 'Wto', 'Śro', 'Czw', 'Pią', 'Sob']; AmCharts.shortMonthNames = ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru']; var categoryAxis = chart.categoryAxis; categoryAxis.dashLength = 2; categoryAxis.gridAlpha = 0.15; categoryAxis.axisColor = "#DADADA"; categoryAxis.parseDates = true; categoryAxis.equalSpacing = false; categoryAxis.minPeriod = "ss"; var valueAxis1 = new AmCharts.ValueAxis(); valueAxis1.axisColor = "#FF6600"; valueAxis1.axisThickness = 2; valueAxis1.gridAlpha = 0; valueAxis1.unit = "°C"; chart.addValueAxis(valueAxis1); var graph1 = new AmCharts.AmGraph(); graph1.valueAxis = valueAxis1; graph1.title = "2TT01"; graph1.valueField = "value3"; graph1.bullet = "round"; graph1.hideBulletsCount = 30; graph1.includeInMinMax = true; chart.addGraph(graph1); var valueAxis2 = new AmCharts.ValueAxis(); valueAxis2.position = "right"; valueAxis2.axisColor = "#FCD202"; valueAxis2.gridAlpha = 0; valueAxis2.axisThickness = 2; valueAxis2.unit = "%" chart.addValueAxis(valueAxis2); var graph2 = new AmCharts.AmGraph(); graph2.valueAxis = valueAxis2; graph2.title = "2HT01"; graph2.valueField = "value4"; graph2.bullet = "square"; graph2.hideBulletsCount = 30; chart.addGraph(graph2); var chartCursor = new AmCharts.ChartCursor(); chartCursor.cursorPosition = "mouse"; chartCursor.categoryBalloonDateFormat = "DD MMM YYYY"; chart.addChartCursor(chartCursor); var chartScrollbar = new AmCharts.ChartScrollbar(); chart.addChartScrollbar(chartScrollbar); var legend = new AmCharts.AmLegend(); legend.marginLeft = 110; chart.addLegend(legend); chart.write('chartdiv'); } function zoomChart() { chart.zoomToIndexes(10, 20); } </script> </head> <body> <div id="chartdiv" style="width: 100%; height: 400px;"></div> </body> </html> [/code]
|
| 4/30/2013 12:24 PM | |
|
Posts: 19 Rating:
|
Thanks, this is great. |
| 5/4/2013 6:58 AM | |
|
Posts: 51 Rating:
|
Hello, thank you lazik. I pasted this code to my html editor and tryed it, but it is not working. Can you please attach a .html file of this code? Best regards |
Follow us on