Can I create calendar heatmap using highchart plugin on vuejs - vue.js

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.

Related

Calendar heatmap with Years as legend/visual map using Apache ECharts

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.

Create Grids with Dynamic Columns and Data Types( Vue.Js)

I want to create a Grid with column and data-field information that is retrieved during run time in Kendo Vue UI
just like demo here
http://dojo.telerik.com/OkuRe
but in Vue
thanks
i m developer working on kendo vue js
Here is a simple where a similar scenario is implemented - https://stackblitz.com/edit/2v8gaj-1azrrk?file=index.js.
You could also check and example with the brand new Native Kendo Grid that was just released where dynamic columns are an easy task- https://stackblitz.com/edit/wanzoc?file=index.js .
Greetings,
Plamen

Vue ChartKick Donut custom cutoutPercentage

I'm starting to learn vue but I can't figure out how to customize a Chart with vue chartkick. What I want to do is to pass default options to change the default style of the charts, let's say I want a different cutoutPercentage, with Charts.js we can set:
Chart.defaults.doughnut.cutoutPercentage = 10;
But this doesn't seem to work with chartkick, I created this Pen to play around but I cannot figured it out, any ideas?
chart kick allows you to pass the library options to the chart, using :library
<pie-chart :data="[['Blueberry', 44], ['Strawberry', 23]]" :donut="true" :library="{cutoutPercentage: 20}"></pie-chart>
https://codepen.io/BoyWithSilverWings/pen/YadXNO

How to test svg pie charts and graphs using protractor?

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'))

Click even on pie chart using dojo

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.