CODEWITHSUNDEEP
javascriptamcharts
Sufi Iman
Sufi Iman

Reputation: 57

Images for Scrollbar not showing up properly in Amcharts

I'm creating a line graph in Amcharts and am using a scrollbar to allow the user to scroll across the graph. Ideally, I'd like the images for the scrollbar to show up in jsfiddle, but for some weird reason they're showing up like this: enter image description here

when really they should look like this:

enter image description here

This is the JavaScript portion of the code for this chart:

var chart;

AmCharts.theme = AmCharts.themes.light;

AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = generateChartData();
chart.categoryField = "date";
chart.marginRight = 0;
chart.marginTop = 0;
chart.autoMarginOffset = 0;
chart.angle = 0;
chart.dataDateFormat = "YYYY-MM-DD";
chart.pathToImages = "https://www.amcharts.com/lib/images/";
chart.fontFamily = "Helvetica";
chart.fontSize = 14;

// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.labelRotation = 60;
categoryAxis.gridPosition = "start";
categoryAxis.dashLength = 1;
categoryAxis.parseDates = true;
categoryAxis.equalSpacing = false;
categoryAxis.minorGridEnabled = true;
// categoryAxis.dateFormats = [{period:'DD',format:'MM DD YYYY'}];
categoryAxis.boldPeriodBeginning = true;
categoryAxis.markPeriodChange = false;

// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.title;
valueAxis.dashLength = 10;
chart.addValueAxis(valueAxis);

// GRAPH            
var graphEnrolled = new AmCharts.AmGraph();
graphEnrolled.valueField = "value";
graphEnrolled.colorField = "color";
graphEnrolled.balloonText = "[[category]]: [[value]]";
graphEnrolled.type = "smoothedLine";
graphEnrolled.lineAlpha = 2;
graphEnrolled.fillAlphas = 0;
chart.addGraph(graphEnrolled);

var scrollbar = new AmCharts.ChartScrollbar();
scrollbar.scrollbarHeight = 5;
chart.addChartScrollbar(scrollbar);
scrollbar.graph = graphEnrolled;

var cursor = new AmCharts.ChartCursor();
cursor.cursorPosition = "mouse";
cursor.pan = true;
cursor.valueLineEnabled = true;
cursor.valueLineBalloonEnabled = true;
chart.addChartCursor(cursor);

//var graphExpected = new AmCharts.AmGraph();
//graphExpected.valueField = "value2";
//graphExpected.colorField = "color";
//graphExpected.balloonText = "[[category]]: [[value]]";
//graphExpected.type = "smoothedLine";
//graphExpected.lineAlpha = 2;
//graphExpected.fillAlphas = 0;
//chart.addGraph(graphExpected);

// WRITE

chart.exportConfig = 
{
  menuRight: '20px',
  menuBottom: '50px',
  menuItems: [{
      icon:'https://www.amcharts.com/lib/3/images/export.png',
      format: 'png'   
      }]
    }

chart.write("chartdiv");
});

function addRow() {
jQuery('<div class="data-row"><input class="data-cell data-category"    value="YYYY-MM-DD" type="date"/><input class="data-cell data-value" value="0" type="number" step="1"/><input class="data-cell data-value" value="0" type="number" step="1"/><input class="data-button delete-button" type="button" value="X"/></div>').appendTo('#data-table').each(function () {initRowEvents(jQuery(this));});
}

function generateChartData() {
var chartData = [];
jQuery('.data-row').each(function () {
    var date = jQuery(this).find('.data-category').val();
    var value = jQuery(this).find('.data-value').val();
    //var value2 = jQuery(this).find('data-value').val();
    if (date != '') {
        chartData.push({
            date: date,
            value: value,
            //value: value2

        });
    }
});
return chartData;
}

function initRowEvents(scope) {
scope.find('.data-cell')
    .attr('title', 'Click to edit')
    .on('keypress keyup change', function () {
        // re-generate chart data and reload it in chart
        chart.dataProvider = generateChartData();
        chart.validateData();
    }).end().find('.delete-button').click(function () {
        // remove the row
        $(this).parents('.data-row').remove();

        // re-generate chart data and reload it in chart
        chart.dataProvider = generateChartData();
        chart.validateData();
    });
}

jQuery(function () {
// initialize the table
initRowEvents(jQuery(document));
});

chart.addListener("rendered", zoomChart);

zoomChart();
function zoomChart(){
//chart.zoomToIndexes(chart.dataProvider.length - 40,    chart.dataProvider.length - 1);
chart.zoomToIndexes(0, 20);
}

Here is the jsfiddle for this project

Upvotes: 1

Views: 1234

Answers (1)

martynasma
martynasma

Reputation: 8595

You have an error in pathToImages:

chart.pathToImages = "https://www.amcharts.com/lib/images/";

Should be:

chart.pathToImages = "https://www.amcharts.com/lib/3/images/";

Or better yet, simple remove that line. The chart will find its images on its own.

https://jsfiddle.net/tsox1p8x/10/

Upvotes: 2

Related Questions