<\/p>\n
Display Graph on Website(Raspberry Pi)<\/h1>\n
[\/et_pb_code][et_pb_code admin_label=”Description” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”] Start<\/a>[\/et_pb_code][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_image src=”https:\/\/www.phidgets.com\/education\/wp-content\/uploads\/2021\/07\/pi_website_graph_title.jpg” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ use_custom_gutter=”on” gutter_width=”3″ specialty=”on” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”][et_pb_column type=”1_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_code admin_label=”ph-vertical-nav” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” saved_tabs=”all” global_colors_info=”{}”]<\/p>\n [\/et_pb_code][\/et_pb_column][et_pb_column type=”3_4″ specialty_columns=”3″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_row_inner module_id=”setup” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”][et_pb_column_inner saved_specialty_column_type=”3_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_code admin_label=”Setup” module_id=”setup” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]<\/p>\n <\/div>\n <\/p>\n <\/div>\n <\/div>\n <\/p>\n <\/div>\n [\/et_pb_code][\/et_pb_column_inner][et_pb_column_inner type=”1_3″ saved_specialty_column_type=”3_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_code admin_label=”Part: Pi” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” saved_tabs=”all” global_colors_info=”{}”]<\/p>\n <\/div>\n <\/p>\n <\/div>\n <\/div>\n <\/p>\n <\/div>\n [\/et_pb_code][\/et_pb_column_inner][et_pb_column_inner type=”1_3″ saved_specialty_column_type=”3_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner column_structure=”1_2,1_2″ admin_label=”Row” _builder_version=”4.16″ global_colors_info=”{}”][et_pb_column_inner type=”1_2″ saved_specialty_column_type=”3_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][\/et_pb_column_inner][et_pb_column_inner type=”1_2″ saved_specialty_column_type=”3_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner column_structure=”1_2,1_2″ admin_label=”Row” _builder_version=”4.16″ global_colors_info=”{}”][et_pb_column_inner type=”1_2″ saved_specialty_column_type=”3_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_code admin_label=”Step 1″ _builder_version=”4.19.2″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” locked=”off” global_colors_info=”{}”]<\/p>\n <\/p>\n <\/ol>\n [\/et_pb_code][et_pb_code admin_label=”Code Sample” _builder_version=”4.19.2″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ hover_enabled=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}” sticky_enabled=”0″]<\/p>\n [\/et_pb_code][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner module_id=”next” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”][et_pb_column_inner saved_specialty_column_type=”3_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_code disabled_on=”on|on|on” admin_label=”Practice” _builder_version=”4.19.2″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” disabled=”on” global_colors_info=”{}”]<\/p>\n <\/p>\n <\/ul>\n [\/et_pb_code][et_pb_video src=”https:\/\/www.phidgets.com\/education\/wp-content\/uploads\/2021\/07\/website_pi_graph_live.mp4″ disabled_on=”on|on|on” _builder_version=”4.19.2″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ width=”75%” module_alignment=”center” z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” disabled=”on” global_colors_info=”{}”][\/et_pb_video][et_pb_code disabled_on=”off|off|off” admin_label=”Practice” _builder_version=”4.19.2″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]<\/p>\n <\/p>\n <\/ul>\n [\/et_pb_code][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner disabled_on=”on|on|on” module_id=”troubleshoot” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” disabled=”on” global_colors_info=”{}”][et_pb_column_inner saved_specialty_column_type=”3_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_toggle title=”Troubleshoot” admin_label=”Troubleshoot” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ title_text_shadow_horizontal_length_tablet=”0px” title_text_shadow_vertical_length_tablet=”0px” title_text_shadow_blur_strength_tablet=”1px” closed_title_text_shadow_horizontal_length_tablet=”0px” closed_title_text_shadow_vertical_length_tablet=”0px” closed_title_text_shadow_blur_strength_tablet=”1px” body_text_shadow_horizontal_length_tablet=”0px” body_text_shadow_vertical_length_tablet=”0px” body_text_shadow_blur_strength_tablet=”1px” body_link_text_shadow_horizontal_length_tablet=”0px” body_link_text_shadow_vertical_length_tablet=”0px” body_link_text_shadow_blur_strength_tablet=”1px” body_ul_text_shadow_horizontal_length_tablet=”0px” body_ul_text_shadow_vertical_length_tablet=”0px” body_ul_text_shadow_blur_strength_tablet=”1px” body_ol_text_shadow_horizontal_length_tablet=”0px” body_ol_text_shadow_vertical_length_tablet=”0px” body_ol_text_shadow_blur_strength_tablet=”1px” body_quote_text_shadow_horizontal_length_tablet=”0px” body_quote_text_shadow_vertical_length_tablet=”0px” body_quote_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” text_shadow_horizontal_length_tablet=”0px” text_shadow_vertical_length_tablet=”0px” text_shadow_blur_strength_tablet=”1px” global_colors_info=”{}”]<\/p>\n If these do not solve your issue visit the Advanced Troubleshooting Page<\/a>.<\/p>\n [\/et_pb_toggle][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner admin_label=”Row” _builder_version=”4.16″ global_colors_info=”{}”][et_pb_column_inner saved_specialty_column_type=”3_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_code admin_label=”ph-button-cta: Back to Projects” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”] <\/p>\nSetup<\/h2>\n
Getting Started Kit<\/h3>\n
![](\"\/education\/wp-content\/uploads\/2022\/08\/KIT4003_2_Square.jpg\")
<\/div>\nAny Raspberry Pi<\/h3>\n
![](\"\/education\/wp-content\/uploads\/2021\/03\/pi_logo2.png\"){kind=logo}
<\/div>\nStep 1<\/h3>\n
Review<\/h2>\n
<\/p>\n
Creating a Graph for Your Website<\/h2>\n
Modify Your Website<\/h2>\n
<!doctype html><html lang=\"en\"><head> <meta charset=\"utf-8\">\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/vis\/4.21.0\/vis.min.js\"><\/script>\t<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/vis\/4.21.0\/vis.min.css\" rel=\"stylesheet\" type=\"text\/css\"> <title>Phidgets<\/title><\/head><script> function connectPhidgets(){ fetch('data.csv') .then(response => response.text()) .then(text => { var data = text.split(\"\\n\"); document.getElementById(\"dataLabel\").innerHTML = data[data.length - 1] + \"\u00b0C\"; var options = {\t\t\t\tlegend: true,\t\t\t\twidth: '75%'\t\t\t}; var groups = new vis.DataSet();\t\t\t\tgroups.add({\t\t\t\t\tid:0,\t\t\t\t\tcontent: \"Temperature (\u00b0C)\"\t\t\t\t});\t\t\t\tvar container = document.getElementById('dataGraph');\t\t\t\tvar wdata = [];\t\t\t\tvar i = 0\t\t\t\tfor (var d in data) {\t\t\t\t\twdata.push({ x: i, y: parseFloat(data[d]), group: 0});\t\t\t\t\ti += 1;\t\t\t\t}\t\t\t\tvar dataset = new vis.DataSet();\t\t\t\tdataset.add(wdata);\t\t\t\tgraph = new vis.Graph2d(container, dataset, groups, options); }) }<\/script> <body onload=\"connectPhidgets()\"> <div> <h1>Phidget Data<\/h1> <h2 id=\"dataLabel\">?<\/h2> <div id=\"dataGraph\"> <\/div> <\/body><\/html> <\/code><\/pre>\n
<!doctype html><html lang=\"en\"> <head> <meta charset=\"utf-8\"> <script src='https:\/\/cdn.plot.ly\/plotly-2.14.0.min.js'><\/script> <title>Phidgets<\/title> <\/head> <script> \/\/This is where you will store your temperature data var temperature_trace = { x: [], y: [], mode: 'lines+markers' }; function connectPhidgets(){ temperature_trace.x = [] \/\/reset data temperature_trace.y = [] \/\/reset data temperatureData = 0 \/\/reset data fetch('data.csv') .then(response => response.text()) .then(text => { let data = text.split(\"\\n\"); \/\/Get Data\t\t\t\t for (let i = 1; i < data.length - 1; i += 1) { temperatureData = data[i].split(\",\"); temperature_trace.y.push(temperatureData[0]) \/\/If you have multiple columns, use [1],[2], etc. to access them temperature_trace.x.push(i) } document.getElementById(\"dataLabel\").innerHTML = temperatureData[0] + \"\u00b0C\"; \/\/display last data point \/\/Plot data var plotly_data = [temperature_trace]; var layout = { title: 'Temperature Data', xaxis: { title: 'Num Points' }, yaxis: { title: 'Degrees Celsius' } }; Plotly.newPlot('dataGraph', plotly_data, layout); }) } <\/script> <body onload=\"connectPhidgets()\"> <div> <h1>Phidget Data<\/h1> <h2 id=\"dataLabel\">?<\/h2> <div id=\"dataGraph\"> <\/div> <\/body> <\/html> <\/code><\/pre>\nPractice<\/h2>\n
<\/p>\n
Practice<\/h2>\n
<\/p>\n
\n