CODEWITHSUNDEEP
javascriptjquerychartsamcharts
Evgenij Reznik
Evgenij Reznik

Reputation: 18614

Display chart after click event

I'm was playing around with amcharts.

While I was able to get this example to work on start up, the chart won't show up when executing this function after a click event. The function itself is being called (function called is being print into the console), but the chart doesn't appear.

<button onclick="show()">
  Show me!
</button>

function show() {
  console.log("function called")
  var chart;

  var chartData = [{
    "ax": 1,
    "ay": 0.5,
    "bx": 1,
    "by": 2.2
  }, {

// ...

  });
}

Here is the fiddle.

Upvotes: 0

Views: 1280

Answers (1)

Dekel
Dekel

Reputation: 62676

If you call the show function yourself you don't need the AmCharts.ready function:

function show() {
  var chart;

  var chartData = [{
    "ax": 1,
    "ay": 0.5,
    "bx": 1,
    "by": 2.2
  }, {
    "ax": 2,
    "ay": 1.3,
    "bx": 2,
    "by": 4.9
  }, {
    "ax": 3,
    "ay": 2.3,
    "bx": 3,
    "by": 5.1
  }, {
    "ax": 4,
    "ay": 2.8,
    "bx": 4,
    "by": 5.3
  }, {
    "ax": 5,
    "ay": 3.5,
    "bx": 5,
    "by": 6.1
  }, {
    "ax": 6,
    "ay": 5.1,
    "bx": 6,
    "by": 8.3
  }, {
    "ax": 7,
    "ay": 6.7,
    "bx": 7,
    "by": 10.5
  }, {
    "ax": 8,
    "ay": 8,
    "bx": 8,
    "by": 12.3
  }, {
    "ax": 9,
    "ay": 8.9,
    "bx": 9,
    "by": 14.5
  }, {
    "ax": 10,
    "ay": 9.7,
    "bx": 10,
    "by": 15
  }, {
    "ax": 11,
    "ay": 10.4,
    "bx": 11,
    "by": 18.8
  }, {
    "ax": 12,
    "ay": 11.7,
    "bx": 12,
    "by": 19
  }];

  // XY CHART
  chart = new AmCharts.AmXYChart();

  chart.dataProvider = chartData;
  chart.startDuration = 1;

  // AXES
  // X
  var xAxis = new AmCharts.ValueAxis();
  xAxis.title = "X Axis";
  xAxis.position = "bottom";
  xAxis.dashLength = 1;
  xAxis.axisAlpha = 0;
  xAxis.autoGridCount = true;
  chart.addValueAxis(xAxis);

  // Y
  var yAxis = new AmCharts.ValueAxis();
  yAxis.position = "left";
  yAxis.title = "Y Axis";
  yAxis.dashLength = 1;
  yAxis.axisAlpha = 0;
  yAxis.autoGridCount = true;
  chart.addValueAxis(yAxis);

  // GRAPHS
  // triangles up
  var graph1 = new AmCharts.AmGraph();
  graph1.lineColor = "#FF6600";
  graph1.balloonText = "x:[[x]] y:[[y]]";
  graph1.xField = "ax";
  graph1.yField = "ay";
  graph1.lineAlpha = 0;
  graph1.bullet = "triangleUp";
  chart.addGraph(graph1);

  // triangles down
  var graph2 = new AmCharts.AmGraph();
  graph2.lineColor = "#FCD202";
  graph2.balloonText = "x:[[x]] y:[[y]]";
  graph2.xField = "bx";
  graph2.yField = "by";
  graph2.lineAlpha = 0;
  graph2.bullet = "triangleDown";
  chart.addGraph(graph2);

  // first trend line
  var trendLine = new AmCharts.TrendLine();
  trendLine.lineColor = "#FF6600";
  trendLine.initialXValue = 1;
  trendLine.initialValue = 2;
  trendLine.finalXValue = 12;
  trendLine.finalValue = 11;
  chart.addTrendLine(trendLine);

  // second trend line
  trendLine = new AmCharts.TrendLine();
  trendLine.lineColor = "#FCD202";
  trendLine.initialXValue = 1;
  trendLine.initialValue = 1;
  trendLine.finalXValue = 12;
  trendLine.finalValue = 19;
  chart.addTrendLine(trendLine);

  // CURSOR
  var chartCursor = new AmCharts.ChartCursor();
  chart.addChartCursor(chartCursor);

  // SCROLLBAR

  var chartScrollbar = new AmCharts.ChartScrollbar();
  chartScrollbar.scrollbarHeight = 5;
  chartScrollbar.offset = 15
  chart.addChartScrollbar(chartScrollbar);
  // WRITE
  chart.write("chartdiv");
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/xy.js"></script>

<div id="chartdiv" style="width: 100%; height: 400px;"></div>

<button onclick="show()">
  Show me!
</button>

Upvotes: 1

Related Questions