ragland_d
Today I worked on integrating the Javascript Amcharts with my own HTML and CSS.
This is necessary to create our own custom map of HPA with all our sensor data.
This is necessary to create our own custom map of HPA with all our sensor data.
I started by adding my own style.css file to the server.
Here is my base HTML, which contains about: information and the necessary Javascript libraries for the gauge widgets.
Here is my style sheet, which sets the colors, the margins, the decisions, and the uniform layout.
I also created this navigation style, for the header tittle.
Here is the combined HTML and CSS output:
I then coded out the body of the page, by adding <div id =""></div> containers wherever I wanted to place a graph.
This means that I can put these containers wherever I want, and instantiate them however I want, as they are now referenced by standard HTML code.
This means that I can put these containers wherever I want, and instantiate them however I want, as they are now referenced by standard HTML code.
I also added the corresponding CSS class to format the graph uniformly.
Here is our new base layout.
I then added in the Javascript code from the Amcharts live editor for the graph that I made earlier, and put it at the bottom of my HTML.
I changed the id to match the div I created in the layout, so that the browser knows how to populate the field.
I changed the id to match the div I created in the layout, so that the browser knows how to populate the field.
This is what I have now:
I then played around with some of the code through the developer console, and I found the hidden code behind the amcharts Javascript.
After I populate a div feild, it is followed by > div.amcharts-main-div > div.amcharts-chart-div > svg > g > path, which step by step adds components of the graph together. This means that the <g> tags we were trying to understand earlier are handled completly by amcharts and all we have to do is create the initial <div>
I also did some research on SVGs.
I also did some research on SVGs.
Because salable vector graphics are coded by XML, they can be animated and manipulated through code.
I decided to create an SVG inside my update class.
I then created the appropriate CSS, and was able to control its scaling through that.
I then created the appropriate CSS, and was able to control its scaling through that.
Here is the output: a completely code-generated graphic that never loses resolution and can be altered on events inside the code.
I then looked into combining SVGs and images, so that we can overlay these HTML components onto the campus map image itself.
My next step is to find out how to link the mango data to this graph.
In addition, I emailed Joel about the ORU templates.
In addition, I emailed Joel about the ORU templates.
Comments