I am trying to use Apache Echarts in my application and stumbled upon how to display multi-year heat map using calendar co-ordinate system in ECharts. Please find the concept image below. Any help is deeply appreciated.
Multi Year Calendar Heatmap with ECharts
Thanks,
Raja
The Echarts component legend may contain multiple legend. Just make second at bottom, then capture click event on legend and change chart data by setOption.
Related
I would like to create a chart like the picture above using the Highcharts plugin in Vuejs.
I'd do some research but couldn't find anyway to make this type of heatmap chart.
I searched this questions with google and only got some answers for Highcharts or D3 graphs.
this demo is for Highcharts: http://jsfiddle.net/sJfuA/22/
Also, I found an example here: http://pentaho-bi-suite.blogspot.com/2014/08/dual-level-pie-chart-in-pentaho-cde.html, but I couldn't tweak the code to fit my purpose.
my use case
I create a pie chart with extension point options:
slice_innerRadiusEx: 50%
which is very similar to this demo: http://jsfiddle.net/make_dream/sugmyyto/, then I'm trying to put numbers in the center of of the pie(see previous demo, in the white area).
what I want
What I want is almost the same as this chart: http://bl.ocks.org/ckuijjer/6929969, but implement with the code snippet in the second jsfiddle demo.
I don't think that can be done via CCC configuration or extension points.
What people usually do is create a donut chart with a predefined empty space in the center, add a div on top of it and, e.g. using a text component, append whatever text you want in the center of the donut to that div.
The center text isn't really part of the donut, it's added by a separate component. Then it's a matter of crafting your CSS carefully to align the text with the center of the donut and not allow it to overflow its container.
I was wondering if some one could direct me how to test svg pie charts and graphs using protractor .
I have to read data on pie charts when hovered on it or read data on graphs when hovered to the data points .
The pie chart is very similar to following one except for the text data. CHeck 2D pie chart example: http://www.fusioncharts.com/charts/pie-doughnut-charts/
I get the data by xpath - though it's a bit different than normal. To get access to svg:
element(by.xpath('//*[name() = "svg"]//the rest of the path'))
How is it possible to replay the animation on a chart create with chart.js ?
Is there a specific function ? Or may I recall and reconstruct my chart ?
I'm not aware of how to do this within chart.js but if you provide code I maybe able to help further.
You could put your chart within a setInterval, if you create it outside the setInterval it will be shown on page load and then again within the setInterval and it will be repeated at the specified time.
Further information on setInterval is available here - http://www.w3schools.com/jsref/met_win_setinterval.asp.
I have a sliced pie chart.
I need to implement Click event on each slice to go other page.
Can any body tel me how to do this kind of clicks on the pie chart using dojo?
You should use actions for that. Read this article (linked from the official docs): http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/
As always you can look at the code for standard actions in dojox/charting/action2d.