LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



< Select a data set

CSS
body {
  padding: 0;
  margin: 0;
  font-family: Verdana;
  font-size: 15px;
}

select {
  font-size: 15px;  
  padding: 5px;
}

.selector {
  background: #eee;
  border-bottom: 1px solid #ddd;
  padding: 16px;
  margin: 0;
}

#chartdiv {
	width		: 100%;
	height		: 300px;
	font-size	: 11px;
}	
JS
var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "dataLoader": {
    "url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/218423/data1.json"
  },
  "valueAxes": [{
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  }],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "graphs": [{
    "balloonText": "[[category]]: [[value]]",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0,
    "tickPosition": "start",
    "tickLength": 20
  }
});

function setDataSet(dataset_url) {
  AmCharts.loadFile(dataset_url, {}, function(data) {
    chart.dataProvider = AmCharts.parseJSON(data);
    chart.validateData();
  });
}
Host Instantly Drag and Drop Website Builder

 

Description

This example shows how to simply implement dynamic data loading for the charts, allowing user to select a data set.
Term
Mon, 11/27/2017 - 21:57

Related Codes

Pen ID
Pen ID
Pen ID