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()
Related
I am trying to decorate a chart using Apache ECharts dynamic data.
(https://echarts.apache.org/examples/en/editor.html?c=dynamic-data)
I want the updated data to flow naturally, not simply delete and add (shift and push).
Similar plugins exist for chart.js.
(chartjs-plugin-streaming)
Is there any way to get the same result in ECharts?
I'm still in the technical review phase, only testing through the demo site. I would like to see if the technology is feasible and if possible, I would like to obtain a sample.
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
Recently I got a requirement where
I have a certain amount of time series data, I need to show the data on a chart on a web page.
(I know this can be done easily since there is Highcharts, Google charts, etc)
However, a more complicated feature request came up. I need to be able to annotate one or more data points on the chart, and annotate them as - say Test Run 1, and maybe another series of data points at Test Run 2. (You can think of it as maybe someone is playing around with a hardware, the first time he collected a set of data, and the second time he collected another a set of data. I want to be able to annotate and diffenrentiate those data sets on the chart)
I will need to preserve those segmentations/groupings and save them in a persistent store, so that next time I load the chart, I can show those grouping again on the chart.
Does anyone know what is the best way to do this? Or are there existing features of any Javascript UI framework that's already capable of doing it?
Thanks so much.
I'm using the wonderful Highcharts, and I was wondering if there was a config option to change the data periodicity of a time series.
Like the chart on this page - letting you switch from monthly to quarterly to yearly intervals.
I can add client-side code to do it if not, but since Highcharts is so powerful, I just wondered if it was a built-in option.
I can't see anything in the docs, but I'm not sure if "periodicity" is the right word for what I need!
Here's the answer (found via #SebastianBochan).
You have to use Highstock for an inbuilt option. Highstock documentation here.
Otherwise you can roll your own interactions to calculate new data groupings and then call setData to set the new data.
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.