search

y-takey / chartjs-plugin-stacked100

This plugin for Chart.js that makes your bar chart to 100% stacked bar chart.
MIT License
131 stars 29 forks source link

How to use this plugin without npm #3

Closed kuldeeppatel123 closed 7 years ago

kuldeeppatel123 commented 7 years ago

hi, i want to use this plugin in my django project. i can not use npn is there a way to add this using CDN or direct download and then ?

y-takey commented 7 years ago

Hi, @kuldeeppatel123

Yes, there is 2way.

1. Download and save

kuldeeppatel123 commented 7 years ago

I am running into some issue

here is the snippet

........

new Chart(document.getElementById('resource_chart'),{ type: 'bar', data: { labels: {{ months|safe }}, datasets: [ { label: "QUICLOSTEX", data: {{ QUICLOSTEX_data|safe }} , backgroundColor: "#CDDC39" }, { label: "QLOSTINT", data: {{ QLOSTINT_data|safe }}, backgroundColor: "#9C27B0" }, { label: "QCE Vetting", data:{{ QCE_Vetting_data|safe }}, backgroundColor: "#E91E63" }, { label: "QUIC Release", data: {{ QUIC_Release_data|safe }}, backgroundColor: "#2196F3" }, { label: "QUIC Vetting", data: {{QUIC_Vetting_data |safe }}, backgroundColor: "#673AB7" }, { label: "QTIL Release", data: {{ QTIL_Release_data|safe }}, backgroundColor: "#00BCD4" }, { label: "QTIL Vetting", data: {{ QTIL_Vetting_data|safe }}, backgroundColor: "#4CAF50" }, { label: "QCT Release", data: {{ QCT_Release_data|safe }}, backgroundColor: "#CDDC39" }, { label: "QCT Vetting", data: {{ QCT_Vetting_data|safe }}, backgroundColor: "#FFEB3B" }, { label: "QCA Release", data: {{ QCA_Release_data|safe }}, backgroundColor: "#FF9800" }, { label: "QCA Vetting", data: {{QCA_Vetting_data |safe }}, backgroundColor: "#795548" }, { label: "QDT Release", data: {{QDT_Release_data |safe }}, backgroundColor: "#9E9E9E" }, { label: "QDT Vetting", data: {{QDT_Vetting_data |safe }}, backgroundColor: "#009688" }, { label: "Unknown", data: {{Unknown_data |safe }}, backgroundColor: "#607D8B" }, ] }, options: { plugins: { stacked100: { enable: true } }, legend: { position: 'right', }, tooltips: { mode: 'index', callbacks: { // Use the footer callback to display the sum of the items showing in the tooltip footer: function(tooltipItems, data) { var sum = 0; tooltipItems.forEach(function(tooltipItem) { sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; }); return 'Sum: ' + 0 + ' hrs.'; }, }, footerFontStyle: 'normal' }, scales: { xAxes: [{ ticks: { autoSkip: false }, gridLines: { display:false, }, // stacked: true }], yAxes: [{ gridLines: { drawBorder: false, }, //stacked: true }] } } });

if i remove plugins: { stacked100: { enable: true } }, and re enable stacked:true i am seeing the regular stacked bar chart but when i enable the plugin i just see empty chart with yaxis from 0-100 and no bars (see attached screenshots). who to resolve this ? with plugin without plugin

y-takey commented 7 years ago

@kuldeeppatel123, thanks for the reply.

Could you tell me about that data format? for example, is {{ QUICLOSTEX_data|safe }} django's syntax? how actually data format is? this plugin currently expect to array of number only. e.g. [10, 20, 30]

kuldeeppatel123 commented 7 years ago

yes it is comming from django and its a simple python list {{ QUICLOSTEX_data|safe }} = [10,20,30,.....]

y-takey commented 7 years ago

Thanks,

hmm... I tried using your data simplify and replace data with literal data, but i couldn't. here is tried code and the result: https://codepen.io/anon/pen/vZPara?editors=1010 couly you display codebase (with no django) to reproduce the problem? or you can edit above codepen.

kuldeeppatel123 commented 7 years ago

thank you for all your help :) i found the issue while gathering the data i wanted to append 0 but i was doing it with a string '0' Unknown_data = [ item.get('None Vetting' ,'0') for item in table ] changing it to Unknown_data = [ item.get('None Vetting',0) for item in table ] fixed it

y-takey commented 7 years ago

I'm glad the problem was solved. :)