#7946

by amcharts

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
    width : 100%;
    height : 500px;
    font-size : 11px;
}

JavaScript

var chart;
var graph;

var chartData = [{
    "month": "Januar",
        "value": 200,
        "value1": 210
}, {
    "month": "Februar",
        "value": 210,
        "value1": 215
}, {
    "month": "März",
        "value": 202,
        "value1": 218
}, {
    "month": "April",
        "value": 201,
        "value1": 222
}, {
    "month": "Mai",
        "value": 188,
        "value1": 228
}, {
    "month": "Juni",
        "value": 214,
        "value1": 230
}, {
    "month": "Juli",
        "value": 200,
}, {
    "month": "August",
        "value": 205,
}, {
    "month": "September",
        "value": 210,
}, {
    "month": "Oktober",
        "value": 195,
}, {
    "month": "November",
        "value": 200,
}, {
    "month": "Dezember",
        "value": 205,

}, ];


AmCharts.ready(function () {
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();
    chart.pathToImages = "{{ asset('/js/amcharts/amcharts/images') }}/";
    chart.dataProvider = chartData;
    chart.marginLeft = 10;
    chart.categoryField = "month";
    chart.dataDateFormat = "MMM";


    // AXES
    // category
    var categoryAxis = chart.categoryAxis;
    categoryAxis.parseDates = false; // as our data is date-based, we set parseDates to true
    categoryAxis.minPeriod = "MMM"; // our data is yearly, so we set minPeriod to YYYY
    categoryAxis.dashLength = 3;
    categoryAxis.minorGridEnabled = true;
    categoryAxis.minorGridAlpha = 0.1;

    // value
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.axisAlpha = 0;
    valueAxis.minimum = 0;
    valueAxis.inside = true;
    valueAxis.dashLength = 3;
    chart.addValueAxis(valueAxis);

    var balloon = chart.balloon;
    balloon.cornerRadius = 6;
    balloon.adjustBorderColor = false;
    balloon.color = "#fff";
    balloon.horizontalPadding = 10;
    balloon.verticalPadding = 10;
    balloon.borderThickness = 0;
    balloon.fillAlpha = 1;

    // GRAPH
    graph = new AmCharts.AmGraph();
    graph.type = "line"; // this...