Postcard - Olympic games

Postcard - Olympic games in Sochi 2014

by ChartJS

HTML

<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/13.2.6/js/dx.chartjs.js"></script>
<div id="chartContainer" style="width:100%;height: 600px"></div>

JavaScript

var dataSource = [
  { arg: 0, val1: 2 },
  { arg: 1, val1: 3.5 },
  { arg: 4, val1: 4 },
  { arg: 7, val1: 3.5 },
  { arg: 8, val1: 2 },
  { arg: 8, val1: 2 },
  { arg: 7, val1: 0.5 },
  { arg: 4, val1: 0 },
  { arg: 1, val1: 0.5 },
  { arg: 0, val1: 2 },
  
  { arg: 10, val2: 4 },
  { arg: 7, val2: 3.5 },
  { arg: 6, val2: 2 },
  { arg: 7, val2: 0.5 },
  { arg: 10, val2: 0 },
  { arg: 13, val2: 0.5 },
  { arg: 14, val2: 2 },
  { arg: 13, val2: 3.5 },
  { arg: 10, val2: 4 },
    
   
  { arg: 7, val4: 6.5 },
  { arg: 4, val4: 6 },
  { arg: 3, val4: 4.5 },
  { arg: 4, val4: 3 },
  { arg: 7, val4: 2.5 },
  { arg: 9.5, val4: 3 },
  { arg: 10.5, val4: 4.5 },
  { arg: 9.5, val4: 6 },
  { arg: 7, val4: 6.5 },
    
  { arg: 1.5, val5: 6.5 },
  { arg: -1.5, val5: 6 },
  { arg: -2.5, val5: 4.5 },
  { arg: -1.5, val5: 3 },
  { arg: 1.5, val5: 2.5 },
  { arg: 4, val5: 3 },
  { arg: 5.5, val5: 4.5 },
  { arg: 4, val5: 6 },
  { arg: 1.5, val5: 6.5 },
    
  { arg: 1.5, val5: 6.5 },
  { arg: -1.5, val5: 6 },
  { arg: -2.5, val5: 4.5 },
  { arg: -1.5, val5: 3 },
  { arg: 1.5, val5: 2.5 },
  { arg: 4, val5: 3 },
  { arg: 5.5, val5: 4.5 },
  { arg: 4, val5: 6 },
  { arg: 1.5, val5: 6.5 },
    
  { arg: 12, val6: 6.5 },
  { arg: 9.5, val6: 6 },
  { arg: 8, val6: 4.5 },
  { arg: 9.5, val6: 3 },
  { arg: 12, val6: 2.5 },
  { arg: 14.5, val6: 3 },
  { arg: 16, val6: 4.5 },
  { arg: 14.5, val6: 6 },
  { arg: 12, val6: 6.5 },
  
];

$("#chartContainer").dxChart({
  dataPrepareSettings:{
    sortingMethod: false
  },
    dataSource: dataSource,
    commonSeriesSettings: {
        type: "line",
      point:{visible: false},
      width: 8
    },
  valueAxis: {
    valueMarginsEnabled: false,
    min: 0,
    max: 6.5,
    tickInterval: 1
  },
  argumentAxis: {
    valueMarginsEnabled: false,
    
  },
    commonAxisSettings: {
        grid: {
            visible: true
        },
      label: {
        visible: true
      }
    },
    series: [
    { valueField: 'val1', color: 'yellow',...