Basic Column Chart - CanvasJS

Basic Column Chart

HTML

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>

<script type="text/javascript">

    // globální proměnná - NEMAZAT !!!!!
    var stockChart; // global variable

    window.onload = function () {

        SetCanvasCultureInfo();

       // var areasnumber;

       // var chartsnumber;

        var chartHeight;

        var datapoints = [];

        var serieproperties = [];

        var chartproperties = [];

        //var areaproperties = [];

        var nameschart = [];

        areasnumber = 1;

        chartsnumber = 1;

        chartHeight = 400 ;

        // nastavení výšky grafické plochy pro všechny grafy dané oblasti podle počtu grafů
        //$('.handle').attr('style', 'height: ' + chartHeight +'px');


            chartproperties.push({"numseries":3,"xInt":1.0,"xMin":0.0,"xIntType":"hour","xFormat":"D.M HH:mm","yLmin":null,"yRmin":null,"yLtitle":"Spotřeba [kWh] ","yRtitle":"Maximum [kW] "});

            serieproperties.push({"chtype":"stackedColumn","sname":"NT","scolor":"#20ff20aa","saxisYType":"primary"});
            serieproperties.push({"chtype":"stackedColumn","sname":"VT","scolor":"#ff2020aa","saxisYType":"primary"});
            serieproperties.push({"chtype":"line","sname":"Maximum","scolor":"#ff0000ff","saxisYType":"secondary"});

           ...

JavaScript

function SetCanvasCultureInfo() {

    CanvasJS.addCultureInfo("cs", {
        decimalSeparator: ",", // Observe ToolTip Number Format
        digitGroupSeparator: ".", // Observe axisY labels
        days: ["Pondělí", "Úterý", "Středa", "Čtvrtek", "Pátek", "Sobota", "Neděle"],
        shortMonths: ["Led", "Ún", "Bře", "Dub", "Kvě", "Čen", "Čec", "Srp", "Zář", "Říj", "Lis", "Pro"],
        months: ["Leden", "Únor", "Březen", "Duben", "Květen", "Červen", "Červenec", "Srpen", "Září", "Říjen", "Listopad", "Prosinec"],
        saveJPGText: "Ulož JPG",
        savePNGText: "Ulož PNG",
        printText: "Tisk",
        rangeSelector: {
            fromText: "Od",
            toText: "Do",
            rangeText: "Výřez"
        }
    });

    return true;
}

function CreateSimpleChartUniversal(fkDataPoints, fkSerieProperties, fkChartProperties,  fkChartName) {

    var SimpleChart;

    var serieindex;

    var areaIndex = 0;
    var chartAllindex = 0;
    var serieAllIndex = 0;

    var sFontFamilyAll = "Calibri";

    var Container = "SimpleChartContainer";


    // společné atributy pro celý graf 
    //osa y

    var axisY = {
        titleFontSize: 20,
        titleFontFamily: sFontFamilyAll,
        labelFontSize: 15,
        labelFontFamily: sFontFamilyAll,
        title: fkChartProperties[chartAllindex].yLtitle,
        gridColor: "#B6B1A8",
        minimum: fkChartProperties[chartAllindex].yLmin
    }

    var axisY2 = {
        titleFontSize: 20,
        titleFontFamily: sFontFamilyAll,
        labelFontSize: 15,
        labelFontFamily: sFontFamilyAll,
        title: fkChartProperties[chartAllindex].yRtitle,
        gridColor: "#B6B1A8",
        minimum: fkChartProperties[chartAllindex].yRmin
    }

    //osa x
    var axisX = {
        labelFontSize: 15,
        labelFontFamily: sFontFamilyAll,
        valueFormatString: fkChartProperties[chartAllindex].xFormat,
        gridThickness: 1,
        interval: fkChartProperties[chartAllindex].xInt,

       ...