search

himynameisdave / svelte-frappe-charts

📈 Svelte bindings for frappe-charts.
https://frappe.io/charts
MIT License
310 stars 16 forks source link

It does not work #43

Closed aodamuz closed 3 years ago

aodamuz commented 3 years ago

Following the documentation, I have initialized the instance but it doesn't work.

<div class="card">
    <div id="chart"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/frappe-charts@1.2.4/dist/frappe-charts.min.iife.js"></script>
<script>
    var users  = @json(array_values($usersPerMonth));
    var months = @json(array_keys($usersPerMonth));

    var data = {
        labels: [
            "12am-3am", "3am-6pm", "6am-9am", "9am-12am",
            "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
        ],
        datasets: [
            {
                name: "Some Data", type: "bar",
                values: [25, 40, 30, 35, 8, 52, 17, -4]
            },
            {
                name: "Another Set", type: "line",
                values: [25, 50, -10, 15, 18, 32, 27, 14]
            }
        ]
    };

    var chart = new frappe.Chart("#chart", {
        title: "My Awesome Chart",
        data: data,
        type: 'axis-mixed',
        height: 250,
        colors: ['#7cd6fd', '#743ee2']
    });
</script>
aodamuz commented 3 years ago

I see it start but nothing is visible on the screen.

<div id="chart">
    <div class="chart-container">
        <div class="graph-svg-tip comparison" style="top: 0px; left: 0px; opacity: 0;" data-point-index="4">
            <span class="title">12am-3am<strong></strong></span>
            <ul class="data-point-list">
                <li style="border-top: 3px solid rgb(124, 214, 253);"><strong style="display: block;">25</strong> Some Data</li>
                <li style="border-top: 3px solid rgb(116, 62, 226);"><strong style="display: block;">25</strong> Another Set</li>
            </ul>
            <div class="svg-pointer" style="left: calc(50% - 45px);"></div>
        </div>
        <svg class="frappe-chart chart" width="0" height="250">
            <defs></defs>
            <text class="title" x="20" y="10" dy="12px" font-size="12px" fill="#666666" text-anchor="start">My Awesome Chart</text>
            <g class="line-chart chart-draw-area" transform="translate(50, 50)">
                <g class="y axis" transform="">
                    <g transform="translate(0, 120)" stroke-opacity="1">
                        <line class="line-horizontal" x1="-6" x2="-74" y1="0" y2="0" style="stroke: rgb(218, 218, 218);"></line>
                        <text x="-2" y="0" dy="3px" font-size="10px" text-anchor="start">-20</text>
                    </g>
                    <g transform="translate(0, 90)" stroke-opacity="1">
                        <line class="line-horizontal" x1="-6" x2="-74" y1="0" y2="0" style="stroke: rgb(218, 218, 218);"></line>
                        <text x="-2" y="0" dy="3px" font-size="10px" text-anchor="start">0</text>
                    </g>
                    <g transform="translate(0, 60)" stroke-opacity="1">
                        <line class="line-horizontal" x1="-6" x2="-74" y1="0" y2="0" style="stroke: rgb(218, 218, 218);"></line>
                        <text x="-2" y="0" dy="3px" font-size="10px" text-anchor="start">20</text>
                    </g>
                    <g transform="translate(0, 30)" stroke-opacity="1">
                        <line class="line-horizontal" x1="-6" x2="-74" y1="0" y2="0" style="stroke: rgb(218, 218, 218);"></line>
                        <text x="-2" y="0" dy="3px" font-size="10px" text-anchor="start">40</text>
                    </g>
                    <g transform="translate(0, 0)" stroke-opacity="1">
                        <line class="line-horizontal" x1="-6" x2="-74" y1="0" y2="0" style="stroke: rgb(218, 218, 218);"></line>
                        <text x="-2" y="0" dy="3px" font-size="10px" text-anchor="start">60</text>
                    </g>
                </g>
                <g class="x axis" transform="">
                    <g transform="translate(-5, 0)">
                        <line class="line-vertical" x1="0" x2="0" y1="126" y2="-6" style="stroke: rgb(218, 218, 218);"></line>
                        <text x="0" y="130" dy="10px" font-size="10px" text-anchor="middle">..</text>
                    </g>
                    <g transform="translate(-15, 0)">
                        <line class="line-vertical" x1="0" x2="0" y1="126" y2="-6" style="stroke: rgb(218, 218, 218);"></line>
                        <text x="0" y="130" dy="10px" font-size="10px" text-anchor="middle">..</text>
                    </g>
                    <g transform="translate(-25, 0)">
                        <line class="line-vertical" x1="0" x2="0" y1="126" y2="-6" style="stroke: rgb(218, 218, 218);"></line>
                        <text x="0" y="130" dy="10px" font-size="10px" text-anchor="middle">..</text>
                    </g>
                    <g transform="translate(-35, 0)">
                        <line class="line-vertical" x1="0" x2="0" y1="126" y2="-6" style="stroke: rgb(218, 218, 218);"></line>
                        <text x="0" y="130" dy="10px" font-size="10px" text-anchor="middle">..</text>
                    </g>
                    <g transform="translate(-45, 0)">
                        <line class="line-vertical" x1="0" x2="0" y1="126" y2="-6" style="stroke: rgb(218, 218, 218);"></line>
                        <text x="0" y="130" dy="10px" font-size="10px" text-anchor="middle">..</text>
                    </g>
                    <g transform="translate(-55, 0)">
                        <line class="line-vertical" x1="0" x2="0" y1="126" y2="-6" style="stroke: rgb(218, 218, 218);"></line>
                        <text x="0" y="130" dy="10px" font-size="10px" text-anchor="middle">..</text>
                    </g>
                    <g transform="translate(-65, 0)">
                        <line class="line-vertical" x1="0" x2="0" y1="126" y2="-6" style="stroke: rgb(218, 218, 218);"></line>
                        <text x="0" y="130" dy="10px" font-size="10px" text-anchor="middle">..</text>
                    </g>
                    <g transform="translate(-75, 0)">
                        <line class="line-vertical" x1="0" x2="0" y1="126" y2="-6" style="stroke: rgb(218, 218, 218);"></line>
                        <text x="0" y="130" dy="10px" font-size="10px" text-anchor="middle">..</text>
                    </g>
                </g>
                <g class="dataset-units dataset-line dataset-0" transform="">
                    <path class="line-graph-path" d="M-5,52.5L-15,30L-25,45L-35,37.5L-45,78L-55,12L-65,64.5L-75,96" style="stroke: rgb(124, 214, 253); fill: none; stroke-width: 2;"></path>
                    <circle style="fill: #7cd6fd;" data-point-index="0" cx="-5" cy="52.5" r="4"></circle>
                    <circle style="fill: #7cd6fd;" data-point-index="1" cx="-15" cy="30" r="4"></circle>
                    <circle style="fill: #7cd6fd;" data-point-index="2" cx="-25" cy="45" r="4"></circle>
                    <circle style="fill: #7cd6fd;" data-point-index="3" cx="-35" cy="37.5" r="4"></circle>
                    <circle style="fill: #7cd6fd;" data-point-index="4" cx="-45" cy="78" r="4"></circle>
                    <circle style="fill: #7cd6fd;" data-point-index="5" cx="-55" cy="12" r="4"></circle>
                    <circle style="fill: #7cd6fd;" data-point-index="6" cx="-65" cy="64.5" r="4"></circle>
                    <circle style="fill: #7cd6fd;" data-point-index="7" cx="-75" cy="96" r="4"></circle>
                </g>
                <g class="dataset-units dataset-line dataset-1" transform="">
                    <path class="line-graph-path" d="M-5,52.5L-15,15L-25,105L-35,67.5L-45,63L-55,42L-65,49.5L-75,69" style="stroke: rgb(116, 62, 226); fill: none; stroke-width: 2;"></path>
                    <circle style="fill: #743ee2;" data-point-index="0" cx="-5" cy="52.5" r="4"></circle>
                    <circle style="fill: #743ee2;" data-point-index="1" cx="-15" cy="15" r="4"></circle>
                    <circle style="fill: #743ee2;" data-point-index="2" cx="-25" cy="105" r="4"></circle>
                    <circle style="fill: #743ee2;" data-point-index="3" cx="-35" cy="67.5" r="4"></circle>
                    <circle style="fill: #743ee2;" data-point-index="4" cx="-45" cy="63" r="4"></circle>
                    <circle style="fill: #743ee2;" data-point-index="5" cx="-55" cy="42" r="4"></circle>
                    <circle style="fill: #743ee2;" data-point-index="6" cx="-65" cy="49.5" r="4"></circle>
                    <circle style="fill: #743ee2;" data-point-index="7" cx="-75" cy="69" r="4"></circle>
                </g>
            </g>
            <g class="chart-legend" transform="translate(50, 210)">
                <g transform="translate(0, 0)">
                    <rect class="legend-bar" x="0" y="0" width="100" height="2px" fill="#7cd6fd"></rect>
                    <text class="legend-dataset-text" x="0" y="0" dy="20px" font-size="12px" text-anchor="start" fill="#555b51">Some Data</text>
                </g>
                <g transform="translate(100, 0)">
                    <rect class="legend-bar" x="0" y="0" width="100" height="2px" fill="#743ee2"></rect>
                    <text class="legend-dataset-text" x="0" y="0" dy="20px" font-size="12px" text-anchor="start" fill="#555b51">Another Set</text>
                </g>
            </g>
        </svg>
    </div>
</div>
aodamuz commented 3 years ago

I think I hurried, it was solved starting with (function() {...})();