For my job I need to reproduce this doughnut Chart for our website that is using Vue Js:
enter image description here
I already succeeded in creating the doughnut chart using this library (vue-chartjs) but I’m really struggling with completing the arcs elements with icon + the labels of each arc elements.
I want to know if it is possible to add in each arc element an icon + the label attached to this arc element as in the image I uploaded.
I already tried to do it with a html / js project but I only succeeded in rendering images in arc elements but It’s quite difficult to have a good render with images with different sizes etc..
My environment is the following :
Vue JS : 2.6.12
Vue-chartjs : 4.0.2
chart.js : 3.7.1
Any answer would be appreciated :D
Kind regards,
Calab.
Here is the doughnut Chart I want to reproduce :)
Related
Is there any way to build this kind of behavior in react native (any chart library)
here I attached a sample gif file
You can check this line chart module of react native svg charts. Do let me know if this helps :)
rn-svg-chart
Try react-native-gifted-charts
The above chart can be easily created using this library.
Here's a very similar chart explained in the library's official documentation. You need to scroll down to near bottom of the page to find this chart.
I'm new here.
I use the vueJS and vuetify framework for almost 1 year and the v-app-bar component bug since I updated all my dependencies.
My version of vue js : 2.6.11
My version of vuetify before the bug : 2.2.3
I took screenshots and modified them with paint. I highlighted the divs with a black fill and yellow border.
As shown in the following picture :
I have an app-bar upstairs,
a navigation-drawer under the app bar on the left side of the screen
a v-content under the app bar in the middle
picture before bug
So far, so good. Yesterday I updated my dependencies (which I will do more often now). Below is the update:
picture maj
My version of vuetify with the bug : 2.2.18
Then by relaunching the application, my bug appears.
The app bar is still on top - OK
The navigation-drawer does not take into account the app bar and is placed behind it and in top 0 - KO
The v-content has the same behaviour as the navigation-drawer - KO
All divs below the app-bar do not calculate the app-bar. But be careful, the weird thing is that this bug disappears when I refresh the page.
Look at the following image that shows the bug:
picture now bug
To better understand I have highlighted the divs above the app bar in the following image:
picture better now bug
What has changed in "vuetify" to have creating this bug?
I've tried to improve my architecture but I always find this bug.
EDIT
I found the version of vuetify when the bug appears : 2.2.5
FIXED
The problem was due to my architecture. Thanks to the community for the help.
How I create a custom chart like this
with Titanium's Alloy elements (xml, tss, js - no SVG or canvas)? Any suggestion?
One approach which worked for me was the using of a webview and Google Charts.
I stored my "skeleton html page" as local asset, and inside it I wrote the minimum necessary javascript to get the json (from the controller) and to draw the chart.
I didn't need to show data offline so I directly linked the online library but I'm almost sure it's possible to use it offline too.
https://developers.google.com/chart/
I'm new to using Animate CC and I have created a project that has to be used with an in house CMS.
However I have implemented the code into the system webpage and all, but I keep being hit with this error cjs.Bitmap is not a constructor from the chrome console.
I am using the create.JS library but I am not sure how to solve the issue. I dont really dabble much in JavaScript as much since I am a designer is there anyone that can help?
===Update===
I have managed to remove the console errors but I am now having issues where the animation does not show at all when the page loads.
===Update 2===
So I figured out that the JS which has been generated by Animate CC does link the height and width directly to the canvas tag which also has the in-line height and width.
This sounds like the EaselJS library is not loaded. The Bitmap class is part of EaselJS, and the library exported from Flash/Animate requires EaselJS to be loaded before the library file.
So I figured out that the JS which has been generated by Animate CC does link the height and width directly to the canvas tag which also has the in-line height and width.
I am using highcharts and am having issues with the functionality with internet explorer 10.01.
For polar charts the series do not load until you roll the mouse over the chart. If you have a series that is an area (filled), you need to turn the series off then on again before it displays.(version 2.3.5 does not fix this issue)
Saving the presented image from the icon with the chart does not render correctly. You can it is a radar chart, but cannot make out any of the values, or colours. They tend to be grey. (version 2.3.5 fixes this issue)
Are these issues known?
Is there a solution to these issues/work around? Has it something to do with SVG? Could I force it to use VML?
Is there a planned fix for these?
This is now a recognised as an issue by highcharts and it will be fixed in due course
https://github.com/highslide-software/highcharts.com/issues/1499
Update:
A hack workaround in the meantime, is to hide and show a single series on the chart after you have rendered in, in JavaScript
if(chart.series.length>0)
{
chart.series[0].hide();
chart.series[0].show();
}
Use Version 2.3.5 it has fixed IE10 support.