Update array values to chart based on timeframe - javascript

Question

I need to update the chart based on time period.

currently chart is updating all values.

Now i need to update the chart by

3 months
6 months
9 months
12 months
15 months
18 months

how to do in javascript or jquery.??

i have created fiddle to explain my situation

http://jsfiddle.net/Yq3DW/97/

this is the html

<select id="SelectPeriod" >
    <option value="last3Months">Last 3 months</option>
    <option value="last6Months">Last 6 months</option>
    <option value="last9Months">Last 9 months</option>
    <option value="last12Months">Last 12 months</option>
    <option value="last15Months">Last 15 months</option>
    <option value="last18Months">Last 18 months</option>
    <option value="last24Months">Last 24 months</option>
</select>

<div id="chart"></div>

JS

     var calculation = [["Actual value","Targeted value"]],
    result = [[100, 190],[115,190],[250, 190],[23,190],[190, 190],[170,190],
[100, 190],[115,190],[250, 190],[23,190],[190, 190],[170,190],[100, 190],
[115,190],[250, 190],[23,190],[190, 190],[170,190],[100, 190],[115,190],
[250, 190],[23,190],[190, 190],[170,190]];  

    calculation = calculation.concat(result.sort(function (a, b) {  }));
    var chart = c3.generate({
        bindto: '#chart',
        data: {
            rows: calculation,
            type: 'bar',
        }
    });

this is my customisation , trying

$("#SelectPeriod").change(function (evt) {
    var chartSelection = $("#SelectPeriod").val();
    var chart = c3.generate({
        data: {
            rows: calculation
        }
    });
});

in detail explanation

I need to update the charts based on time frame.

If user selects 6 months dropdown, i need to show only 6 months chart.

currently it is updating whole 24 months.

Now i need to categorise the data.

How to do it in javascript or jquery?? please help me.

Any help is appreciated

artm · Accepted Answer · 2014-11-09 10:57:45Z

0

See http://jsfiddle.net/Yq3DW/99/

I changed the value of options to indicate how many months each should show and in the change event I slice the original array. I use + 1 to include the 3rd, 6th, etc. item in the array.

$("#SelectPeriod").change(function (evt) {
    var chartSelection = $("#SelectPeriod").val();
    var chart = c3.generate({
        data: {
            rows: calculation.slice(0, parseInt(chartSelection) + 1),
            type:'bar'
        }
    });
});

answered Nov 9, 2014 at 10:57

artm

8,5943 gold badges28 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rakesh Over a year ago

thank you buddy! literally you saved my life. one more thing is it possible, can i get one more dropdown as Jan to current month example it should render from january to current month november's chart.

artm Over a year ago

That sounds like a new question but add a new select, set the texts from january to december, with values from 1 to 12. When it changes, you can do something like

var startIndex = (selectedValue - 1) * 2; var endIndex = (new Date().getMonth() * 2) - startIndex; var arra = [calculation[0]].concat(result.slice(startIndex, endIndex));

and pass arra to the chart. You need to check if selected month is later than current month, or populate the select only up to current month, etc.

rakesh Over a year ago

sorry, i have made a fiddle: jsfiddle.net/Yq3DW/105 is this correct?? please help me..

rakesh Over a year ago

thank you but unfortunately it doesnt work for me,sorry if i not explained properly.

i need a default value in dropdown as Jan to current month means whenever user comes to chart, chart should auto populate this value. for example now the month is november. so chart should display january to november.

Collectives™ on Stack Overflow

Update array values to chart based on timeframe - javascript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related