I've created a simple Flask app that has a Chart.js bar chart and a data table below it. See below:
(Live view:https://flaskapp.gullp.repl.co/)
My particular bar chart counts the number of items for each label.
My question: how would I go about making an onclick chart.js event that updates the table below the chart?
So for example, if I clicked the first bar in the chart, the table below it would be updated to show all the data for just that first bar.
Also, my table is a Pandas dataframe which I propagate into flask.
Code Base: https://repl.it/join/rbkobiqi-gullp
My intuition tells me, if some how I can pass the label back to the dataframe as a filter that should work.
Not sure how to approach this.
You can get the value from the bar in the way as described in this thread: Chart.js: Bar Chart Click Events
After you get the value you can use javascript to add it to your table
Related
I need to be able user insert user comments on the chart dynamically way. It means, the user will view the chart and will decide to make a comment on the chart or not.
P.S.: The user could make one or more comments anywhere on the chart.
I'm using Highcharts JS with ReactJS.
And I saw this functionality in Highcharts Stock and would like to know if it's possible to make it with Highcharts JS.
I am using highcharts for charts. I have enabled the export feature and it has one option view data table. When you click on it shows a data table below the chart. The problem I am facing is that if I select a particular value from the Range selector the view data table still shows a complete dataset. The range selector has no effect on it.
How can I only display data that is given upon selecting a particular range selector value?
For example, if I have selected data for the last minutes and the chart is showing data for the 10 mins the data table should also show data for the last 10 mins, It should not display the entire dataset.
I think that this feature is not implemented in the Highstock. The data table takes all data by default, but the option which you want to have will be a really nice functionality. Could you report this idea on the Highcharts Github issue channel as a feature request?
Link: https://github.com/highcharts/highcharts/issues
my problem I have an highcharts graph type column with drilldown values and I want to add dynamically another series of data with drilldown values
can anyone help me with this problem ??
Just Make data in your back end language and convert into JSON then update chart either by using ajax or on page load.
i have got a stacked bar chart using Google charts.
i need to display values within each bar, the role: annotation option displays the values at the edge of each section, i need to display the value in the middle of each option. i know i could use chm or chd, but i don't know where to put those options within java-script.
i have looked at the google documentation and it talks about the 'Text and Data Value Markers chm' but doesnt give an example how to use these markers within javascript.
chm= N,FF0000,-1,,12| N,000000,0,,12,,c| N,000000,1,,12,,c| N,ffffff,2,,12,,c
I am using jqPlot to show candlestick chart and the data is from XML.
I retrieve data from XML and put it into an array and then jqPlot creates a candlestick chart from that.
But the XML file contains lots of data so in the chart values are overlapping (with fixed width).
Is it possible to make a graph of lets say 10% of data and place a scrollbar and on every tick of scrollbar we rebuild graph with next data or there already exists such functionality of scrolling of graph/chart in jqPlot.
Please help me to resolve this.
Perhaps you can try Jonathan Cook's jqplot.annotatedTimeline.js available from the following URL:
https://bitbucket.org/j5bot/jqplot/downloads
You can see its features in action from:
http://screencast.com/t/mHY5eUV99XaT
Although I haven't tried this plugin yet it looks very good!
Its better to load XML at once, but not give the data at once to that jqPlot chart. Just make sure you are passing part of the data to jqPlot. Once you assign data to chart then go for the scrolling of data using jQuery or something like scroller code.
Whenever you scroll on this try to refresh or regenrate the chart by only the selected data.