score:0
ok i think i have it. a bit of explanation about what i am trying to achieve here:
this constructor is what is responsible for configuring and constructing your chart animation.
new chart(document.getelementbyid("skill-radar").getcontext("2d"))
.radar(radarchartdata,{
scaleshowlabels : true
, scaleoverride : true
, scalesteps : 10
, scalestepwidth : 10
, scalelinecolor : "rgba(250,250,250,.5)"
, anglelinecolor : "rgba(250,250,250,.3)"
, scalefontfamily : "'exo'"
, scalefontcolor : "#fff", scalefontsize : 10
, scalebackdropcolor : "rgba(0,0,0,0.75)"
, pointlabelfontfamily : "'exo'"
, pointlabelfontsize : 16
, pointlabelfontcolor : "#fff"
, animationeasing : "easeoutsine"
, animationsteps : 100
, pointlabelfontsize : 10});
each time you call the above your animation will be shown. we require a reference to function that can call it each time without having to type the cumbersome string above. javascript lets you do it by wrapping it in a function and creating a function expression like this:
var chartjsconstruct = function(){
//..your chart.js invocation with 'new' as shown above
};
now you can bind it to any action in your code to run the animation like this:
var skillslink = document.getelementbyid('ui-id-2'); // find the target to add behavior
// add behavior agnostic of browser
if (skillslink.addeventlistener){// for non-ie browsers
skillslink.addeventlistener('click', chartjsconstruct);
}else if(skillslink.attachevent){// for ie9 and below
skillslink.attachevent('onclick', chartjsconstruct);
}
this should reload the chart.js animation everytime you click on "skills" link. let me know how it goes
Source: stackoverflow.com
Related Query
- Chart.js animate chart after clicking a button
- VueJS + Chartjs - Chart only renders after code change
- In chart.js , change color of chart by clicking button
- How can i launch a modal after clicking each bar in Bar chart in Chartjs and also how can i get its data?
- Chart js - Get bar width after render
- Callback after line chart rendered
- React ChartJS 2 : Get data on clicking the chart
- Chart disappears just after finishing animation
- chart js with angular2 loading dynamic data only after zoomin
- Chart not rendering w/Chart.js on button click
- Chart Click Event - Clicking label of doughnut chart, doesn't return label ng2-charts
- using react-chartjs-2 , How can I save my chart as png using a download button
- Charts js and laravel: Render chart after passing in json data
- Chart.js Bar Chart with a switch/radio button to group data / Troubleshooting bar color
- Code doesn't work after updating chart.js versioning
- React - Display Chart when button is clicked
- ChartJS chart not scaling after adding values
- How to change color by clicking on the chart bar?
- How do i make a new chart by pressing a button (chart.js)?
- Update the chart data from an array stored in a variable on button click
- Problems hovering over ChartJS bar chart after being redrawn
- Chart.js - Pie chart calculate sum of visible values after legend click
- Strange "padding" at chart area after updating chart.js (2.8.0 -> 3.4.1)
- Printing a list by clicking chart Chart js + react
- Chart js custom separate legend returns error when clicking legend
- How to update a variable after button click
- Chart disappears, when pressing the submit button
- ChartJS 2 - Adding data to chart breaks after X number of items added
- Chartjs bar order adjustment after bar chart is drawn
- Merge 2 charts into 1 chart using update button (chart.js)
More Query from same tag
- Is it possible to merge duplicate labels (and their datas) into one column in Chart Js?
- Chart.js scatter axis titles
- PieChart disappears on mouseout
- Cannot visualise chartJS data in ASP .NET Core
- Unix Timestamp Chart.js with PHP echo
- Loading ViewBag data into a chart.js multichart
- zoom and pan on charts in angular
- create Chart using Chartjs and PHP
- chart js date range picker apply function
- How to set additional options for Chart.js BarCharts using React-Chartkick
- mysql sum query for chartjs
- Add Labels to Chart.js Bar Chart
- Chart.js replace all data
- Convert charts from vue-chartjs to a PDF
- Chart.update is not a function typeError
- Many Flots using ChartJS and Ajax get data values
- Chartjs only showing dots, line not showing
- angular 4 line chart data is not showing data from http get
- Grabbing the title in plugin for ChartJS
- How do i have to implement my code to get correct json?
- Chart.js showing only last data value
- Synchronous XMLHttpRequest when loading charts.js in to a div
- Chart JS tooltip label not showing correct value
- Chart.js - Styling Legend - ONE legend entry per line
- chart.JS i want to put different color for each Y axis value grid line color
- React with chart js, labelling problems in multiple datasets for doughnut chart
- ChartJS xAxis label position
- How to show tooltip on legend item in chart.js
- how to Fill array with 0 if data is not present?
- Chartjs: Align first tick in first index of axis