score:0
you can just replace the jquery functions in the question you linked to by their javascript equivalents.
1.
var ctx = jquery("#linechart").get(0).getcontext("2d");
becomes
var ctx = document.getelementbyid("linechart").getcontext("2d");
2.
spon = jquery('.sp').hasclass('enabled'); ncon = jquery('.nc').hasclass('enabled'); spaon = jquery('.sp-avg').hasclass('enabled'); ncaon = jquery('.nc-avg').hasclass('enabled');
becomes
spon = document.getelementsbyclassname('sp')[0].classname.indexof('enabled') != -1;
ncon = document.getelementsbyclassname('nc')[0].classname.indexof('enabled') != -1;
spaon = document.getelementsbyclassname('sp-avg')[0].classname.indexof('enabled') != -1;
ncaon = document.getelementsbyclassname('nc-avg')[0].classname.indexof('enabled') != -1;
3.
jquery(document).ready(function() {
becomes a javascript block before the end of the tag (there are other ways to do it, but this seemed the easiest to demonstrate)
4.
jquery('.chart-toggles a').click(function() {
becomes
function toggleline(t) {
and
<a class="sp enabled" onclick="toggleline(this)">toggle sp</a>
<a class="nc enabled" onclick="toggleline(this)">toggle nc</a>
<a class="nc-avg enabled" onclick="toggleline(this)">toggle nc avg</a>
<a class="sp-avg enabled" onclick="toggleline(this)">toggle sp avg</a>
5.
jquery(this).toggleclass('enabled');
becomes
if (t.classname.indexof('enabled') == -1)
t.classname += ' enabled'
else
t.classname = t.classname.replace('enabled', '');
fiddle with no jquery - http://jsfiddle.net/htc4gyu5/
notice that i've moved everything to the html block - that's mainly for #3 in the above list.
Source: stackoverflow.com
Related Query
- How can I add dataset toggle to Chart.js?
- How to add an offset to a dataset in Chart js
- How to add a dataset toggle to Chart.js?
- How can I add some text in the middle of a half doughnut chart in Chart.JS?
- How can I add a euro sign (€) to all tooltips in my chart js line chart
- How to add new dataset in line chart of chart.js by iterating over dictionary in JavaScript?
- How can I add background color of length bars in chart (chartJS)?
- How can i add multiple dataset in chart.js package in Laravel
- How can I add new data points to an existing chart with chart.js?
- How can I add functionality to Chartjs Doughnut chart custom legend
- How can I make lines fully connected in a multi-line chart even when one dataset is more sparse than another?
- How to add text inside the doughnut chart using Chart.js?
- Chart.js - How to set a line chart dataset as disabled on load
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- How can I make two of my lines in Chart JS thicker
- How to modify chartjs tooltip so i can add customized strings in tooltips
- How to add an on click event to my Line chart using Chart.js
- How can I make a stepline or stepped chart in chart.js or D3?
- How to display Line Chart dataset point labels with Chart.js?
- Add DataSet Bar Chart - Chart.JS
- How to add second Y-axis for Bar and Line chart in Chart.js?
- How to add text in centre of the doughnut chart using Chart.js?
- How to add datas to chart js from javascript array itself?
- How to add panning to chart in chartjs?
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- how to add a title to my ng2-charts bar chart
- Chart js: how can I align the legend and the title
- Chart.JS: How to add Data to a specific dataset
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
More Query from same tag
- react-chartjs-2 fill property not working?
- Chartjs: Overwrite plot y-axis integer labels to some string value
- Adding a label to a doughnut chart in Chart.js shows all values in each chart
- How to Sum values from different objects in Django?
- Is there an option in chart.js to hide values in the graph legend
- Change the background color of tooltip dynamically using chart color
- Position tooltip based on mouse position
- how to transform changing data to be visualized in a chart.js
- How to create stacked bar chart using react-chartjs-2?
- How can I keep the vertical lines under the horizontal ruler line is chartjs?
- The engine “node” is incompatible with this module when installing React-chartjs-2 Chart.js,
- Chart JS add max value to legend
- Chart.js doughnut text colors
- Is it possible to get chart js data using ajax?
- How to update data from ajax call (chart.js)
- Show "No Data" message for Pie chart with no data
- Angular 2: How to pass my API data to graph and Display the Graph with data
- "Inline" labels in ChartJS
- Chart.js not stretching width as per data
- Iterating through array in Chart.js data field
- ChartJS 2.0 - Huddle labels on pie chart
- Chart js pie chart not showing dynamic data using JSON
- e.labels.map is not a function when creating a chart with chart.js
- Increase point radius when tootip shown for certain data on Charts.js
- Is there any way to show tooltip by default (without hover pie chart) on chartjs
- Chartjs unexpected resize and crop after updating data. Using laravel blade view and Livewire
- Hide the element text on line charts since it overlaps with the line
- chart resizing in ng2-google-charts
- Filter/update already rendered chart.js in react.js
- Chart.js -- using update() with time scale datasets