[Vuejs]-D3 chart from internal Array

by

1👍

✅

I uncommented you timeParse and changed it from %d-%b-%y to %d/%m/y which was the format your time was in (I think, d and m could be switched). The chart does look kinda strange as all the dates are on one day.

const data = [{
        date: '02/03/18',
        value: 35,
    },
    {
        date: '02/03/18',
        value: 89,
    },
    {
        date: '02/03/18',
        value: 57,
    },
    {
        date: '02/03/18',
        value: 45,
    },
    {
        date: '02/03/18',
        value: 88,
    },
    {
        date: '02/03/18',
        value: 15,
    },
    {
        date: '02/03/18',
        value: 41,
    },
    {
        date: '02/03/18',
        value: 49,
    },
    {
        date: '02/03/18',
        value: 7,
    },
    {
        date: '02/03/18',
        value: 6,
    },
    {
        date: '02/03/18',
        value: 73,
    },
    {
        date: '02/03/18',
        value: 32,
    },
    {
        date: '02/03/18',
        value: 54,
    },
    {
        date: '02/03/18',
        value: 2,
    },
    {
        date: '02/03/18',
        value: 45,
    },
    {
        date: '02/03/18',
        value: 84,
    },
    {
        date: '02/03/18',
        value: 29,
    },
    {
        date: '02/03/18',
        value: 16,
    },
    {
        date: '02/03/18',
        value: 42,
    },
    {
        date: '02/03/18',
        value: 11,
    },
    {
        date: '02/03/18',
        value: 94,
    },
    {
        date: '02/03/18',
        value: 72,
    },
    {
        date: '02/03/18',
        value: 56,
    },
    {
        date: '02/03/18',
        value: 23,
    },
    {
        date: '02/03/18',
        value: 88,
    },
    {
        date: '02/03/18',
        value: 8,
    },
    {
        date: '02/03/18',
        value: 33,
    },
    {
        date: '02/03/18',
        value: 68,
    },
    {
        date: '02/03/18',
        value: 51,
    },
    {
        date: '02/03/18',
        value: 16,
    },
];
const svg = d3.select('svg');
const margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50,
};
const width = +svg.attr('width') - margin.left - margin.right;
const height = +svg.attr('height') - margin.top - margin.bottom;
const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);

const parseTime = d3.timeParse('%d/%m/%y');
data.forEach(function(d){
  d.date = parseTime(d.date);
});

const x = d3.scaleTime().rangeRound([0, width, ]);
const y = d3.scaleLinear().rangeRound([height, 0, ]);

const line = d3.line()
    .x(d => x(d.date))
    .y(d => y(d.value));

x.domain(d3.extent(data, d => d.date));
y.domain(d3.extent(data, d => d.value));

g.append('g')
    .attr('transform', `translate(0,${height})`)
    .call(d3.axisBottom(x))
    .select('.domain')
    .remove();

g.append('g')
    .call(d3.axisLeft(y))
    .append('text')
    .attr('fill', '#000')
    .attr('transform', 'rotate(-90)')
    .attr('y', 6)
    .attr('dy', '0.71em')
    .attr('text-anchor', 'end')
    .text('Views & Clicks');

g.append('path')
    .datum(data)
    .attr('fill', 'none')
    .attr('stroke', 'steelblue')
    .attr('stroke-linejoin', 'round')
    .attr('stroke-linecap', 'round')
    .attr('stroke-width', 1.5)
    .attr('d', line);
<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="d3 analytics chartviews">
  <svg width="900"
       height="500"/>
</div>

Leave a comment