Highcharts Demo

author(s): Torstein Hønsi

by Krn Prz

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="position:relative; min-height: 100%; "></div>

<div class="container" style="position:relative; max-height: 100%; "> <img class="img1" src="http://intra.iedf.org.mx/deoyge/resultados2015/LogosPartidos/pan.png">
  <img class="img2" src="http://intra.iedf.org.mx/deoyge/resultados2015/LogosPartidos/pri.png">
  <img class="img3" src="http://intra.iedf.org.mx/deoyge/resultados2015/LogosPartidos/prd.png" >
  <img class="img4" src="http://intra.iedf.org.mx/deoyge/resultados2015/LogosPartidos/pvem.png">
  <img class="img5" src="http://intra.iedf.org.mx/deoyge/resultados2015/LogosPartidos/pt.png">
  <img class="img6" src="http://intra.iedf.org.mx/deoyge/resultados2015/LogosPartidos/mc.png">
  <img class="img7" src="http://intra.iedf.org.mx/deoyge/resultados2015/LogosPartidos/na.png">
  <img class="img8" src="http://intra.iedf.org.mx/deoyge/resultados2015/LogosPartidos/morena.png">
  <img class="img9" src="http://intra.iedf.org.mx/deoyge/resultados2015/LogosPartidos/ph.png">
  <img class="img10" src="http://intra.iedf.org.mx/deoyge/resultados2015/LogosPartidos/pes.png">
  <img class="img11" src="http://intra.iedf.org.mx/deoyge/resultados2015/LogosPartidos/ci1_5.png">
  <img class="img12" src="http://intra.iedf.org.mx/deoyge/resultados2015/LogosPartidos/ci1_4.png">
  <img class="img13" src="http://intra.iedf.org.mx/deoyge/resultados2015/LogosPartidos/ci1_16.png">
  <img class="img14" src="http://intra.iedf.org.mx/deoyge/resultados2015/LogosPartidos/ci3_9.png">
  <img class="img15" src="http://intra.iedf.org.mx/deoyge/resultados2015/LogosPartidos/pri-pvem.png">
  <img class="img16" src="http://intra.iedf.org.mx/deoyge/resultados2015/LogosPartidos/prd-pt-na.png">
  <img class="img17" src="http://intra.iedf.org.mx/deoyge/resultados2015/LogosPartidos/prd-pt.png">
  <img class="img18" src="http://intra.iedf.org.mx/deoyge/resultados2015/LogosPartidos/prd-na.png">
  <img class="img19"...

CSS

.img1 {
 max-width: 4%;
    height: auto;
    width: auto/9;
    left:75px;
    
}
.img2 {
  position: relative;
  max-width: 4%;
    min-width: 4%;
     height: auto;
    left: 6.5%;  
}
.img3 {
  position: relative;
  max-width: 4%;
    min-width: 4%;
     height: auto;
    left: 6.5%;  
}
.img4 {
  position: relative;
  max-width: 4%;
    min-width: 4%;
     height: auto;
    left: 6.5%;  
}
.img5 {
  position: relative;
  max-width: 4%;
    min-width: 4%;
     height: auto;
    left: 6.5%;  
}
.img6 {
  position: relative;
  max-width: 4%;
    min-width: 4%;
     height: auto;
    left: 6.5%;  
}
.img7 {
  position: relative;
  max-width: 4%;
    min-width: 4%;
     height: auto;
    left: 6.5%;  
}
.img8 {
  position: relative;
  max-width: 4%;
    min-width: 4%;
     height: auto;
    left: 6.5%;  
}
.img9 {
  position: relative;
  max-width: 4%;
    min-width: 4%;
     height: auto;
    left: 6.5%;  
}
.img10 {
  position: relative;
  max-width: 4%;
    min-width: 4%;
     height: auto;
    left: 6.5%;  
}
.img11 {
  position: relative;
  max-width: 4%;
    min-width: 4%;
     height: auto;
    left: 6.5%;  
}
.img12 {
  position: relative;
  max-width: 4%;
    min-width: 4%;
     height: auto;
    left: 6.5%;  
}
.img13 {
  position: relative;
  max-width: 4%;
    min-width: 4%;
     height: auto;
    left: 6.5%;  
}
.img14 {
  position: relative;
  max-width: 4%;
    min-width: 4%;
     height: auto;
    left: 6.5%;  
}
.img15 {
  position: relative;
  max-width: 4%;
    min-width: 4%;
     height: auto;
    left: 6.5%;  
}
.img16 {
  position: relative;
  max-width: 4%;
    min-width: 4%;
     height: auto;
    left: 6.5%;  
}
.img17 {
  position: relative;
  max-width: 4%;
    min-width: 4%;
     height: auto;
    left: 6.5%;  
}
.img18 {
  position: relative;
  max-width: 4%;
    min-width: 4%;
     height: auto;
    left: 6.5%;  
}
.img19 {
  position: relative;
  max-width: 4%;
    min-width: 4%;
     height: auto;
    left: 6.5%;  
}
.img20 {
 ...

JavaScript

$(function () {
     var chart = new Highcharts.Chart({

   
        chart: {
            renderTo: 'container',
            //spacingTop: 90,
            spacingBottom: 100,
            type: 'column'
        },
        title: {
            text: 'ELECCIÓN DE JEFE DELEGACIONAL'
        },
        subtitle: {
            text: 'TENDENCIAS EN GUSTAVO A. MADERO</a>'
        },
        xAxis: {
            type: 'category'
       },
        yAxis: {
            title: {
                text: 'RESULTADO EN PORSENTAJES'
            }
        },

        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}%'
                }
            }
        },

        tooltip: {
            headerFormat: function () {
            return $('<div>').append($('<img>').attr('src', 'http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png').css({
                height: 40,
                width: 40
            })).html();
        },
        useHTML: true
        },

        series: [{
           name: "Resultados Jefe Delegacional 2015",
            
            data: [{
                name: "PAN",
                color: '#008CBF',
                y: 15.42,
                drilldown: "PAN"
            }, {
                name: "PRI",
               color: '#fd0000',
                y: 11.04,
                drilldown: "PRI"
            },{
                name: "PRD",
                color: '#ecda00',
                y: 10.00,
                drilldown: "PRD"
            },{
                name: "PVEM",
                color: '#7CBF00',
                y: 4.00,
                drilldown: "PVEM"
            },
                   {
                name: "PT",
                color: '#e52b38',
                y: 2.22,
                drilldown: "PT"
            },
                   {
                name:...