jettro / c3-angular-directive

Contains angularjs directives that use c3js to create good looking graphs
http://jettro.github.io/c3-angular-directive/
MIT License
203 stars 98 forks source link

Can't Get Timeseries X Axis to Display Properly? #156

Closed pihish closed 7 years ago

pihish commented 7 years ago

I have the following mark-up:

             <c3chart bindto-id="chart1" chart-columns="incidentSummaryColumns" x="incidentSummaryXAxis" chart-data="incidentSummaryChartData" >
                <chart-axis>
                    <chart-axis-x axis-id="x" type="timeseries">
                        <chart-axis-x-tick tick-rotate="50" tick-format="%Y-%m-%d"/>
                    </chart-axis-x>
                    <chart-axis-y axis-id="y" axis-label="New Incidents" axis-position='outer-middle'/>
                </chart-axis>
            </c3chart>

where I've defined the tick format so that the x-axis values should be in 2017-01-24 format. I have the following JS To feed the above mark-up:

  $scope.parseIncidentSummaryChartData = function(data){
        $scope.incidentSummaryChartData = [];
        for(var i = 0; i < data.length; i++){
            var monthObject = {
                convicted: data[i].convicted_count,
                acquitted: data[i].acquitted_count,
                active: data[i].active_count,
                unassigned: data[i].unassigned_count,
                cold: data[i].cold_count,
                x: new Date(data[i].year + '-' + data[i].month + '-' + data[i].day)
            };
            $scope.incidentSummaryChartData.unshift(monthObject);
        }
    };

The x property should be feeding the x-axis labels. It seems like the value is being feed, but it is displayed as an UNIX number on the graph generated.

Why is the x-axis labels not being generated in the correct format?

pihish commented 7 years ago

API documentation for this was out of date. Instead of using the tick-format attribute, you need to use the format-time attribute inside of <chart-axis-x-tick>