We are developing a dashboard application with a lot of charts, using Highcharts Javascript library. And we are asked to draw some charts with spikeline. I am not sure what a spikeline in a chart is. Can someone shed some light?
As far as I understand the spike line reflects a line with highest values in a certain time span. On this page it is used to determine when is the best time to buy gas. There are graphics on the aforementioned page that may help you further.
Related
Hello,
I'm relatively new to the programming world and I was wondering how I would go about creating the following for a website I'm designing. I will use a random example as to not give my application away, but the process should be the same. I apologize ahead of time for the unrealistic values:
Say a civil engineer wants to come onto my website and figure out the mechanical stress at certain points on the Eiffel tower, lets say on the corner of the first/second observation deck (see Image). To make this more general, they want to vary values such as the height and base width of the tower to see how that affects the mechanical stress at those points.
Now, I can make the algorithm for calculating those stress values. My question is, how would a programmer go about creating this dynamic figure, such that the 'stress values' are shown on the image at distinct locations, and they change based off of the values of the user inputs + algorithm? My thoughts are the following:
Use HTML/CSS to place the images and design the webpage
Use JavaScript to take inputs, run the algorithm and calculate outputs. This would also make the dynamic changes on the image.
I have zero experience with JavaScript (I'm okay with HTML/CSS as I have built my own website before). I guess I'm hoping to be pointed in the right direction before I go off and start learning the wrong language for this application.
Bonus Challenge
While they're doing this, it would be nice to see a visual representation of the Eiffel tower change when the height and base area are changed. ie if you make the base way wider and the height much shorter, the bending in the midsection is going to be much more apparent. Obviously, this means I wouldn't be using a picture, but actually a vector-image model of the Eiffel tower that would change based off of the inputs. So what language and what libraries would one use to go about making this sort of things?
Thank you to anyone that can provide some insight on my issue. I really appreciate it!
Mike
Hello to integrate dynamic graph in a webpage there are two ways;
First you need to make your own graph library. For that you need to know SVG well to make a good looking graph.
Second, you can use any existing library. There are lot of open source libraries are there some of them are free to use also. To integrate graph using those libraries is not much difficult.
Some examples of graph generating library morris chart, c3.js etc. Google search 'll give you more detail idea.
As you said you have no idea about javascript so it will be a bit difficult at first for integrating graph. But 'll definitely much more easy to make your own graph library.
To give a background of what the user interface for the application I am creating does:
I am designing a sort of dashboard for a list of people who clocked into work on a particular day. The basic design is the names of people will be on slices of a donut chart, when they clock into work on a day, their slice color will change from red to green indicating that they are in work today. The user of the dashboard will also be able to click or hover over one of the slices to have it expand and show more detailed information about the person (more text).
I have the back-end of my sample application ready to serve data to be displayed by a UI, but I am not sure how I should go about designing this. What I am asking is if there are any JavaScript frameworks that would make this easy to implemented. I already looked at a bunch of tools such as Google Charts, ,ChartJS, and D3.js, but that seems more focuses on displaying actual numerical data rather than textual which is what I am going for.
Any suggestion into frameworks or technologies would be appreciated, thank you.
You could consider using Raphael as charting library.
While D3 is much more powerfull, it comes with a a bit steeper learning curve. IMO using Raphael will get you quickly started.
I hope it helps
I settled on using Google Charts to draw the data from an auto-updating Google Sheet that draws from my Analytics account (the analytic API wasn't working out).
I've done quite a lot of reading, but I'm finding the query language reference to be a pain.
I've chosen to use the ChartWrapper.
https://jsfiddle.net/7xzv59kj/2/
// Visits
var wrap = new google.visualization.ChartWrapper();
wrap.setChartType('ColumnChart');
wrap.setDataSourceUrl('https://docs.google.com/spreadsheets/d/1jICOBDvZzRxEThcWqnpFmNLUqjVP81Zd9RTwpbG29cE/gviz/tq?sheet=Sheet2&range=Keywords-All_Time!B11:C12&headers=1&tq=');
wrap.setContainerId('visits-all-time');
wrap.draw();
}
I want the chart to display the labels for Users and Sessions on the H-Axis, and then the values on the V-Axis. Instead, the data gets all jumbled and confused. I don't know what parameters to specify and how to label them properly.
Spreadsheet located here.
https://docs.google.com/spreadsheets/d/1jICOBDvZzRxEThcWqnpFmNLUqjVP81Zd9RTwpbG29cE
I would like to draw the data from the sheet titled Keywords-All_Time from range B11:C12
The issue here was just my foggy brain - I took a break and came back to it yesterday to discover a couple issues:
wrap.setDataSourceUrl('https://docs.google.com/spreadsheets/d/1jICOBDvZzRxEThcWqnpFmNLUqjVP81Zd9RTwpbG29cE/gviz/tq?sheet=Sheet2&range=Keywords-All_Time!B11:C12&headers=1&tq=');
My URL specifies the sheet twice. I recall someone telling me to format the range with the sheet, but I suppose I never erased the other parameter.
My table had the axes the wrong way around. I reversed them and found everything worked well from there.
I abandoned the chart wrapper and decided to move on to that when I actually have a need for it. Here's the current jsfiddle with the code I'm working on now: https://jsfiddle.net/c11c9a0w/19/
This will be extremely helpful for anyone having trouble building a dynamic dashboard from a Google Sheet that has multiple graphs on a single page, so feel free to work off of this.
-Joel
Im trying to find any plugins, examples or related resources on how to built a Pareto Chart for an html page. I'd like to be able to built it out of html, style it w/ CSS and populate data via json. Im willing to build it out of scratch by using a combination of a line graph and bar graph, however want to be sure there isnt anything already out there for this.
Here is an example of the output i hope to produce
Based on my searches i can only seem to find How-To's, Examples, etc on how to build one in Excel, however nothing for the web.
Any ideas or suggestions are greatly appreciated.
Pareto charts come standard in quite a few JS charting libraries. Here's a demo of one in ZingChart.
You can view the docs for creating pareto charts here. I'm part of the ZingChart team, and you're welcome to reach out to us if you have any questions at support#zingchart.com.
I am not sure from your description whether you would like to build from scratch or if you want to use a charts package. Normally, I would avoid re-inventing the wheel, but I sometimes do a challenge to learn. Below are a few links to pre-made packages of javascript charts that can do pareto, found with a google search (javascript pareto chart -excel -matlab).
http://cyberpython.github.io/AwesomeChartJS/ is apache 2.0
one of the better paid-for versions is http://www.dundas.com/ but there are others.
Sorry that this is a list of links. I would like to be able to rattle off the method from my memory, but I do not do HTML charts as much as I would like to.
It seems some of the options aren't free and/or open source :(
For building from scratch, or at least basing on common libraries, d3 might be a good choice. I ran into a similar issue looking to generate histograms with a cumulative frequency line included in the chart, and to build my own based on some examples. I then investigated further for options for pareto charts and sorted histograms.
If you want to try it with d3, here's some examples to start from (they're not as pretty rendered like the other answers, but a charting/UI web developer can prettify it I'm sure):
a basic d3 pareto chart based off Excel example
a histogram-based pareto chart in d3 - at the time of this post, this d3 sample is incomplete
So basically I'm using the Highcharts JavaScript library to render a very simple line graph to my HTML5 page. The chart represents the volume of tweets I've crawled from Twitter.
So my question is for anyone who has a fair idea of what Highcharts is capable of. I know you're able to highlight a section of the chart and have it zoom in. Is it possible to have the chart recognize the start and end time I've highlighted and give it back to me.
I wanna be able to query my database and pull out all the tweets between the two times and render them to the page. Anyone any idea if that's feasible?
Yes it is possible, you can achieve it by catching afterSetExtremes function.
http://jsfiddle.net/JzEnV/
events:{
afterSetExtremes:function(){
alert(this.min);
alert(this.max);
}
}
If you would like to get dates, then you can use dateFormat()
http://api.highcharts.com/highcharts#Highcharts.dateFormat()